速通HTML-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44147762/article/details/131019872

HTML5是描述网页的语言，包括基本结构如<head>和<body>，常用标签如<h1>标题</h1>，<p>段落</p>，以及图像<img>标签，超链接<a>，表格<table>和表单<form>等。此外，还涉及路径，属性，注释，特殊字符以及列表<ul>，<ol>和<dl>的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5基础

HTML超文本标记语言，用于描述网页的语言。

创建简单网页： .txt文档更改后缀.html

HTML语法规范

标签 :并列关系和包含(父子)关系

分类：单标签和双标签

基本结构标签

<html>//根标签
    <head>//文档头部
        <title>Document</title> //网页名称
    </head>
    <body>
    //文档主体
    </body>
</html>

HTML常用标签

语义标签：

标题标签：<h1></h1>共6级其表达的重要性依次递减

段落标签：<p></p>

斜体：<em></em>或<i></i>

加粗：<strong></strong>或<b></b>

删除线：<del></del>或<s></s>

下划线：<ins></ins>或<u></u>

前者语义更为强烈！

换行：

分割线：<hr>

没有语义是一个盒子

<div></div>分割分区大盒子独占一行

<span></span>跨度跨区小盒子可在一行并列

图像标签

属性：src 图片路径必须属性

alt 替换文本图象不能显示的文字

title 提示文本鼠标移至图像显示的文字

weidth heigth border 单位px 设置图像高度宽度，边框粗细

路径：

相对路径：以引用文件所在的位置做参考，而建立出的目录路径。(图片相对于HTML页面的距离)

同级下一级文件夹名 / 上一级 .. /

绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径("E:\资料"或网址) 使用较少

超链接标签

语法格式：<a href="跳转目标" target="目标窗口弹出方式"></a>

herf为必须属性

target : _self为默认值当前页面打开

_blank为在新窗口中打开方式

外部链接：完整的网站链接

内部链接：网站内部页面之间相互链接；只写名称即可

空连接：#

下载链接：地址链接的是文件 .exe或者是zip等压缩包形式

网页元素链接：给图片等加超链接

锚点链接：快速定位至页面某一位置 [链接中 href="#名字1"] [目标位置 id=“名字1”]

注释标签

注释： vscode快捷键 CTRL+/

特殊字符

空格：  版权：©

小于号：< 注册商标：®

大于号：> 摄氏度：°

和号：& 正负号：&plusm;

人民币：&yen 平方：²

表格标签

语法：

<table>
<!--定义表格标签-->
    <tr>
        <th>表头</th>
        <!--表头单元格 文字居中加粗显示-->
    </tr>
    <tr>
    <!--表格中的行-->
        <td>单元格内的文字</td>
        <!--表格中的单元格 需嵌套在<tr>中使用-->
        ...
    </tr>
    ...
</table>

属性：

align :left right center 表格相对于周围元素的对齐方式

border：1或“ ” 表格边框的设置 1表示有，“ ”为默认表示无边框

cellpadding ：像素px 单元边缘与其内容之间的空白（距离）默认1px

cellspacing：像素px 单元格之间的空白默认2px

width：像素px或百分比% 表格的宽度

height: 像素px或百分比% 表格的高度

合并单元格：

方式：跨行合并：rowspan="合并的单元格个数" 最上侧单元格为目标单元格，写合并代码

跨列合并：colspan="合并的单元格个数" 最左侧单元格为目标单元格，写合并代码

最后删除多余单元格

列表标签

<ul>
<!--无序列表  其下只能有<li>标签-->
    <li></li>
    <!--可以添加很多类型元素-->
    ......
    <li></li>
</ul>

<ol>
<!--有序列表  有顺序其下只能有<li>标签-->
    <li></li>
    ......
    <li></li>
</ol>

<dl>
    <!--自定义列表-->
    <dt>名词1</dt>
    <dd>名词1解释</dd>
    ...
    <dd>名词1解释</dd>
</dl>

表单标签

收集信息完整表单：表单域、表单控件和提示信息

from会把它范围内的表单信息提交给服务器

<from action="url地址" method="提交方式" name="表单域名称">
    各种元素控件
</from>

表单控件

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式。
name	名称	用于指定表单名称，以区分同一个页面中多个表单域

input输入表单元素 type属性输入字段有很多形式（文本字段、复选框、掩码后的文本控件[密码框]、单选按钮、按钮）

<input type="属性值"/>

<input/>为单标签

type属性值：

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
colorNew	定义拾色器。
dateNew	定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
monthNew	定义 month 和 year 控件（不带时区）。
numberNew	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
rangeNew	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
searchNew	定义用于输入搜索字符串的文本字段。清除表单中的所有数据。
submit	定义提交按钮。将表单数据发送至服务器。
telNew	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew	定义用于输入时间的控件（不带时区）。
urlNew	定义用于输入 URL 的字段。
weekNew	定义 week 和 year 控件（不带时区）。

input其他属性：

属性	属性值	描述
name	用户自定义	定义input元素名称
value	用户自定义	规定input元素的值提示语
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段的最大长度

单选按钮和复选框要有相同的name值

<label>标签

此标签为input元素定义标注（标签）。

用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

for属性和id属性的属性值相等。

select下拉表单元素

<from>
    <select>
        <option select="selected">选项</option>
        ......
    </select>
</from>

textarea文本域元素

<textarea rows="行数" cols="每行字符数">
    文本内容
</textarea>