WEB学习基础--HTML

BIUBIU · 发表于 2024-3-16 08:42

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>框架标签比较复杂，暂定两周后处理。

王尼玛 · 发表于 2024-3-16 08:42

666666666666

ggb · 发表于 2024-3-17 00:23

666666

		自动登录	找回密码
密码			注册[Register]

[web] WEB学习基础--HTML