前端 - HTML基础知识

HTML文档参考

HTML简介

网页

网页简介

网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页是htm.或html文件。

HTML概念

HTML指的是超文本标记语言(Hyper Text Markup Language)，不是编程语言，而是标记语言(markup language)，有一套标记标签(markup tag)。

超文本指的是：

超越文本限制，可以加入图片、声音、动画等内容。
它可以从一个文件跳转到另一个文件(超链接)。

网页的形成

网页由网页元素组成，这些元素利用html标签描述，通过浏览器解析来展示给用户。

前端代码 => 浏览器解析、渲染 => 生成web界面。

浏览器

浏览器	内核
IE	Trident
Firefox	Gecko
Safari	Webkit
Chrome	Blink

Web标准

Web标准由W3C(万维网联盟)组织和其他标准化组织制定的一系列标准集合。

标准	说明
结构(Structure)	结构用于对网页元素进行整理分类，主要指HTML
表现(Presentation)	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为(Behavior)	行为是指网页模型的定义以及交互的编写，主要指JavaScript

HTML标签概述

HTML语法规范

基本语法概述

HTML标签是由尖括号包围的关键字，例如<html>。
HTML标签通常是成对出现的，称为双标签，例如<html></html>。
有些特殊的标签是单个标签，称为单标签，例如<br />。

标签关系

包含关系：

<head>
    <title> </title>
</head>

并列关系：

<head> </head>
<body> </body>

HTML基本结构标签

每个网页都有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上写的。

标签名	定义	说明
`<html></html>`	根标签	页面中最大的标签
`<head></head>`	文档的头部	在`head`标签中必须要设置`title`标签
`<title></title>`	文档的标题	网页标题
`<body></body>`	文档的主体

第一个界面：

<html>
    <head>
        <title> Hello world! </title>
    </head>
    <body>
        第一个HTML界面。
    </body>
</html>

VSCode自动生成骨架标签

在VSCode中使用!自动生成骨架标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

文档类型声明标签

上面代码中的<!DOCTYPE html>用来声明文档类型为HTML5，即告诉浏览器用哪种版本的HTML来显示网页。

注意：

<!DOCTYPE>声明在文档第一行，位于<html>标签之前。
<!DOCTYPE>是文档类型声明标签，不是一个HTML标签。

语言种类

标签<html lang="en">用来定义网页语言种类，en表示英文，zh-CN表示中文。

字符集

标签<meta charset="UTF-8">用来定义编码方式。

HTML常用标签

标题标签

HTML提供了<h1>～<h6>共6个等级的标题标签，有以下特点：

加了标题标签的文字字号变大，且会被加粗。
一个标题独占一行。

<body>
    <h1> 一级标题 </h1>
    <h2> 二级标题 </h2>
    <h3> 三级标题 </h3>
</body>

段落标签与换行标签

段落标签将网页分为若干个段落，段落与段落之间有空隙。

<p> 第一段内容。。。 </p>

使用换行标签进行强制换行，不会像段落一样中间有空隙。

<p>  第二段内容。。。。。<br /> 强制换行 </p>
<p>  第三段内容。。。。。</p>

上面的显示效果如下：

第一段内容。。。

第二段内容。。。。。
强制换行

第三段内容。。。。。

文本格式化标签

主要有粗体、斜体、~~删除线~~、下划线等标签，如表所示(实际使用更推荐用前面的标签，语义更清晰)：

语义	标签
加粗	`<strong></strong>` 或者 `<b></b>`
倾斜	`<em></em>` 或者 `<i></i>`
删除线	`<del></del>` 或者 `<s></s>`
下划线	`<ins></ins>` 或者 `<u></u>`

div和span标签

<div>和<span>标签没有语义，是用来装内容的盒子，其中<div>标签独占一行，效果和<br />类似，而<span>标签一行上可以出现多个。

<div>123</div>
<div> 
    <span>45</span>
    <span>67</span>
</div>
<div>89</div>

效果如下：

123

45 67

图像标签

<img>标签用来定义HTML页面中的图像，需要在属性src中写出图像文件的路径和文件名，用法如下：

<img src="图像URL" />

<img>标签属性：

属性	属性值	说明
`src`	图片路径	必须写明
`alt`	文本	替换文本，图像不能正常显示后出现的文字
`title`	文本	提示文本，鼠标放在图片上会出现的文字
`width`	像素	设置图像的宽度
`height`	像素	设置图像的高度
`border`	像素	设置图像的边框粗细

