HTML-001版
HTML
标签
h1~h6 标题标记 （h标记不允许互相嵌套）
p 段落标记（p标记里不能有h标记，p标记，div标记）
div 盒子模型 标记集合管理（包裹器）
<input type=“ text”> (单标签 ，输入框)
span 容器标签 （没有语义，用于包裹短语的通用容器 ）
em （要着重阅读的内容）
strong（十分重要的内容）
br 换行标签
hr 分割线
pre 按原文显示 （其内的内容会按输入样式显示）
b 粗体
i 斜体
语义化标签
块级元素与行内元素
块级元素 ：独占一行（排版标签都是块级元素）
h1 ; p ; div ; ul ；ol ；li ；table ；tr ；td
行内元素：不独占一行
input ; span ；a ；img ；em ；strong ；
规则：
1.块级元素中能写：行内元素，块级元素（几乎什么都能写）；
2.行内元素中能写：行内元素，但是不能写块级元素；
3.h1-h6 标记不允许互相嵌套；
4.p标签中不能写块元素；
常用的文本标签
文本标签更微观（词汇，短语），通常都是行内元素。
em （要着重阅读的内容）
strong（十分重要的内容）
span （没有语义，用于包裹短语的通用容器 ）
不常用的文本标签
cite （作品标签)
dfn （特殊术语，专属名词）
del 与 ins（删除的文本【与】插入的文本）
sub 与 sup （下标文字【与】上标文字）【
标签：通常会将文本显示为下标，即文本会变小并位于基线下方。
标签：通常会将文本显示为上标，即文本会变小并位于基线上方。
】
code （一段代码）
samp （从正常的上下文中，将某些内容提取出来）
图片标签
<img src=" …”alt="…” width=“”height=“”>
src 是图片的路径；
alt 是图片不显示时显示的文字，或定义图片的内容
width 是设置图片的宽度
height 是设置图片的高度
相对路径 和 绝对路径
常见的图片格式
超链接
a链接 < a href="" target="" download >…< /a>
… 是链接名
href 是跳转链接 ，
download 是触发浏览器强制下载我们的链接文件
target 是指定链接的目标位置，即链接被点击后，页面将在何处打开
【target属性有以下几个常用的值：
_self：默认值，表示链接将在当前窗口或框架中打开。_blank：表示链接将在新的浏览器窗口或标签页中打开。_parent：表示链接将在父框架中打开（如果当前页面是在一个框架中）。_top：表示链接将在整个窗口中打开，忽略任何框架。】
浏览器可以直接打开的文件：
jpg ；mp4 ；gif ；pdf ；
浏览器打不开的文件，浏览器会触发下载：
zip ；
超链接跳转锚点
1.第一种
< a href=“ #123 ”>5</ a>
< a name=“123 ”></ a>
name 是a 标签的一个锚点，点击之前的a标签，可以挑转到所建的锚点位置。
2.第二种
< a href=“ #123 ”>….</ a>
< p id=“123”>……..</ p>
id 是p标签中创建的一个锚点，点击之前的a标签，可以跳转到所建的锚点位置。
3.第三种
< a href=“ # ”>回到顶部</ a>
可直接返回顶部。
< a href=“ ”>…</ a>
可直接刷新页面。
4.第四种
< a href=“ javascript：可以写js代码； ”>…</ a>
超链接 唤起指定应用
1.< a href="tel:123456">电话联系
< a href=" mailto : 2415790542 @qq.com" >邮件联系< /a>
< a href="sms:123456">短信联系
超文本 的含义
列表
有序，无序 列表里面写< li>
有序列表（Ordered list）< ol>
自定义列表（Definition list)< dl>
其内部是< dt>和< dd>
列表的注意事项
表格 table
```html
<body>
<script >
console.log( Number(a ));
</script>
<p> 1 <cite>23</cite> 456789 </p>
<p> 1 <dfn>23</dfn> 456789 </p>
<p> 1 <del>23</del> 456 <ins>78</ins>9 </p>
<p> 1 <sub>23</sub> 456 <sup>78</sup>9 </p>
<p> 1 <code>23</code>456789 </p>
<p> 123456789 </p>
<p> 123456789 </p>
<a href="E:\学校软件\Code文件夹\11班\1.0-1\6.18\002.html" target="_self">123</a>
<a href="tel:123456">电话联系</a>
<a href="mailto:2415790542@qq.com">邮件联系</a>
<a href="sms:123456">短信联系</a>
<!-- 表格 -->
<table border="1">
<!--表格标题-->
<caption>学生信息</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计:4人</td>
</tr>
</tfoot>
</table>
</body>
表格的常用属性
表格 table
< table border="1" width="600" height="300" cellspacing="0">
中 ：
border 是表格边框
width 是表格的最少宽度
height 是表格的最少高度
cellspacing 是表格之的间距
**表格头部 thead **
< thead height=“300”align=“ ”valign=“ ”></ thead>
height 是表头的高度
align 是文字的水平方向的对齐方式
valign 是文字的垂直方向的对齐方向
表格主体 tbody
< tbody height=“300”align=“ ”valign=“ ”></ tbody>
height 是表头的高度
align 是文字的水平方向的对齐方式
valign 是文字的垂直方向的对齐方向
表格脚注 tfoot
< tfoot height=“300”align=“ ”valign=“ ”></ tfoot>
height 是表头的高度
align 是文字的水平方向的对齐方式
valign 是文字的垂直方向的对齐方向
表格行 tr
< tr height=“300”align=“ ”valign=“ ”></ tr>
height 是表头的高度
align 是文字的水平方向的对齐方式
valign 是文字的垂直方向的对齐方向
**表格单元格 td 与 th **
< th width=“ 200” height=“300”align=“ ”valign=“ ”></ th>
width 是表头的宽度（会影响整列）
height 是表头的高度（会影响整行）
align 是文字的水平方向的对齐方式
valign 是文字的垂直方向的对齐方向
表格-跨行与夸列
# 表单
# form
### 基本结构
```html
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>搜索</button>
</form>
常用控件
禁用表单控件
disabled 可以禁用表单
label 标签
fieldset 标签与 legend 标签
表单总结
框架标签
iframe
字符实体
全局属性
meat 属性
浙公网安备 33010602011771号