HTML介绍
HyperText(超文本) Markup（标记） Language（语音） 类似于XML都是由标签组成
- xml：是可扩展标记语言,标签可以任意自定义
- HTML：不可以使用任意标签，学习html主要学习的就是html里面有哪些固定的标签，学习标签内部有哪些属性,还要学习标签和标签之间的嵌套关系
- 超文本： 不仅仅是文本，还包括字体大小，颜色，样式等，还包括多媒体相关（图片，音频，视频）
浏览器兼容性问题
- 因为不同的浏览器可能会存在兼容性问题，所以平时测试时统一使用谷歌浏览器
HTML文件结构
文档声明 根标签 头标签 给浏览器看的内容 告诉浏览器解码的字符集页面的标题体标签 给用户看的内容
HTML中常见的各种标签
-
文本标题标签 独占一行 属性 align="left/center/right"
---->
-
段落标签 独占一行
-
换行
-
水平线
简历练习：
<h1 align="center">苍老师简历</h1>
<hr>
<h2>基本信息</h2>
<p>姓名：苍老师</p>
<p>性别：男</p>
<p>爱好：苍老师</p>
<hr>
<h2>基本信息</h2>
<p>曾获得2018年达内男神评选第一名<br>
年轻时获得某校校草第一名荣誉</p>
列表标签
无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
有序列表
<ol type="1" start="5"
reversed="reversed"><!-- ordered list -->
<li>打开冰箱门</li>
<li>把大象放进冰箱</li>
<li>关上冰箱门</li>
</ol>
定义列表
<dl><!-- definition list定义列表 -->
<!--definition title/term定义标题 -->
<dt>凉菜</dt>
<!--definition description 定义描述 -->
<dd>大拌菜</dd>
<dd>芥末鸭掌</dd>
<dd>花毛一体</dd>
<dt>炒菜</dt>
<dd>木须肉</dd>
<dd>葱爆羊肉</dd>
<dd>溜三样</dd>
</dl>
列表嵌套
有序和无序列表之间可以任意嵌套n层
分区标签
- 分区标签自身没有显示效果，可以理解成一个容器，用于装页面中的元素，对页面中的元素进行统一管理。
- div：块级分区元素，独占一行
- span：行内分区元素，共占一行
-
以后开发的页面一般会分为三大区：头 体 脚
<div>头部</div> <div>体部</div> <div>脚部</div> - h5标准中增加了几个专门用于分区的元素用来取代div,相比div可读性更强见名知意 头部体部脚部
标签的分类
- 块级元素：独占一行 包括：div，h1-h6, p,hr
- 行内元素：和其它行内元素共占一行 包括：span,斜体i和em,粗体 b和strong,下划线 u, 删除线 s和del
空格折叠现象
- 如果一行内连续多个空格最终只会识别为一个 通过
常见需要转义的特殊字符(实体引用)
- 空格
- 小于号 <
- 大于号 >
- 换行
图片标签
是单标签
- 常见属性：
- alt：当图片不能正常显示的时候显示此内容
- src：路径，站内资源使用相对路径 和站外资源使用绝对路径
- title：当鼠标悬停的时候显示的文本
- width/height: 通过像素设置宽高，通过百分比设置宽高，如果只设置宽度高度会根据原始宽高比进行缩放
图片地图
<map id="xxx" name="xxx">
<area shape="circle/rect" coords="280,330,32"
href="http://doc.tedu.cn">
</map>
- href:指定访问的路径，地址可以指向页面(站内或站外)，还可以指向文件，如果文件浏览器可以打开则直接浏览，如果打不开则下载此文件
课程回顾
-
html文件的结构
<!DOCTYPE html> 文档声明告诉浏览器使用什么版本解析页面 <html> <head> 里面写给浏览器看的内容 <meta charset="UTF-8"> <title>页面标题</title> </head> <body> 写给用户看的内容 </body> </html> - 文本标题 h1-h6 属性： align = left/center/right
- 段落标签 p
- 水平分割线 hr
- 换行 br
- 列表：
-
无序列表： ul li
<ul> <li>aaa</li> <li>bbb</li> </ul> -
有序
<ol type="i/a/A/i/I" start="5" reversed="reversed"> <li>aaa</li> <li>bbb</li> </ol> -
定义列表
<dl> <dt></dt> <dd></dd> <dd></dd> </dl> - 分区元素
- div： 块级 独占一行
- span： 行内 共占一行
- 页面会分为三大部分 头 体 脚
- 元素分类
- 块级元素 包括 div h1-h6 p hr
- 行内元素 包括 span i和em b和strong u下划线 s和del
- 空格
- 小于号 <
- 大于号 >
- 换行
- 图片
- 图片地图