WEB学习基础--HTML
WEB学习基础--HTML（初学WEB，若有不对请指正）
HTML标签
<br>
实现语句换行。
hello<br>
world
代码注释:
第一行实现换行。
<meta>
定义关于 HTML 文档的元数据。元数据是关于数据的数据。（针对搜索引擎和更新频率的描述和关键词）始终位于<head>内。浏览器、搜索引擎（关键词）和其他网络服务会用到元数据。
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML教程">
<meta name="keywords" content="HTML">
<meta http-equiv="refresh" content="30">
<meta name="author" content="zhangsan">
</head>
代码注释：
第二行采用 UTF-8 字符编码。
第三行定义网页描述。
第四行使用 http-equiv 属性和 content 属性，每 30 秒刷新一次文档。第五行定义页面作者。
属性解析：
charset：字符集 规定HTML文档的字符编码。
content：文本 规定与http-equiv或name属性关联的值。
http-equiv：content-security-policy content-type default-style refresh 为content属性信息值提供HTTP标头。
name：application-name author description generator keywords viewport 规定元数据的名称。
<link>
定义当前文档与外部资源之间的关系。最常用于链接到外部样式表或向网站添加图标。
<head>
<link rel="stylesheet" href="styles.css">
</head>
代码注释：
将外部的样式表“styles.css”应用到当前的HTML文档中。
属性解析：
href：URL规定被链接文档的位置。
rel：author preload stylesheet。 必需。规定当前文档和被链接文档之间的关系。
<!--注释标签，不会在浏览器显示-->
<a></a>
实现页面间的跳转。
<a href="URL" target="_self">MyURL</a>
<a name="top"></a>
<a href="#top">返回顶部</a>
代码注释：
第一行代码实现页面在当前窗口中打开目的链接。
第二行代码创建一个锚点，其名称为 "top"。
第三行代码创建一个链接，跳转到指定名称的锚点位置。在此示例中，链接指向名称为 "top" 的锚点。
属性解析：
href="URL" 指定了链接的目标 URL
_blank: 在新窗口或新标签页中打开链接。
_self: 在当前窗口中打开链接（默认行为）
<del></del>
给文字增添删除线。
<del>删除线</del>
代码注释：
将标签内的文字增添删除线
<font></font>html5起不支持font标签
设置文字样式。
<font size="10">字体大小</font>
<font color="blue">字体颜色</font>
代码注释：
第一行代码设置字体大小。第二行代码设置字体颜色。
属性解析：
size:设置字体大小
color:设置字体颜色在html5以后，字体所有属性的设置都通过css设置
<form></form>
实现表单。
<form method="get" enctype="application/x-www-form-urlencoded" action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" size="30" maxlength="10" value="请输入账号" id="fname" name="fname" readonly><br><br>
<label for="lname">Last name:</label>
<input type="password" size="30" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<form method="post" action="" enctype="application/x-www-form-urlencoded">
<input type="file" name="file">
<input type="submit" value="Submit">
</form>
<fieldset>
<legend>个人信息</legend>
<form method="post" enctype="application/x-www-form-urlencoded">
用户名<input type="text" name="username" /><br>
性别<input type="radio" name="sex" value="1" checked="checked" />男<input type="radio" name="sex" value="2" />女<br>
喜欢语言<input type="checkbox" name="app[]" value="asp">asp<input type="checkbox" name="app[]" value="aspx">aspx<input type="checkbox" name="app[]" value="php" checked="checked">php
地区<select name="address">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="guangzhou">广州</option>
</select><br>
简介<br>
<textarea cols="30" rows="10" name="info"></textarea><br>
<input type="submit" value="提交" />
</form>
</fieldset>
代码注释：
第一行代码指定了使用 GET 方法提交表单。
第二行、第四行代码创建表单标签，与相应的输入字段相关联。for属性应与相应输入字段的id属性相匹配，以确保点击标签时会聚焦到相应的输入字段。
第三行代码创建一个文本输入框。
第五行代码创建一个密码输入框。
第六行代码创建一个提交按钮。
第七行代码创建重置按钮。这个按钮允许用户在填写表单后将表单字段重置为它们的初始值。
第九行代码指定了使用 POST 方法提交表单。
第十行代码创建一个文件选择输入框。
第十五行代码与第三十行代码用于将相关的表单元素组合在一起，并为它们创建一个容器。
第十六行代码定义 fieldset 的标题。
第十九行代码定义一个单选框。
第二十行代码定义一个复选框。
第二十一行至第二十五行代码定义一个下拉菜单。
第二十七行代码定义一个文本区域。
属性解析：
method="get" 指定表单提交时使用的 HTTP 方法，可以是 "get" 或 "post"
enctype="application/x-www-form-urlencoded" 指定表单数据的编码类型
action="/action_page.php" 指定表单数据提交到的目标 URL 若action=" "则目标地址为当前页面
type="text" 输入框类型为文本
type="password" 输入框类型为密码
type="submit" 按钮类型为提交
type="reset" 按钮类型为重置
type="file" 输入框类型为文件
type="radio" 单选框
type="checkbox" 复选框
checked="checked" 默认勾选
value="Submit" 按钮上显示的文本为 "Submit"
size="30" 输入框的显示宽度为 30 个字符
maxlength="10" 最大输入字符数限制为 10 个字符
value="请输入账号" 输入框的默认值为 "请输入账号"
id="fname" 输入框的唯一标识符为 "
fname"name="fname" 输入框的名称为 "fname"，用于在提交表单时标识该字段
readonly 输入框为只读，用户不能在页面上直接编辑文本
<select> 下拉列表
<option> 定义下拉框中的选项
<i></i>
实现字体倾斜。
<i>倾斜</i>
代码注释：
将标签内的字体进行倾斜处理
<img>
实现插入图像的HTML标签示例。
<img src="储存路径" width="20" height="20"/>
代码注释：插入图像。
属性解析：
src：指定图像的路径，这里需要替换为实际的图像储存路径。
width：指定图像的宽度，这里设置为 20 像素。
height：指定图像的高度，这里设置为 20 像素。
<ol></ol>
实现一个有序列表。
<ol type="I">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ol>
代码注释：实现一个列表。
属性解析：
type="I" 使用大写罗马数字作为列表项的标志。
<li> 标签定义。
<sub></sub>
将文字以下标的形式呈现。
<p>This text contains <sub style="color: green;">superscript</sub> text.</p>
代码注释：
将标签内的文字以下标的形式呈现并改变其颜色。
<sup></sup>
将文字以上标的形式呈现。
<p>This text contains <sup style="color: green;">superscript</sup> text.</p>
代码注释：
将标签内的文字以上标的形式呈现并改变其颜色。
<script></script>
用于嵌入脚本。<script>元素要么包含脚本语句，要么通过 src 属性 指向外部脚本文件。
<script src="simple.js"></script>
代码注释：
载入外部脚本库。
属性解析：
src：URL 规定外部脚本文件的 URL。
<strong></strong> /<b></b>
实现字体加粗。
<strong>加粗</strong>
<b>加粗</b>
代码注释：
将标签内部的文字进行加粗处理。
<table></table>
实现一个表格。
<table border="1" cellpadding="10" cellspacing="5">
<tr><th>#</th><th>name</th><th>age</th></tr>
<tr><td>1</td><td>zhangsan</td><td rowspan="2">12</td></tr>
<tr><td>2</td><td>lisi</td></tr>
<tr><td>all</td><td colspan="2">2人</td></tr>
</table>
代码注释：
第一行代码实现一个表单。
第二行代码实现一个表头行。
第三行代码实现数据行。
属性解析：
border="1"： 指定表格边框为1个像素宽。
cellpadding="10"： 设置单元格内边距为10像素。
cellspacing="5"： 设置单元格之间的间距为5像素。
<tr>： 定义表格的行。
<th>： 定义表格的表头单元格。
<td>： 定义表格的数据单元格。
<td rowspan="2">12</td> 在当前行开始起向下合并两行单元格，设定值为12。
<td colspan="2">2人</td> 在当前列开始向右合并两行单元格，设定值为2人。
<u></u>
给文字下方增添下划线。
<u>下划线</u>
代码注释：
给标签内的文字增添下划线。
<ul></ul>
实现一个无序列表。
<ul type="disc">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
代码注释：
实现一个列表。
属性解析：
type="disc" 使用实心圆点作为列表项的标志。
<li> 标签定义。
<frame>框架标签比较复杂，暂定两周后处理。
666666666666 666666
页:
[1]