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
- 空格
- 小于号 <
- 大于号 >
- 换行
- 图片 ?
- 图片地图
web第一章
原文地址：https://www.cnblogs.com/ahaijava/p/9965976.html