HTML语法规范

一株禾

于 2021-11-10 20:51:12 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： html css css3

本文链接：https://blog.csdn.net/chuhe163/article/details/121196075

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1、基本语法概述
2、标签关系
3、HTML基本结构标签
4、文档类型声明标签
5、lang语言种类
6、字符集
7、HTML常用标签
8、标签属性的注意点
9、表格标签
10、列表标签
11、表单标签

1、基本语法概述

双标签： 如: <html></html>
单标签： 如：<br />

2、标签关系

包含关系

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

并列关系

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

3、HTML基本结构标签

<!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>
    Hello world!
</body>
</html>

4、文档类型声明标签<!DOCTYPE>

<!DOCTYPE>声明位于文档中最前面位置，处于<html>标签之前。
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

<!DOCTYPE html> 当前页面采取HTML5版本来显示网页

5、lang语言种类

用来定义当前文档显示的语言

en定义语言为英语
zh-CN定义语言为中文
这个属性主要提供给浏览器和搜索引擎使用

6、字符集

必须写不能省略，不写有可能产生乱码。
UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

<meta charset="UTF-8">

7、HTML常用标签

7.1、标题标签

HTML提供了6个等级的网页标题
即<h1>~~<h6>
head的缩写即为h
独占一行

<h1>一级标题</h1>

7.2、段落标签

paragraph的缩写，意为段落
用于定义段落。
文本在一个段落中会根据浏览器窗口大小自动换行
段落之间保有空隙

<p>定义段落</p>

7.3、换行标签

强制换行
单标签
换行不会有较大空隙
break的缩写

锄禾日当午，<br />汗滴河下土。

7.4、文本格式化标签

语义	标签	说明
加粗	`<strong></strong>`或`<b></b>`	使用`<strong>`标签，语义更加强烈
倾斜	`<em></em>`或`<i></i>`
删除线	`<del></del>`或`<s></s>`
下划线	`<ins></ins>`或`<u></u>`

7.5、div标签

div是division的缩写，意为分割、分区
div标签用来布局
独占一行
div与div之间没有空隙

<div>我是div标签</div>

7.6、span标签

span意为跨度、跨距
span用来布局，一行可以放多个
不独占一行

<span>百度</span><span>谷歌</span>

7.7、图像标签

定义HTML页面中的图像

<img src="./锄禾 .jpg"  alt="锄禾" title="锄禾日当午" width="500" height="100" border="15" \>

src是标签的属性，用于指定图文件的路径
src必须写

属性	属性值	说明
src	图片路径	设置图片路径,src属性必须写
alt	文本	替换文本。图像不展示时显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	单位为像素	设置图像的宽度，width和height只设置一个可以使图像等比例缩放
height	单位为像素	设置图像的高度，width和height只设置一个可以使图像等比例缩放
border	单位为像素	设置图像的边框粗细

7.8、超链接标签

7.8.1、超链接的语法格式

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

单词anchor的缩写，意为：锚

属性	作用
href	指定链接目标的URL地址 href属性必须写
target	指定链接页面的打开方式 _self为默认值 _blank为在新窗口中打开

7.8.2、超链接的分类

7.8.2.1、外部链接

<a href="https://www.google.com" target="_bland">谷歌</a>

7.8.2.2、内部链接

<a href="锄禾.html" target="_bland">锄禾</a>

7.8.2.3、空链接

未确定链接目标时，可以使用空链接。

<a href="#" target="_bland">锄禾</a>

7.8.2.4、下载链接

href里面的地址是一个文件或压缩包，会下载这个文件。

<a href="#" target="_bland">锄禾</a>

7.8.2.5、网页元素链接

网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

<a href="#" target="_bland">
	<img src="./锄禾 .jpg" \>
</a>

7.8.2.6、锚点链接

点击链接，快速定位到页面中的某个位置

第一步：设置href属性值

<a href="#about">公司简介</a>

第二步：设置锚点

<h1 id="about">公司简介详细描述<>

7.9、注释标签

注释内容不显示在页面中，也不会执行

<!--这里是注释-->

7.10、特殊字符

常用特殊字符：

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
°	摄氏度	°
±	正负号	±
×	乘号	×	×
÷	除号	÷	÷
²	平方	²
³	立方	³

8、标签属性的注意点

一个标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序
标签名与属性、属性与属性这间均以空格分开
属性采取键值对的格式，即key=“value”

9、表格标签

9.1、表格的主要作用

不是布局页面而是用于显示、展示数据

9.2、表格的基本用法

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="50%">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>锄禾</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>

标签	作用
<table></table>	用于定义表格的标签
<th></th>	1、用于定义表格的表头部分 2、表头单元格一般位于表格的第一行或第一列 3、表头单元格里面的文本内容加粗居中显示 4、th为table head的缩写
<tr></tr>	1、用于定义表格中的行 2、必须嵌套在<table></table>标签中
<td></td>	1、用于定义表格中的单元格 2、必须嵌套在<tr></tr>标签中 3、td指表格数据table data

9.3、表格的属性

属性名	属性值	描述
align	left、center、right	表格相对周围元素的对齐方式
border	1或""	表格是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	单元格边沿与其内容之间的空白，默认1像素
cellspacing	像素值	单元格之间的空白，默认2像素
width	像素值百分比	1、表格的宽度 2、可以为像素值 3、也可以为像素百分比
height	像素值百分比	1、表格的高度 2、可以为像素值 3、也可以为像素百分比

