第一章 常用标签及其中的属性
1.<meta>标签
在 HTML 中用于提供有关页面的元数据，元数据是描述数据的数据，通常用于指定页面的描述、关键词、作者、视口设置以及其他信息。<meta> 标签一般放置在 HTML 文档的 <head> 部分。
<meta name="viewport" content="width=device-width, initial-scale=1.0">-
name="viewport"表示这个<meta>标签用于定义页面的视口（viewport）属性。 -
content属性,可以指定页面在不同设备上的初始缩放比例、最大/最小缩放比例,以及是否允许用户缩放等。
注：浏览器将视口的宽度设置为设备的宽度;设置页面首次加载时的初始缩放级别为1:1
2.<img>标签
<img> 标签用于在 HTML 页面中嵌入图像。它是一个自闭合标签，这意味着它没有结束标签。
<img src="./images/1.jpg" alt="美女图片" title="美女图片" >-
alt属性：提供图像的替代文本。当图像无法加载或用户使用屏幕阅读器时，会显示此文本（可以帮助视障人群）。
-
title属性：提供图像的额外信息。当用户将鼠标悬停在图像上时，会显示此文本作为工具提示。
-
width和height属性：设置图像的显示宽度和高度（以像素为单位）。如果只设置了一个属性，浏览器会按比例调整另一个属性。 -
border属性：设置元素的边框。它可以为元素添加边框并定义边框的宽度、样式和颜色。
border属性可以在内联样式、内部样式表或外部样式表中使用。
.border-example {
border: 2px solid black;
/*
2px：边框的宽度。2px 表示边框的宽度为 2 像素。
solid：边框的样式。solid 表示边框是实线的。其他可能的样式包括 dotted（点线）、dashed（虚线）、double（双线）等。
black：边框的颜色。black 表示边框的颜色是黑色。你可以使用颜色名称（如 red、blue）、十六进制颜色值（如 #000000）、RGB 颜色值（如 rgb(0, 0, 0)）或 RGBA 颜色值（如 rgba(0, 0, 0, 1)）来指定颜色。
*/
border-radius: 10px;/*设置元素的圆角边框。10px表示圆角的半径为10像素，意味着边框的角会被平滑地弯曲，形成半径为10像素的圆角*/
padding: 10px; /* 添加内边距，使内容与边框有一定距离 */
margin: 20px; /* 添加外边距，使元素之间有间距 */
}-
<a>标签
<a href="https://www.taobao.com/" title="淘宝链接" target="_blank">淘宝</a>-
href属性：链接跳转地址
-
target：表示链接的打开方式
-
_blank 新窗口
-
_parent 父窗口
-
_self 本窗口（默认）
-
_top 顶级窗口
-
framename 窗口名
-
-
title：文字提示属性（详情）
锚点链接(注意跳转时的符号是‘#’)：
-
定义一个锚点：
<a id="图片3"></a> -
使用锚点：
-
同一页面跳转锚点
<a href="#图片3">美女3</a> -
其他页面跳转锚点
<a href="test_2.html#图片3" target="_blank">第二页面的美女</a>
-
第二章 表格标签
-
<table>标签：定义一个表格。所有其他与表格相关的标签都必须嵌套在这个标签内。
<table border="1" cellpadding="5" cellspacing="0" width="100%" height="200" align="center" bgcolor="#EFEFEF"> <!-- 表格内容 --> </table>
-
border属性：定义表格边框的大小，可以设置为一个正整数来指定边框的宽度，或者设置为 0（默认值）来隐藏边框。 -
cellpadding属性：定义单元格内边距的大小，可以设置为一个正整数来指定单元格内边距的宽度。 -
cellspacing属性：定义单元格之间的间距大小，可以设置为一个正整数来指定单元格之间的间距。 -
width属性：定义表格的宽度，可以设置为一个正整数或百分比值来指定表格的宽度。 -
height属性：定义表格的高度，可以设置为一个正整数或百分比值来指定表格的高度。 -
align属性：定义表格相对于周围内容的对齐方式，可以设置为 "left"（左对齐）、"center"（居中对齐）或 "right"（右对齐）。 -
bgcolor属性：定义表格的背景颜色，可以设置为颜色名称或十六进制值来指定背景颜色。
-
<caption>标签：
用于定义表格的标题。
-
align属性：定义标题的对齐方式，可以设置为 "top"（顶部对齐）、"bottom"（底部对齐）或 "center"（居中对齐）。 -
<tr>标签：
定义表格中的一行（不能在其中直接定义属性）。
-
<th>标签：定义表格中的一个表头单元格。它通常用于表头行，必须嵌套在
<tr>标签内。表头单元格通常会默认加粗并居中显示。<thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> </thead> -
<td>标签：定义表格中的一个单元格（数据单元）。它必须嵌套在
<tr>标签内。<tr> <td>1001</td> <td>张三</td> <td>20</td> <td rowspan="2" align="center" valign="middle">t201班</td> </tr>-
colspan：指定单元格横向跨越的列数(合并单元格)。 -
rowspan：指定单元格纵向跨越的行数（合并单元格）。 -
align：定义单元格内容的水平对齐方式，可以设置为 "left"、"center"、"right"、"justify" 或 "char"。 -
valign：定义单元格内容的垂直对齐方式，可以设置为 "top"、"middle"、"bottom" 或 "baseline"。 -
width：定义单元格的宽度，可以使用像素值或百分比。 -
height：定义单元格的高度，可以使用像素值或百分比。 -
class：指定一个或多个类名，用于为单元格定义一个或多个样式类。 -
style：直接在单元格中使用内联样式来定义样式属性。
-
-
<thead>标签：定义表格的页眉部分。它包含表头行（通常由
<th>标签组成），有助于表格数据的分组和分节。<thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> </thead> -
<tbody>：定义表格的主体部分。它包含数据行（通常由<td>标签组成）。 -
<tfoot>：定义表格的页脚部分。它通常包含总结行或计算行。
第三章 表单标签
-
<form>表单标签：定义一个表单。所有表单控件都必须嵌套在这个标签内。
-
action：表单数据提交的目标URL。
-
method：数据提交的HTTP方法，如GET或者POST。
-
GET：数据会附加在URL后面，以
?key1=value1&key2=value2的形式出现。不适合传输敏感数据（如密码）。适合传输少量数据。 -
POST：通过请求体传递数据，数据不会暴露在 URL 中，而是封装在请求体中传输。适合传输一些敏感数据。适合传输较大的数据量。
-
-
-
<input>标签：定义多种类型的输入控件，根据其
type属性的不同，可以创建文本框、密码框、复选框、单选按钮等。<!-- 文本输入框 --> <input type="text" name="username"> <!-- 密码输入框 --> <input type="password" name="password"> <!-- 复选框 --> <input type="checkbox" name="subscribe" value="newsletter"> <!-- 单选按钮 --> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 <!-- 提交按钮 --> <input type="submit" value="提交">-
disabled：禁用输入框，用户无法在其中输入或编辑文本。 -
maxlength="8"：限制用户输入的字符数不超过 8 个字符。姓名：<input type="text" disabled name="uname" maxlength="8" size="10" value="lisa"> -
checked：表示这个单选按钮默认是选中状态。<input type="radio" checked name="sex" value="1">女 -
readonly：设置了输入框为只读模式，用户无法编辑其中的内容。网址：<input type="url" value="http://www/baidu.com" readonly name="pic"/>
-
-
<textarea>文本域：定义多行文本输入控件。它不使用type属性，而是通过标签包围文本内容。<textarea name="message" rows="4" cols="50">请输入您的留言</textarea> -
<select>下拉列表：定义下拉选择列表。它包含多个<option>子标签，每个<option>标签定义一个选项。<select name="country"> <option value="china">中国</option> <option value="usa">美国</option> <option value="uk">英国</option> </select> -
<optgroup>：在每个<optgroup>元素内部，可以包含多个<option>元素，代表每个分组中的具体选项。<optgroup label="河南省"> <option>郑州</option> <option>安阳</option> <option>周口</option> </optgroup> -
<option>：定义下拉列表中的一个选项。它必须嵌套在<select>标签内。-
selected：这个属性表示这个选项默认是被选中的状态，在下拉列表初始加载时会显示这个选项为默认选中状态。<option value="2" selected>本科</option>
-
-
<search>：创建了一个搜索框，在用户输入搜索关键词时，浏览器会显示与数据列表中的选项匹配的内容，以供用户选择或补全。搜索： <input type="search" list="namelist" name="keywords"/> <datalist id="namelist"> <option value="zhangsan"></option> <option value="lusi"></option> <option value="wangwu"></option> <option value="zhaoliu"></option> <option value="lisa"></option> </datalist> -
<button>：定义一个可点击按钮。可以包含文本或其他 HTML 元素。<button type="submit">提交</button> <button type="button" onclick="alert('按钮被点击')">点击我</button>-
onclick：设置触发点击事件。
-
-
<fieldset>：用于对表单中的控件进行分组。将一组相关的表单元素组织在一起，使其在视觉上形成一个逻辑单元，有助于用户理解这些表单元素之间的关联性。它通常与
<legend>标签一起使用。<fieldset> <legend>个人信息</legend> <label for="firstname">名:</label> <input type="text" id="firstname" name="firstname"> <br> <label for="lastname">姓:</label> <input type="text" id="lastname" name="lastname"> </fieldset> -
<legend>：为<fieldset>元素定义标题。 -
<datalist>元素用于提供输入字段（如<input>元素）的预定义选项列表。当用户在输入框中输入内容时，浏览器会显示与输入内容匹配的选项。<label for="browsers">选择浏览器:</label> <input list="browsers" id="browser" name="browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> <option value="Opera"> </datalist>
-
其他常用：
-
单选按钮：
**<input type="radio">** -
复选框：
**<input type="checkbox">** -
提交按钮：
**<input type="submit">** -
范围输入框：
**<input type="range">**
-
5203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