注意点：

所有属性写在标签名之后。
属性不分先后顺序，标签名、属性之间以空格分开。
属性使用键值对的格式写，即key="value"。

超链接标签

用法：

<a href="链接目标" target="目标窗口弹出方式"> 文本或图像 </a>

属性	说明
`href`	指定链接目标的URL值
`target`	默认为`_self`，即当前窗口打开，`_blank`表示在新的空白标签页打开

注意：

各种元素都可以添加超链接。
空链接用"#"表示。
链接目标可以是：外部链接(baidu)、内部链接(html)、下载链接等。
使用锚点链接定位到页面中的某个位置：
- 链接：根据目标的id值跳转，<a href="#intro"> 公司介绍 </a>。
- 链接目标：设置id属性，<h2 id="intro"> 介绍内容 </h2>。

注释标签和特殊字符

注释

<!-- 这是一个注释 -->

特殊字符

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	与	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

HTML标签进阶

表格标签

基本结构

表格的基本结构表示为:

<table>
    <tr>
        <td> 1 </td>
    </tr>
    <tr>
        <td> 2 </td>
        <td> 3 </td>
    </tr>
</table>

<table> </table>标签用来定义表格。
<tr> </tr>标签用来定义表格中的行，嵌套在<table> </table>中。
<td> </td>标签用来定义表格中的单元格，嵌套在<tr> </tr>中。

表头单元格

一般表头单元格位于第一行/列，里面的文字是加粗居中显示的，表头单元格表示为<th> </th>。

<table>
    <tr>
        <th> 姓名 </th>
        <th> 学号 </th>
        <th> 班级 </th>
    </tr>
    <tr>
        <td> 123 </td>
        <td> 2016123456 </td>
        <td> 2001 </td>
    </tr>
</table>

效果如下：

姓名	学号	班级
123	2016123456	2001

表格属性

表格属性不常用，因为后续主要通过CSS设置表格样式。下面的属性都要写到表格标签内，即<table>内。

属性名	属性值	描述
align	left, center, right	表格对齐方式
border	1或""	表格单元是否有边框，默认为""，即没有边框
cellpadding	像素值	单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	单元格之间的空白，默认2像素
width	像素值或百分比	表格的宽度

表格结构标签

为了使表格有更好的语义，使用<thead> </thead>和<tbody> </tbody>标签将表格分割为表头和表数据两大部分。用法如下：

<table border="1" align="center" cellpadding="10" cellspacing="0">
    <thead> 
        <tr> <!-- thead标签内也必须有<tr> -->
            <th> 姓名 </th>
            <th> 学号 </th>
            <th> 班级 </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 123 </td>
            <td> 2016123456 </td>
            <td> 2001 </td>
        </tr>
        <tr>
            <td> 555 </td>
            <td> 2020123456789 </td>
            <td> 2002 </td>
        </tr>
    </tbody>
</table>

合并单元格

合并的属性需要写在目标单元格中：如果是跨行，目标单元格为最上侧单元格；如果是夸列，目标单元格为最左侧单元格。

跨行合并: rowspan="合并个数"
跨列合并: colspan="合并个数"

<table border="1" align="center" cellspacing="0">
    <thead>
        <tr>
            <th colspan="3"> 学生信息 </th>
        </tr>
        <tr>
            <th> 姓名 </th>
            <th> 学号 </th>
            <th> 班级 </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 123 </td>
            <td> 2016123456 </td>
            <td rowspan="2"> 2001 </td>
        </tr>
        <tr>
            <td> 555 </td>
            <td> 2020123456789 </td>
        </tr>
    </tbody>
</table>

效果如下：

学生信息
姓名	学号	班级
123	2016123456	2001
555	2020123456789	2001

列表标签

无序列表

<ul> </ul>中只能嵌套<li> </li>
<li> </li>中可以容纳所有元素
通常使用CSS设置列表的样式

<ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
</ul>

有序列表

<ol> </ol>中只能嵌套<li> </li>
<li> </li>中可以容纳所有元素
通常使用CSS设置列表的样式

<ol>
    <li> Java </li>
    <li> Python </li>
    <li> C++ </li>
</ol>

自定义列表

