-
骨架
- 点击！加Enter快速生成骨架
- html：整个网页
- head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
- body：网页主体，用来存放给用户看的信息，例如图片、文字
-
注释
- Ctrl加/ 快速生成<!-- 在里面写注释 -->
-
排版标签
- 标题 h1~h6 <hn></hn> 特点-文字加粗-字号逐渐减小-独占一行（换行
- 段落 p <p></p> 特点-独占一行-段落之间常在间隙
- 换行 br <br>
- 分割线 hr <hr>
- 加粗 strong或b <strong></strong>或<b></b>
- 倾斜 em或i <em></em>或<I></i>
- 下划线 ins或u <ins></ins>或<u></u>
- 删除线 del或s <del></del>或<s></s>
- 滚动 marquee <marquee></marquee>
- 预格式化 pre <pre></pre> 特点-保留格式-等宽字体显示-内容原样呈现
- 上标 sup <sup></sup> 特点-用于数学数字的上标
- 下标 sub <sub></sub> 特点-用于数学数字的下标
- 对齐 align <p align="left左对齐 center居中 right右对齐">
-
路径
-
相对路径（从当前文件位置出发查找目标文件）
- / 表示进入某个文件夹里面 → 文件夹名/
- . 表示当前文件所在文件夹 → ./
- ..表示当前文件的上一级文件夹 → ../
-
绝对路径（Windows 电脑从盘符出发）
- 在线网址 → 友情链接 直接复制文件所在地址
-
图片
-
插入图片（img）
- src：图片URL，必须属性
- 绝对路径例 <img src="C:\Users\21195\Desktop\南京web前端\day2\image\test.jpeg" />
- 相对路径例 <img src="../image/test.jpeg" /> ../表示的是上一级目录
- 相对路径例 <img src="./test.jpeg" /> ./表示的是当前目录
- 相对路径例 <img src="image/test.jpeg" /> 下一级目录直接喊
-
图片中img常见的属性 (以下可写在<img src 里面 />)
- 图片宽度 width width="~~~px" px为像素单位
- 图片高度 height height="~~~px"
- 边框 border border="~~~px"
- 对齐 align align="left左对齐 center居中 right右对齐"
- 垂直距离 vspace vspace="~~~px" 即图片上下距页面多远
- 水平距离 hspace hspace="~~~px"
- 提示文本 title title="~~~~" 用来显示描述的文字的,要把鼠标放在图片上
- 替换文本 alt alt="~~~~" 如果图片无法正常加载出来，alt里面的文字就会代替图片显示全局属性：所有的标签都具有该属性。如果没有alt属性，那么alt的属性值就是title的属性值
-
链接
-
超链接(a)
- 跳转地址，必须属性 href <a href="~~~">~~~~</a> 指定链接跳转的地址
- 新窗口打开 target="_blank" 保留原页面
- 空链接 href=“#” #表示这是一个空连接，点击之后不会跳转，会把当前的页面刷新一次
-
锚链接（a）
-
唯一标识 id <hn id="~~~"> </hn> id是标签的唯一标识，同一个网页内，id属性值不能重复。="不能重复且唯一"。所以上方对应的标签是<a href="#~~~">~~~~~~</a>，点击它可以在同一页面实现跳转
-
视频（video）
- 视频URL src <video src="~~~">~~~</video>
- 音频控制面板 controls
- 循环播放 loop
- 自动播放 autoplay 要么配合muted使用，要么利用js实现
- 静音 muted
-
音频（audio）
- 音频URL src <audio src="~~~">~~~</audio>
- 音频控制面板 controls
- 循环播放 loop
- 自动播放 autoplay
-
列表
-
无序列表
- ul 嵌套 li，ul 是无序列表，li 是列表条目
- 注意事项 - ul 标签里面只能包裹 li 标签 - li 标签里面可以包裹任何内容
- 例
<ul>
<li type="circle">~~~</li> type="circle/square"可以控制列表前的点
<li>~~~</li>
<li>~~~</li>
</ul>
-
有序列表
- ol 嵌套 li，ol 是有序列表，li 是列表条目
- 注意事项 - ol 标签里面只能包裹 li 标签 - li 标签里面可以包裹任何内容
- 例
<ol>
<li>~~~</li>
<li>~~~</li>
<li>~~~</li>
</ol>
-
自定义列表
- dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情
- 注意事项 - dl 里面只能包含dt 和 dd - dt 和 dd 里面可以包含任何内容
- 例
<dl>
<dt>~~~</dt>
<dd>~~~</dd>
<dd>~~~</dd>
</dl>
-
表格
- table（表格） 嵌套 tr（行），tr 嵌套 td（表头单元格） / th（内容单元格）
- 例
<table>
<tr>
<th>~~~</th> 内容以粗体并且居中显示
<td>~~~</td>
<td>~~~</td>
</tr>
</table>
- 对齐 align <p align="left左对齐 center居中 right右对齐"
- 边框 border border="~~~px"
- 格子内颜色 bgcolor bgcolor="~~~"
- 背景图片 background background="同上路径"
- 单元格内容与单元格边框之间的空白距离 cellpadding cellpadding="~~~px" 默认的值是1px
-
单元格与单元格之间的间隙 cellspacing cellspacing=“~~~px” 默认的值是2px
-
表格中合并单元格
- 1. 明确合并的目标 2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量） 3. 删除其他单元格
- 跨行合并，保留最上单元格，添加属性 rowspan rowspan=“合并格数”
- 跨列合并，保留最左单元格，添加属性 colspan colspan=“合并格数”
-
语义话标签
-
没有语义的布局标签（常用）
- 盒子标签div <div>~~~</div>用来划分区域，独占一行。
- 文字标签span <span>~~~</span>不会独占一行，一行可显示多个
-
有语义的布局标签（不常用）
- 网页头部 header
- 网页导航 nav
- 网页底部 footer
- 网页侧边栏 aside
-
网页区块 section
- 网页文章 article
- 表< <
- 表> >
- 表空格  
- 表双引号 "
-
表单域
-
表单标签（form 容器元素）
- url地址 action action="url地址" 例<form action="#"> 指定表单数据要交给哪个页面处理
- 提交方式 method method="提交方式" http请求中的那种提交方式,默认的属性值是get,但post 相对于get安全一点
- 提交编码 enctype enctype="提交编码" 告诉服务器如何去解析这次的请求 application/x-www-form-urlencoded纯文本，太垃圾。multipart/form-data上传文件或图片，高级。
-
表单控件
-
表单控制元素（input）
- 文本框 text <input type="text" name="~~~" value="~~~~">
- 表单类型 type <input type="~~~">
- 元素值 value value=“~~~“简单来说就是起名字
- 唯一标识 id 强调唯一
- 元素的名字 name name=“~~~“ 一部分可以用来分类。在用于在表单提交时，将文本框中的内容发送给服务器，服务器通过 name 来识别这个数据属于哪个字段
- 密码框 password <input type="password">
- 单选框 radio name相同的为一组，一组中只有一个被选中，checked为默认选中 disabled为禁用
- 多选框 checkbox name相同的为一组，一组中能多选，checked为默认选中 disabled为禁用
- 上传文件 file <input type="file">
- 提交按钮 submit <input type="submit" id="~" value="提交">
- 重置按钮 reset <input type="reset" value="重置">
- 按钮 button <input type="button" id="~" value="按钮”>
- 只读 readonly
- 隐藏 hidden
- 日期 date <input type="date">
- 搜索框 search <input type="search" id="~" value="搜索”>
- 范围 range <input type="range" id="~"value="范围”>
- 颜色 color <input type="color" id="~" value="颜色”>
- 邮件 email <input type="email" >
-
下拉框（select）
- 选项 optionp
例<select>
<option> </option>
<option> </option>
</select>
- 列表 multipe 以列表r的形式显示
-
默认 selected option 标签内赤加selected=“selected”（可省略）可将该项设为器认项
- 限长字符 maxlength
-
文本域（textarea）
- 宽度 rows rows="~~~~”
- 高度 cols coles="~~~~”
-
背景提示 placeholder placeholder="~~~~”
-
iframe标签
- 例 <iframe src="链接地址"width="数值”height="数值"> </iframe>
- 嵌入边框 frameborder frameborder="~~"
- 折叠 details <details> </details>可以折叠内容
- 详情 summary <summary>~~~</summary>
- 例
<details>
<summary>产品详情</summary>
<p>这是产品的具体参数，包括尺寸、重量等。</p>
</details> 在这个例子里，“产品详情”这部分就是由 <summary> 标签定义的内容，用户点击“产品详情”就可以看到 <details> 标签里的产品具体参数。
-
label标签
- 常用于绑员内容与表单标签的关系（使点击文字即可送中选框)
- 使用方法：直接使用label标签把内容（文本）和表单标签一起包裹起来，再
把label标签的for属性删除即可，也可以不删（但for的属性与相关元素的id值相同）
