一、标签
认识标记
<!DOCTYPE html> <!--- 文档声明, 声明的是 HTML5 --->
<html></html> <!---- html 标签 --->
<head></head> <!---- 头部标签 --->
<title></title> <!---- 删标题标签除标签 --->
<body></body> <!---- 内容标签 --->
<p></p> <!---- 段落 --->
<span></span> <!---- 文本标签（行级标签） --->
<i></i> <!---- 倾斜 --->
<b></b> <!---- 加粗 --->
<strong></strong> <!---- 很重要因此加粗 --->
<em></em> <!---- 表强调 --->
<address></address> <!---- 地址标签 --->
<small></small> <!---- 小标签 --->
<sub></sub> <!---- 底数 --->
<sup></sup> <!---- 次数 --->
<pre></pre> <!---- 预处理标签 --->
<del></del> <!---- 删除标签 --->
<hr> <!--- 水平线 --->
属性
lang="zh-cn": en/zh-cn (英文/简体中文)
图片标签
<img src="./image/banner.jpg.crdownload" alt="图片加载中" title="这是一张美丽的风景" width="300" height="200">
- src="图片路径"
- 相对路径：根据当前目录选择
- ./：当前根目录
- ../：返回到上级根目录
- 绝对路径：完整路径 (
C:\Users\Lenovo\Desktop\web_day 1\image)
- alt = "图片加载中"：当图片路径错误时候提示信息
- title：当鼠标悬浮上去提示信息
- width = "300"：宽度
- height = "200"：高度
超链接标签 (a 标签)
- href = "./web_demo 2.html"：链接地址 (相对路径)
- target 属性:
_blank：在一个新的浏览器窗口或标签页中打开页面或文件_self：在当前浏览器窗口打开页面或文件_parent：在框架的父级打开页面或文件_top：在框架的最顶层打开新的页面或文件（若包含多个框架的嵌套）
- 锚标记:
<div id="top">顶部</div>
<a href="#top">回到顶部</a>
<!-----需要返回的位置设置 id, href 的时候，#id -->
列表标签
无序列表 <ul> 和“有序列表 <ol>，特殊的列表叫做“定义列表 <dl>
无序列表
type 属性设置：
- disc：项目符号以实心圆“●”表示，默认值。
- circle：项目符号以空心圆“○”表示。
- square：项目符号以实心方块“■”表示
有序列表
type 属性值：
- 1，默认，以阿拉伯数字作为列表符号
- A，以大写英文字母作为列表符号
- a，以小写英文字母作为列表符号
- I，以大写罗马数字作为列表符号
- i，以小写罗马数字作为列表符号
自定义列表
<dl>
<dt>HTML</dt>
<dd>创建 Web 页面的基本 DOM 结构</dd>
<dt>CSS</dt>
<dd>为 Web 页面美化元素样式，调整布局</dd>
<dt>JavaScript</dt>
<dd>让 Web 页面“动态”起来</dd>
</dl>
二、表格
标签
<table border="1">
<caption>表格标题</caption>
<thead> <!---- 定义表格的头部部分，通常包含列标题 -->
<tr>
<th></th>
</tr>
</thead>
<tbody> <!---- 表格内容 -->
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
属性
- border：表格边框
- cellspacing：用于设置表格单元格之间的空间或间隙，默认单位为像素（px）。
- cellpadding：用于设置表格单元格与内容之间的间距，默认单位为像素（px）。
- width：用于设置表格宽度
- height：用于设置表格高度
- bgcolor：用于设置表格颜色
- background：用于设置表格的背景图片
- align：用于设置表格对齐方式或单元格内容的对齐方式
- rowspan：表格跨行
- colspan：表格跨列
三、表单
input
格式：
<input type="text" value="" name="" />
具体样式：
- type="text"：文本框
- type="password"： 密码框
- type="radio"： 单选框; 实现单选设置同名 name（如:name="gender" ) (后面空白区加上 checked 表示默认选中)
- type="checkbox"： 多选框
- type="file"：文件选择
- type="button"： 普通按钮
- type="email": 邮箱
- type="reset": 重置按钮
- type="textarea"：多行的文本框---->可用于写反馈， “cols”和“rows”: 控制列和行
- value="登录"：设置按钮的值
- maxlength="6": 限制最大输入的个数
- readonly: 只读
- disabled: 禁止使用
- size: 设置宽度（文本框）
格式：
<form action="day1_2.html" method="get">
<input type="text" value=""/>
</form>
action：规定当提交表单时向何处发送表单数据，它的属性值应该是一个“URL”。 method：规定用于发送 form-data 的 HTTP 方法，值为： get：安全性不高，对应的 action 的 URL 上会出现当前提交的表单信息 post：安全性较高，会隐藏信息
下拉列表框
<select name="" id="">
<option value="苹果">苹果</option>
<option value="葡萄">葡萄</option>
<option value="香蕉" selected>香蕉</option>
<option value="草莓">草莓</option>
</select>
后面加上 selected：默认选中
type 属性增加的属性值
- email：用于应该包含 “e-mail” 地址的输入框
- url：用于应该包含“URL”地址的输入框
- search：用于应该“搜索内容”的输入框
- number：用于应该包含“数值”的输入控件
- tel：规定显示的类型为“电话号码”的输入框
- range：规定显示的类型为“数值选择范围”选择控件
- date：规定显示的类型为“日期”选择控件
- month：规定显示的类型为“月份”选择控件
- week：规定显示的类型为“周”选择控件
- time：规定显示的类型为“时间”选择控件
- datetime：规定显示的类型为“日期时间”选择控件
- datetime-local：规定显示的类型为“本地日期时间”选择控件
- color：规定显示的类型为“颜色”选择控件
四、多媒体应用
音乐和视频
<audio controls="controls">
<source src="./audio/cityOfSky.mp3"></source>
</audio>
controls：控制播放按钮
<audio> 和 <video> 标签具有以下属性：
- width：设置视频播放器的宽度
- height：设置视频播放器的高度
- autoplay：如果出现该属性，则视频在就绪后马上播放
- controls：如果出现该属性，则向用户显示控件，比如播放按钮
- loop：如果出现该属性，则当媒介文件完成播放后再次开始播放
- preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。若和 "autoplay" 同时使用，则该属性值会被忽略。该属性的三个值同音频标签
- src：要播放的视频的 URL 地址