一、标签
认识标记
<!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 应用计本 34 班\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"></table>:表格
<tr></tr>:行
<td></td>:单元格
<th>编号</th>:标题的单元格
<tbody></tbody>:内容
<caption>数码电器</caption>:表格标题
属性
- 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：如果出现该属性，则视频在就绪后马上播放（现在已经不支持全部主浏览器了，原因见上一节 Audio 标签的“autoplay”属性描述）
- controls：如果出现该属性，则向用户显示控件，比如播放按钮
- loop：如果出现该属性，则当媒介文件完成播放后再次开始播放
- preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。若和 "autoplay" 同时使用，则该属性值会被忽略。该属性的三个值同音频标签
- src：要播放的视频的 URL 地址