HTML
- HyperTextMarkLanguage: 超文本标记语言
- 超文本： 不仅仅是纯文本，还包括字体信息和多媒体信息（图片、音频、视频）
通过eclipse创建html文件
body内部的常用标签
- 内容标题 h1-h6 属性：align=“left/right/center”
- 段落标签 p
- 水平分割线 hr
- 换行 br
列表标签
- 无序列表 ul:type li
- 有序列表 ol:type start reversed li
- 定义列表 dl定义列表 dt定义标题 dd定义描述
- 列表嵌套：有序和无序可以任意无限嵌套
分区标签
- 什么是分区元素: 分区元素默认没有任何显示效果，可以理解为容器，用于添加多个相关的元素，便于对多个相关元素进行统一管理。
- span：行内分区元素，和其它行内元素共占一行
- div：块级分区元素，独占一行
- 任何页面都会分为三大区：
<div>头部</div>
<div>体部</div>
<div>脚部</div>
<header>头部</header>
<article>正文</article>
<footer>脚部</footer>
元素分类
- 行内元素
共占一行，包括：span，strong和b加粗，em和i斜体，del和s删除线，u下划线
- 块级元素
独占一行，包括：div，hr，h1-h6,p
实体引用(特殊字符)
- 空格：会有折叠现象
- 小于号
<
- 大于号
>
图片标签img
- src：路径
相对路径：访问站内资源
1. 图片和页面在同一目录, 直接写图片名
2. 图片在页面的上级目录，…/图片名
3. 图片在页面的下级目录， 文件夹名/图片名
绝对路径:访问站外资源
- alt: 图片不能正常显示时显示的文本
- title: 鼠标悬停时显示的文本内容
- width、height: 两种赋值方式：1. 像素 2. 上级元素的百分比
- 练习：
创建demo06
在页面中添加两张图片，第一张图片显示站内资源的图片(随便照一张)宽度300高度150，鼠标悬停时显示"嘿嘿" ,第二张图片从tmooc里面随便找一张图片 宽度body的30% 鼠标悬停时显示"呵呵"
图像地图map
- map：name 表示唯一性的标示
- 子元素 area: shape(circle/rect) coords坐标（矩形4个值对角线点的坐标、圆形3个值圆心坐标和半径） href:资源路径，可以指向页面资源，也可以指向文件资源，如果浏览器支持浏览此文件则直接浏览，如果不支持浏览则下载
超链接a
- 如果不写
href属性 则就是纯文本
href属性的作用和图像地图中的作用一样target="_blank" 开启新的窗口显示页面<a>标签包裹文本则是文本超链接，包裹图片就是图片超链接- 页面内部跳转，在目的地的位置添加空的
<a>标签作为锚，通过另外一个超链接跳转到这个锚的位置
<a id="top"></a> <a href="#top">回到顶部</a>
- 练习：创建demo02,在页面中添加四个超链接分别是 1号美女 2号美女 3号美女 4号帅哥，
表格标签 table
- tr: table row 表示行
- td: table data 表示列
- th: table head 表头 字体加粗并且居中
- caption: 表格的标题
- 分组标签
thead 、tbody、tfoot 类似div没有显示效果 为了统一管理
- 属性：border边框粗细 cellspacing单元格间距 cellpadding单元格距内容的距离 td里面的属性：跨行rowspan 跨列colsapn
表单
- 表单用于获取用户输入的内容并提交给服务器
- 表单的控件：文本框、密码框、单选、多选(复选)、下拉选、 日期选择器、文件选择器、文本域等
- 文本框：
<input type="text" name maxLength value placeholder readonly>
- 密码框 password name
- 单选 radio name value checked
- label
- 多选 CheckBox name values checked
- 日期选择器 date name
- 文件选择器 file name
- 隐藏域 hidden name value
- 下拉选 select:name option:value selected
- 文本域 textarea:name cols rows placeholder
- 提交按钮 submit value
- 重置按钮 reset value
- 自定义按钮 button value