自定义列表经常用于对术语或名次进行解释与描述，定义列表的列表项前没有任何符号。

<dl> </dl>中只能包含<dt> </dt>标签和<dd> </dd>标签
<dt> </dt>标签和<dd> </dd>标签的个数没有限制，通常是一对多的关系

<dl>
    <dt> 关注我 </dt>  <!-- 名词 -->
    <dd> <a href="#"> 微博 </a> </dd>  <!-- 名词描述1 -->
    <dd> <a href="#"> B站 </a> </dd>  <!-- 名词描述2 -->
    <dd> <a href="#"> 微信公众号 </a> </dd>
    <dt> 服务支持 </dt>  <!-- 名词 -->
    <dd> <a href="#"> 客服电话 </a> </dd>
    <dd> <a href="#"> 在线客服 </a> </dd>
</dl>

效果如下：

关注我: 微博; B站; 微信公众号
服务支持: 客服电话; 在线客服

表单标签

表单用于收集用户信息。一个完整的表单通常由表单域、表单控件和提示信息组成。

表单域

表单域是一个包含表单元素的区域，在HTML标签中，<form> </form>用于定义表单域，以实现用户信息的收集和传递。<form> </form>会把它范围内的表单元素信息提交给服务器。

表单元素(控件)需要包含在表单域中。

基本结构如下:

<form action="url地址" method="提交方式" name="表单域名城">
    表单控件元素
</form>

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

表单控件

input输入表单元素

<input>标签为单标签
使用type属性来指定控件类型，具体如下：

属性值	描述
`button`	定义可点击按钮(多数情况下用过JS启动脚本)
`checkbox`	定义复选框
`file`	用于文件上传
`hidden`	定义隐藏的输入字段
`image`	定义图像形式的提交按钮
`passsword`	定义密码字段，该字段中的字符不可见
`radio`	定义单选按钮
`reset`	定义重置按钮，清空表单内的所有数据
`submit`	定义提交按钮
`text`	定义单行的文本输入字段，默认长度20个字符

<input>标签除了type属性外的其他常用属性如下表所示：
- name 和value主要给后台人员使用
- 单选和复选框应当有相同的name值
- checked主要用于单选和复选控件

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

<form action="url">
    <p> 用户名：<input type="text" name="username" value="请输入用户名" maxlength="10"> </p>
    <p> 密码：<input type="password" name="pwd"> </p>
    <p> 性别：男 <input type="radio" name="sex" value="male" checked> 女 <input type="radio" name="sex" value="female"/>  </p>
    <p> 
        <dl>
            <dt> 爱好： </dt>
            <dd> <input type="checkbox" name="hobby" value="basketball"> 篮球 </dd>
            <dd> <input type="checkbox" name="hobby" value="football"> 足球 </dd>
            <dd> <input type="checkbox" name="hobby" value="pingpong"> 乒乓球 </dd>
        </dl>
    </p>
    <p> <input type="submit" value="登录"> </p>
    <p> <input type="reset" value="重新填写"> </p>
</form>

效果如下：

submit点击之后，会上传到form标签中的url中，形式类似：url?username=123&pwd=123123123&sex=male&hobby=basketball&hobby=football&hobby=pingpong

input标签与label标签

<label> </label>标签使用for属性和表单元素绑定，当点击<label>标签对应的文本时，就会聚焦到绑定的表单元素。

<label>标签的for属性的值与<input>标签的id属性相同。

将上面的代码修改如下，此时点击文字“男”或“女”即可选中对应的控件。

<label for="sex-male"> 男 </label> <input type="radio" id="sex-male" name="sex" value="male" checked> 
<label for="sex-female"> 女 </label> <input type="radio" id="sex-female" name="sex" value="female"/>

select表单元素

<form>
	<select name="province">
        <option value="shanghai">上海</option>
        <option value="henan">河南</option>
        <option value="shandong">山东</option>
    </select>
</form>

textarea文本域表单元素

当用户输入内容较多的情况下，使用<textarea> </textarea>标签来处理多行文本的输入。

cols和rows属性定义文字的列数和行数，实际开发中不使用，而是用CSS改变大小

posted @ 2021-11-25 16:07 lv6laserlotus 阅读(137) 评论(0) 收藏举报

刷新页面返回顶部

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	与	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	与	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`

特殊字符	描述	代码
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	与	`&`
¥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方	`²`
³	立方	`³`