Java学习笔记-Day43 HTML标签
- 一、布局标签
- 1、p标签
- 2、div标签
- 3、span标签
- 二、列表标签
- 1、有序列表
- 2、无序列表
- 3、自定义列表
- 三、文本标签
- 1、内联型文本标签
- 2、块级文本标签
- 四、框架标签
- 五、超链接标签
- 1、a标签的使用
- 2、绝对路径与相对路径
- 2.1、绝对路径
- 2.2、相对路径
- 3、锚点
- 4、链接到第三方资源
- 5、链接的打开方式
- 七、图片标签
- 1、img标签的使用
- 2、src与href的区别
- 九、表格标签
- 1、表格的基本结构
- 2、表格的基本属性
- 3、表格的合并
- 4、表格对齐方式
- 十、html语义化
- 1、html语义化的优点
- 2、HTML语义化的注意事项
- 十一、表单标签
- 1、主要标签
- 2、标签私有属性
- 3、method属性为get或post的区别
- 4、常用的表单标签
- 5、表单标签的通用属性
- 6、input标签
- 7、下拉框
- 7.1、select标签
- 7.2、option标签
- 8、fieldset标签
- 9、textarea标签
- 10、label标签
一、布局标签
在 html4 中用于布局的标签很少，在 html5 中扩展了部分的布局标签，增加了代码的可读性。
1、p标签
p标签又被称为段落标签，p是段落（paragraph）的缩写，包裹的内容为一个段落的文字或修饰文字的文字标签，默认自带内边距，是块级元素。
<p>段落标签</p>
2、div标签
div标签一般配合css对网页内大块区域进行布局，是块级元素。
<div>div标签</div>
3、span标签
span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。span标签是内联元素。
<span>span标签</span>
二、列表标签
列表标签是一组样式相同、功能相同的元素的集合。
1、有序列表
有序列表用来显示有顺序的列表数据信息，可显示顺序号。
- ol标签：有序列表，是块级元素。
- li标签：列表项，是块级元素。
- type属性：规定列表的项目符号的类型，取值范围：A、a、1、i、Ι。
<ol type="a">
<li>员工管理</li>
<li>部门管理</li>
<li>考勤管理</li>
</ol>
2、无序列表
无序列表：用来显示无顺序的列表数据信息，可以设置列表符号。
- ul标签：无序列表，是块级元素。
- li标签：列表项，是块级元素。
- type属性：列表的明细符号类型，取值范围 circle(空心圆)、disc(实心圆)、square(正方形)。
<ul type="circle">
<li>员工管理</li>
<li>部门管理</li>
<li>考勤管理</li>
</ul>
3、自定义列表
自定义列表：用来表示一组无序的、具备标题的列表数据。
- dl标签：列表容器标签，是块级元素。
- dt标签：列表标题，是块级元素。
- dd标签：列表内容，是块级元素。
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
三、文本标签
文本标签：用来修饰小段用于阅读的文字的标签。
文本类标签一般只修饰小段的文字。
文本类标签只能阅读，不能点击。
文本类标签可以提升SEO。
1、内联型文本标签
（1）u标签：内容默认以下划线方式显示。
<u>文本标签</u>
（2）strong标签：内容默认以加粗的方式显示。
<strong>文本标签</strong>
（3）em标签：内容默认以倾斜的方式显示。
<em>文本标签</em>
2、块级文本标签
h1—h6：标题文字标签，从h1到h6默认字体大小依次变小。
h标签在搜索引擎搜索时优先级别较高。
当网络不好等原因导致css无法加载时，使用标题标签具备默认样式。
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
四、框架标签
iframe标签：该标签可以在当前网页上引入其他网页资源（支持引入非同源网页）。
属性 | 值 | 描述 |
align | Left、Right、Top、Middle、bottom | 规定如何根据周围的元素来对齐此框架（不建议使用） |
src | URL | 规定在iframe中显示的文档的URL |
frameBorder | 1、0 | 规定是否显示框架周围的边框 |
scrolling | Yes 、No、auto | 规定是否在iframe中显示滚动条 |
width/height | 像素px或者百分比 | 定义iframe的宽度/高度 |
<iframe src="https://www.sogou.com" width="500px" height="300px" name="ifr" scrolling="yes"></iframe>
<a href="https://www.baidu.com" target="ifr">baidu</a>
<a href="https://www.360.com" target="ifr">360</a>
五、超链接标签
1、a标签的使用
超链接标签又称为a标签，通过a标签可以访问（链接）到其他网页资源。
<a href="https://www.baidu.com">百度</a>
注意：浏览器会记录访问地址，并按照是否被访问过显示链接。未访问的链接带有下划线且是蓝色的，访问过的链接带有下划线且是紫色的，活动链接带有下划线且是红色的。
2、绝对路径与相对路径
href的取值可以为绝对路径或者相对路径。
2.1、绝对路径
绝对路径：完整的网页访问路径，与当前网页位置无关。
域名：映射ip地址的字符，便于记忆。
端口：web服务器的端口，浏览器默认访问端口80。
站点：网络站点的简称，网页资源的根目录，在web服务器中可通过配置缺省此项。
2.2、相对路径
相对路径：需要访问的网页资源与当前网页资源路径的相对位置。
符号 | 含义 |
. | 代表目前所在的目录 |
. . | 代表上一层目录 |
/ | web服务器的根目录 |
<a href="../body.html">
使用相对路径访问本域内的网页资源
</a>
3、锚点
锚点是一种超链接，又叫命名锚记。在网页中的作用是快速定位器。
标签id为jump的段落标签：
<p id="jump">区域内容</p>（1）锚点的声明（点击后迅速定位到网页指定位置）：
<a href="#jump">锚点</a>（2）跨网页的锚点访问：
<a href="body.html#jump">跨网页锚点</a> 使用id与name声明锚点的区别：在老版本浏览器中最初都是使用name作为锚点位置的声明方式。网页中name属性的取值不唯一，因此造成锚点定位不准，所以后期浏览器都支持使用id作为锚点声明位置。Html5规范中已经声明取消name的锚点声明方式，建议使用id。
4、链接到第三方资源
在网页中可以通过超链接访问非网页资源，访问的前提是当前系统安装了相关的处理程序。
<a href="mailto:1771119481@gmail.com">邮件</a>
<a href="tel:13815132010">电话</a>
<a href="sms:13815132010">短信</a>
<a href="a.mp4">视频</a>
5、链接的打开方式
被访问的网页以哪种方式打开，使用 target 属性设置。
target属性的取值范围：
① _blank：在新窗口中打开链接文档
② _self：默认打开方式，在当前浏览器窗口中打开被链接文档。
③ _parent：在父框架中打开被链接文档。
④ _top：在当前网页的最顶层框架中打开被链接文档。
⑤ framename：在指定的框架中打开被链接文档。七、图片标签
1、img标签的使用
图片标签又称 img 标签，用于在网页上显示图片。
属性值 | 描述 |
src | 图片路径 |
width | 图片宽度（默认图片实际宽度） |
height | 图片高度（默认图片实际高度） |
alt | 在图片无法显示时的代替文本 |
usemap | 把图像设置为客户端图像映射 |
title | 当鼠标悬浮在图片上时显示的文字 |
<img src="./img/1.jpg" width="100px" height="100px" title="图片"/>
2、src与href的区别
src 与 href 的区别：不同标签使用 src 与 href 引用当前网页之外的资源的主要区别如下。
- src（ source ）的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分（引入），一般用作非文本引入方式。
- href 表示超文本引用（hypertext reference），在使用href请求外部资源时，会下载外部资源，同时当前网页读取外部资源的内容（引用），一般用作文本引入方式
注意：Link、a标签使用href，其余使用src。
九、表格标签
1、表格的基本结构
表格是以多行、多列来显示信息的方式。
完整表格的组成：
2、表格的基本属性
表格的标签组成：
（1）table标签：表格标签。
（2）caption标签：表格标题。
（3）thead标签：表头单元格容器。
（4）tbody标签：表体单元格容器。
（5）tfoot标签：表尾单元格容器。
（6）tr标签：表格中的行。
（7）th标签：表头中的单元格。
（8）td标签：表体或表尾单元格。
<table border="1" cellspacing="0" cellpading="10" width="50%">
<caption><h2>员工信息</h2></caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>职位</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>A001</td>
<td>小明</td>
<td>25</td>
<td>男</td>
<td>开发工程师</td>
</tr>
<tr>
<td>A002</td>
<td>小雷</td>
<td>26</td>
<td>男</td>
<td>开发工程师</td>
</tr>
<tr>
<td>A003</td>
<td>小红</td>
<td>27</td>
<td>女</td>
<td>销售人员</td>
</tr>
<tr>
<td>A004</td>
<td>康康</td>
<td>28</td>
<td>男</td>
<td>开发工程师</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td colspan="5"><strong>统计：共4人</strong></td>
</tr>
</tfoot>
</table>注意：在表格使用中，可以省略表头thead、tbody、tfoot的声明，此时浏览器将全部的行列都作为tbody的子元素。
表格table的私有属性说明：
（1）border(边框)属性：border=“number”。
（2）background(背景)属性： background =“背景图片”。
（3）bgcolor(背景颜色)属性：bgcolor = “颜色”。
（4）width、height属性：width= “300”height=“200”。
3、表格的合并
表格的合并包含行合并、列合并。
行合并：<td colspan="3">学生成绩</td>。
列合并：<td rowspan="2">张三</td>（要去掉下面对应的列）。
4、表格对齐方式
表格提供的对齐与填充属性：
（1）align:表格的文字水平位置，
元素的属性，可选值包括left、center、right。
（2）valign:表格内文字的垂直位置，元素的属性，valign可选值包括top、 middle、bottom。
（3） cellspacing(间距)属性:设置单元格之间的距离。
（4）cellpadding(填充)属性:设置单元格边框与内容之间的距离
十、html语义化
html语义化：在使用html编程时，根据内容选择合适的标签（代码语义化），增加可读性与SEO。
1、html语义化的优点
html语义化的优点：
- 为了在没有CSS的情况下也能呈现出很好地内容结构、代码结构。
- 提高用户体验。
- 有利于SEO。
- 方便其他设备渲染网页。
- 便于团队开发和维护。
2、HTML语义化的注意事项
html语义化的注意事项：
- Html编码时要保持父子标签之间一个Tab键的缩进。
- 每标签div和span。
- 在语义不明显时，既一个用于布局的div声明前后都有注释。
- 尽可能少的使用无语义的可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利。
- 不要使用纯样式标签，如：b、font、u等，改用css设置。
- 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式），strong默认样式是加粗（不要用b），em是斜体（不用i）。
- 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td。
- 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someld来让说明文本和相对应的input关联起来。
十一、表单标签
表单标签的基本作用：封装客户端输入的数据，并通过设定以指定的模式将数据提交给服务器端。
1、主要标签
form标签：表单标签的父容器，用于设定内部表单标签数据提交地址与提交方式。
输入类型标签：包含多种类型的输入标签，用户通过输入类型标签输入数据。
提交或重置标签。
2、标签私有属性
form标签私有属性说明：
（1）action属性:设定处理表单数据提交的服务器url地址。
（2）method属性:设定数据传送到服务器的方式，常用的取值。
（3）get请求:声明本次请求的目的是从服务器获取数据。
（4）post请求：声明本次请求的目的是向服务器传送数据。
（5）target属性:规定在何处打开 action URL。
（6）enctype属性：规定在发送到服务器之前应该如何对表单数据进行编码。3、method属性为get或post的区别
- 目的不同。
- 提交方式不同（一个在响应头，一个在响应体）。
- 提交数据长度不同：get：不超过255个字符，post：默认为不受限制。
- 安全性： get信息显示在浏览器地址栏，安全性低。post：作为请求的消息体， 不可见。安全性高。
- 提交数据缓存：get：缓存在浏览器URL历史状态中。 post：不会被浏览器缓存。
4、常用的表单标签
常用的表单标签：
（1）input：输入类型标签，根据type输入不同展现的输入标签类型不同。
（2）textarea：文本域。
（3）label：标签的文字描述标签。
（4）select/option:下拉框标签。
（5）fieldset： form表单内的部分表单元素的子集合。
（6）legend元素:子集合标题。
（7）button：按钮标签。
5、表单标签的通用属性
表单标签的通用属性：除具备标签属性之外还具备如下通用属性，同时每个表单标签还有私有属性。
• name：规定表单标签的名称，在提交数据时，以name属性作为检索值。
• disabled:规定禁用当前表单元素。
• readonly：规定表当前表单元素为只读元素。
• value：设定或获取当前表单元素的输入值。readonly和disabled的区别：
• readonly只针对input(text / password)和textarea有效。
• disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
6、input标签
input标签：输入类型标签，根据type输入不同展现的输入标签类型不同。
• text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
• password：定义密码字段。该字段中的字符被掩码。
• radio：定义单选按钮。Name属性相同的radio只能有一个被选中。可以使用checked属性设定radio的默认选中。
• checkbox:定义复选框。
• file：文件输入。
• button：表单中的普通按钮，按钮内容为文字，点击后没有默认行为。
• image：表单中的普通按钮，显示内容为图片，点击后没有默认行为。
• submit：表单中的提交按钮，点击自动将表单内容提交给服务器，可以使用js阻止提交。
• reset：重置表单内容，点击后表单内所有输入元素的值将被重置为网页加载前的状态。注意：由于input在定义按钮时无法同时显示文字和图片，建议使用button标签定义按钮
<button type=“submit/reset/button”>
按钮的文字 <img src = “1.jpg”/>
<button>
7、下拉框
下拉框：使用select、option标签共同完成下拉框的显示。
7.1、select标签
select标签：下拉框容器。
私有属性说明
multiple：规定可选择多个选项。
size：规定可见下拉框选项的数量。
7.2、option标签
option标签：下拉框选项组件。
私有属性说明
selected：规定下拉列表中被选项目的索引号。
<select name="country">
<option selected disabled>请选择地点</option>
<option value="China">中国</option>
<option value="Japan">日本</option>
</select>
8、fieldset标签
fieldset标签：form表单内的部分表单元素的子集合，浏览器对子集合提供默认样式渲染。
legend标签：子集合标题。
<form action="body.html" method="get">
<fieldset>
<legend>登录</legend>
用户名：<input type="text" name="username" placeholder="请输入用户名"/><br>
密码：<input type="password" name="password" placeholder="请输入密码" /><br>
<input type="submit" value="登录" />
<input type="reset" value="重置" />
<button type="submit">登录</button>
</fieldset>
</form>
9、textarea标签
textarea标签：设定多行的文本输入控件。
特殊属性说明
cols:规定文本区内的可见宽度。
rows:规定文本区内的可见行数。
<textarea name="textarea" rows="3" cols="10">
第一行每行10字
第二行每行10字
第三行每行10字
</textarea>
10、label标签
label标签：输入标签的文字描述标签，可以代替输入标签响应用户的操作。
特殊属性说明
for:输入标签的id属性值。
<label for="lab">标签：</label>
<input type="button" id = "lab" value="按钮"/>
