Html基础
1 认识大前端
前端就是利用html+css+js等技术将效果图生成网页。
Html结构标准，相当人的身体；
Css表现标准，相当与给人化妆 变的更漂亮；
Js行为标准，想当与人在唱歌，页面更灵动。
2 认识网页
2.1 网页的组成
网页由文字、图片、输入框、视频、音频、超链接等组成。
2.2 浏览器
浏览器是一个上网的客户端（软件）。
2.3 浏览器内核
渲染引擎：渲染引擎是兼容性问题出现的根原因。
2.4 浏览器和服务器
IIS web服务器 提供网页浏览服务
2.5 Url地址
Url地址就是咱们说的网址。
3 认识html
3.1 Hyper text markup language
超文本标记语言。
超文本：超链接。（实现页面跳转）
3.2 Html结构标准
Html与htm是一样的。
后缀名不能决定文件格式，只能决定打开文件打开的方式。
3.3 Html标签分类
单标签 <!Doctype html>
双标签 <html></html> <head></head> <title></title>
3.4 Html标签关系分类
包含（嵌套关系） <head></head> <title></title> 父子
并列关系 <head></head> <body></body> 兄弟姐妹
3.5 开发工具
Dw历史悠久，设计师使用。
Sublime轻量级 有很多好用的插件。
Webstorm重量级 太过智能。
3.6 sublime快捷键使用
3.7 设置默认浏览器
浏览器右上角，设置里选择设置默认浏览器。
4 标签
4.1 单标签
注释标签 ctrl+/
换行标签 <br/>
水平线标签 <hr/>
4.2 双标签
◆<p>文本内容</p>
特点：上下自动生成空白行，<br/>换行不会生成空白行。
◆标题标签
h1-h6 取值到h6，h1在一个页面里只能出现一次。
◆文本标签
<font>文本内容</font>
◆文本格式化标签
文本加粗标签<strong></strong> <b></b>尽量使用strong
文本倾斜标签<em></em> <i></i> 尽量使用em
删除线标签<del></del> <s></s> 尽量使用del
下划线标签<ins></ins> <u></u> 尽量使用ins
注意：之所以工作里使用<strong></strong> <em></em> <del></del> <ins></ins> 是因为更有语义化
◆图片标签
Src图片的来源 必写属性
Alt替换文本 图片不显示的时候显示的文字
Title提示文本 鼠标放到图片上显示的文字
Width图片宽度
Height图片高度
注意：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。
5 路径
5.1 相对路径
相对于文件自身出发，就是相对路径。
◆文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名
◆图片（html文档）在文件在下一级目录里。文件夹名称+/+图片（html）名称
◆图片（html）在文件的上一级目录里，..+/+图片（html）名称
◆图片在文件的上一级的其他目录里，../文件夹名称/图片名称
★总结：找到下一级目录（文件夹）的图片（文件）用/
跳出当前目录使用../
5.2 绝对路径
6 超链接
href去往的路径（跳转的页面） 必写属性
title提示文本 鼠标放到链接上显示的文字
target=”_self”默认值在自身页面打开（关闭自身页面，打开链接页面）
Target=”_blank”打开新页面（自身页面不关闭，打开一个新的链接页面）
6.1 锚链接
a.先定义一个锚点
b.超链接到锚点
6.2 空链不知道链接到那个页面的时候，用空链
6.3 压缩文件下载不推荐使用
6.4 超链接优化写法
<base target="_blank"> 让所有的超链接都在新窗口打开
7 另存为 ctrl+shift+s
8 特殊字符
9 列表
9.1 无序列表
type=”square”小方块
Type=”disc”实心小圆圈
Type=”circle”空心小圆圈
9.2 有序列表
◆type=”1,a,A,i,I”type的值可以为1,a,A,i,I
start=”3”决定了开始的位置。
9.3 自定义列表
10 音乐标签
11 滚动
网友评论