9.4、表格结构标签

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="50%">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>  
        </thead>
        <tbody>
            <tr>
                <td>锄禾</td>
                <td>男</td>
                <td>18</td>
            </tr>
     </tbody>
    </table>

因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两部分

标签	描述
<thead></thead>	1、表格的头部区域 2、<thead>内部必须拥有<tr>标签
<tbody></tbod>	表格的主体区域

9.5、合并单元格

9.5.1、合并单元格的方式

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

9.5.1、目标单元格

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

9.5.1、合并单元格的步骤

1、确定合并是跨行还是跨列
2、找到目标单元格，写上合并代码。如：<td colspan="2"></td>
3、删除多余的单元格

10、列表标签

列表用来布局

10.1、无序列表

<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>新浪</li>
</ul>

<ul></ul>表示HTML页面中的无序列表
<li></li>标签定义列表项
无序列表各个列表项之间没有顺序级别之分，是并列的
<ul></ul>中只能嵌套 <li></li>
直接在 <ul></ul>标签中输入其他标签或者文字是不被允许的
<li></li>之间相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式属性，实际使用时会使用CSS来设置

10.2、有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

<ol>
    <li>百度</li>
    <li>谷歌</li>
    <li>新浪</li>
</ol>

<ol></ol>标签用于定义有序列表，列表排序以数字来显示
<li></li>标签用来定义列表项
<ol></ol>中只能嵌套<li></li>标签
直接在<ol></ol>标签中输入其它标签或者文字是不被允许的
<li></li>之间相当于一个容器，可以容纳所有元素
有序列表会带有自己的样式属性，实际使用时会使用CSS来设置

10.3、自定义列表

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

<dl>
    <dt>关注我们</dt>
    <dd>新官方微信</dd>
    <dd>联系我们</dd>
</dl>

<dl></dl>标签用于定义描述列表（或定义列表）
<dt></dt>标签定义项目/名字
<dd></dd>标签描述项目/名字
<dl></dl>只能包含<dt>和<dd>
<dt>和<dd>个数没有限制，经常一个<dt>对应多个<dd>

11、表单标签

11.1、表单的作用

收集用户信息，比如注册页面

11.2、表单的组成

HTML中一个完整的表单通常由以下3个部分构成：

表单域
表单控件（也称表单元素）
提示信息

11.3、表单域

<form action="demo.pnp" method="POST" name="chuhe">
    
</form>

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

属性	属性值	作用
action	URL地址	用于指定接收并处理表单数据的服务器程序的URL地址
method	get、post	用于设置表单数据的提交方式，其值为get或post
name	名称

11.4、表单控件（表单元素）

11.4.1、input输入表单元素

<!--单选框和复选框要有相同的name值-->
性别：<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女

单标签
<input />标签中，包含一个type属性
根据不同的type属性值，输入字段拥有多种形式
可以是文本、复选框、掩码后的文本控件、单选按钮、按钮等

type属性值及其作用：

属性值	描述
button	1、普通按钮 2、通常配合JS使用
reset	1、定义重置按钮。 2、重置按钮会清除表单中的所有数据
submit	1、定义提交按钮。 2、提交按钮会把表单数据发送到服务器 3、配合<form>标签使用
checkbox	复选框
file	定义输入字段和“浏览”按钮，供文件上伟
hidden	隐藏的输入字段
image	定义图像形式的提交按钮
password	该字段中的字符被掩码
radio	单选按钮

| text| 定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符|

<input />标签的其它属性

属性	属性值	描述
name	用户自定义	1、单选框和复选框有相同的name值
value	用户自定义	1、用来设置文本框中的默认值 2、设置按钮上显示的文本
checked	checked	1、规定input元素首次加载时应当被选中 2、主要针对单选框和复选框
maxlength	正整数	规定输入字段中的字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用
要求单选框和复选框要有相同的name值
checked主要针对单选框和复选框
maxlength用于限制文本框中输入的最大字符数

11.4.2、label标签

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

为input元素定义标注
绑定一个表单元素，当点击label标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上
label标签的for属性应与相关元素的id属性相同

11.4.3、select下拉表单元素

籍贯：
<select>
    <option>上海</option>
    <option selected="selected">北京</option>
    <option>江苏</option>
</select>>

定义下拉列表
<select>中至少包含一对<option>
在<option>中定义selected="selected"属性，表示当前项即为默认选中项

11.4.4、textarea文本域元素

<textarea cols="50" rows="5"> 默认值</textarea>

可以定义多行文本输入
cols=“每行中的字符数”
rows=“显示的行数”
cols、rows属性一般不用，都是用CSS来改变大小

一株禾

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML语法规范

文章目录1、基本语法概述2、标签关系3、HTML基本结构标签4、文档类型声明标签5、lang语言种类6、字符集7、HTML常用标签7.1、标题标签7.2、段落标签7.3、换行标签7.4、文本格式化标签7.5、div标签7.6、span标签7.7、图像标签7.8、超链接标签7.8.1、超链接的语法格式7.8.2、超链接的分类7.8.2.1、外部链接7.8.2.2、内部链接7.8.2.3、空链接7.8.2.4、下载链接7.8.2.5、网页元素链接7.8.2.6、锚点链接7.8.1、7.9、注释标签7.10、特殊
复制链接

扫一扫