html语法规则大全

👤拔丝英语网 🕔2024/01/17 18:27 📁国外生活

ads

一、HTML概念

HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。

1.1 超文本

HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

1.2 标记语言

说HTML是一种标记语言，是因为它是由一系列标签组成的，没有常量、变量、流程控制、异常处理。IO等等这些功能。

HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

标签是通过一组尖括号和标签名的方式来定义的。开始标签<>和结束标签</>一起构成了一个完整的标签。开始标签的结束标签之间的部分叫文本标签体，也简称标签体。

二、HTML的结构

2.1 文档声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。

HTML5版本的文档类型声明如下：

<!DOCTYPE html>

2.2 根标签

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。

2.3 头部

head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

2.4 主体

body标签用于定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

2.5 注释

HTML注释的写法如下：

    <!---->

注释的内容不会显示到浏览器窗口内，是开发人员用来对代码内容进行解释说明。

三、HTML语法规则

  1. 1. 根标签有且只能有一个

  2. 2. 无论是双标签还是单标签都必须正确关闭

  3. 3. 标签可以嵌套但不能交叉嵌套

  4. 4. 注释不能嵌套

  5. 5. 属性必须有值，值必须加引号，单引号或双引号均可

  6. 6. 标签名不区分大小写，但建议使用小写

四、HTML的各个标签的使用

4.1 标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签的介绍</title>
</head>
<body>
<!--标题标签的特点:
    1.独占一行
    2.加粗加黑
    3.默认在左边
    根据标题的大小，可以分为六级标题，从大到小分别是h1到h6
-->

    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>
</body>
</html>

页面效果如下：

请添加图片描述

4.2 段落标签和换行标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
<!--一个p标签里面的内容就放在一段里面-->
<p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
<p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
<p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>
<p>从11月15日开始，全国已连续九天每日新增本土感染者突破两万。其中，23日，这一数值已经破三万。国家疾控局传防司二级巡视员胡翔11月22日介绍说，11月1日以来，全国已经累计报告了25.3万例感染者，近一周平均每天报告2.22万例，较上一周增长了一倍。这意味着，截至23日24时，11月新增本土感染者接近30万。</p>

<!--换行标签 br-->

    helloworld<br>
    你好世界
</body>
</html>

页面效果如下：

请添加图片描述

4.3 无序列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表标签</title>
</head>
<body>
<!--
    无序列表标签通常是使用在展示一系列的数据的情况下
        ul表示无序列表，其中的li表示列表的每一项
-->
<ul>
    <li>刘备</li>
    <li>关羽</li>
    <li>张飞</li>
    <li>马超</li>
</ul>
</body>
</html>

页面效果如下：

请添加图片描述

4.4 超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--
    超链接标签a的作用：进行资源跳转
        href：要跳转到资源的路径
        target：新页面的打开方式
-->
<!--
    1. 跳转到本项目的资源：使用相对路径
        相对路径：以当前路径作为基准，如果资源在同一目录下则直接写资源名；
                 如果在不同目录下，要找上一级目录，则使用../

                 . 当前目录
                 .. 上一级目录
-->
    <a href="01_header.html">跳转到01_header.html</a>

    <br>

    <a href="../01_html入门/start.html">跳转到start.html</a>

    <br>
<!--
     2. 跳转到其他服务器的资源：使用完整的url访问路径
     绝对路径：以/开头，从服务器的根路径开始写，其实就是在完整的url的基础上省略http://服务器的主机地址:端口号
-->
    <a href="http://www.baidu.com">跳转到百度</a>

    <br>

<!--
    target属性表示新页面的打开方式
        _self：新页面在当前页面打开
        _blank：新页面会新打开一个标签页
 -->
    <a href="http://www.baidu.com" target="_blank">跳转到百度</a>
</body>
</html>

页面效果如下：

请添加图片描述

4.5 图片标签

将准备好的图片放在img文件夹下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--
    image标签用于显示图片
        src：用于指定要显示的图片的路径，建议使用相对路径。项目中的图片一般存放在一个img文件夹中
        width：图片的宽度
        height：图片的高度
-->
    <img src="../img/前端.jpeg" width="550" height="310"/>
</body>
</html>

页面效果如下：

请添加图片描述

4.6 块标签

块并不是为了显示文章的内容，而是为了方便结合CSS对页面进行布局。

块有两种，div是前后有换行的块，span是前后没有换行的块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div和span标签的介绍</title>
</head>
<body>
    <!--
        div和span的区别：
            div会独占行，它不和其他的div处于同一行（但是css中可以使用浮动来让多个div处于同一行）
            span不会独占行，多个span可以在同一行
    -->

    <div style="border: 1px solid black;width: 100px;height: 100px">这是一个div块</div>
    <div style="border: 1px solid black;width: 100px;height: 100px">这是一个div块</div>

    <span style="border: 1px solid black;width: 100px;height: 100px">这是一个span块</span>
    <span style="border: 1px solid black;width: 100px;height: 100px">这是一个span块</span>

    <div>hello world &nbsp; &nbsp; &nbsp; &nbsp; 你好世界</div>
</body>
</html>

页面效果如下：

请添加图片描述

4.7 转义字符

在HTML文件中，<、>等等符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果要使用符号本身怎么办呢？需要使用HTML实体来进行转义。

显示结果 描述 实体名称

空格 &nbsp；
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
" 引号 &quot;
' 撇号 &apos;
© 版权 &copy;
® 注册商标 &reg;

4.8 小结

标签名称 功能
h1~h6 1级标题~6级标题
p 段落
a 超链接
br 换行
ul/li 无序列表
img 图片
div 定义一个前后有换行的块
span 定义一个前后无换行的块

五、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
    <!--美化table、th、td标签-->
    <style type="text/css">
        table,th,td {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
<!--合并单元格：
        rowspan：跨行合并
        colspan：跨列合并
-->
    <table>
        <tr>
            <th>姓名</th>
            <th>属性</th>
            <th>级别</th>
            <th>忍村</th>
        </tr>
        <tr>
            <td>漩涡鸣人</td>
            <td>风</td>
            <td>下忍</td>
            <td>木叶</td>
        </tr>
        <tr>
            <td>宇智波佐助</td>
            <td rowspan="2">雷&火</td>
            <td colspan="2">下忍</td>
        </tr>
        <tr>
            <td>我爱罗</td>
            <td>影</td>
            <td>砂隐村</td>
        </tr>
    </table>
</body>
</html>

页面效果如下：

请添加图片描述

六、表单标签

6.1 表单标签的作用

在项目开发过程中，凡是需要用户填写的信息都需要用到表单。

表单的作用是接收用户的输入信息，并且将用户输入的信息提交给服务器。

6.2 form标签的介绍

在HTML中使用form标签来定义一个表单。form标签有两个重要的属性：action和method。

6.2.1 action属性

用户在表单里填写的信息需要发送到服务器端。服务器端接收表单数据的地址要写在form标签的action属性中。

6.2.2 method属性

form标签中method属性用来定义提交表单的请求方式。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。

七、 表单项标签

表单中的每一项，包括：文本框、密码框、单选框、多选框等等，都称之为表单项，一个表单中可以包含多个表单项。

7.1 name和value属性

在各个具体的表单标签中，通过name属性来给数据起名字，通过value属性来保存要发送给服务器的值。

7.2 单行文本框

        用户名<input type="text" name="username"/><br/>

7.3 密码框

        密码<input type="password" name="pwd"/><br/>

7.4 单选框

        性别<input type="radio" name="gender" value="male" checked="checked"/>男
        <input type="radio" name="gender" value="female"/>女<br/>

7.5 多选框

        兴趣爱好
        <input type="checkbox" name="hobby" value="basketball"/>篮球
        <input type="checkbox" name="hobby" value="football" checked/>足球
        <input type="checkbox" name="hobby" value="pingpangball" checked/>乒乓球
        <input type="checkbox" name="hobby" value="badminton"/>羽毛球
        <br/>

7.6 下拉框

        学历
        <select name="education">
            <option value="gz">高中</option>
            <option value="zk">专科</option>
            <option value="bk">本科</option>
            <option value="ss">硕士</option>
            <option value="bs">博士</option>
        </select>
        <br/>

7.7 按钮

        <button type="button">普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <br/>

7.8 隐藏域

        <!--隐藏域：通过隐藏域设置的表单不会显示在页面上，用户看不到。
            但是在提交表单时会一起被提交。
        -->
        <input type="hidden" name="id" value="1"/>

7.9 多行文本框

        <!--多行文本域-->
        <textarea name="desc" rows="10" cols="50">

7.10 效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        <!--
            表单项的name属性，就是该表单项的数据的名字。
            表单的value属性，如果表单是输入框，它的输入数据就是value；
                            如果是单选框或复选框需要手动设置value；
                            如果是按钮，就是按钮上的文字
            有三种：
                1. input 输入项：根据type属性的不同，可以分为不同的输入项
                    1. text：文本框，默认类型
                    2. password：密码框
                    3. radio：单选框。要求同一组单选框的name属性相同。checked属性表示默认选中。
                    4. checkbox：多选框。要求同一组的多选框的name属性相同。checked属性表示默认选中
                    5. button：表示普通按钮，不具备任何功能要结合JS一起使用。
                    6. submit：表示提交按钮，点击就能将表单提交给服务器
                    7. reset：表示重置按钮，点击就能重置表单
                    8. hidden：表示隐藏域，向服务器提交数据但是不在页面上显示出来
                2. select 下拉框
                    其中的每一个option标签是一个选项。selected="selected"属性实现默认选中的效果
                3. textarea 文本域
        -->
        用户名<input type="text" name="username"/><br/>
        密码<input type="password" name="pwd"/><br/>
        性别<input type="radio" name="gender" value="male" checked="checked"/>男
        <input type="radio" name="gender" value="female"/>女<br/>

        兴趣爱好
        <input type="checkbox" name="hobby" value="basketball"/>篮球
        <input type="checkbox" name="hobby" value="football" checked/>足球
        <input type="checkbox" name="hobby" value="pingpangball" checked/>乒乓球
        <input type="checkbox" name="hobby" value="badminton"/>羽毛球
        <br/>

        学历
        <select name="education">
            <option value="gz">高中</option>
            <option value="zk">专科</option>
            <option value="bk">本科</option>
            <option value="ss">硕士</option>
            <option value="bs">博士</option>
        </select>
        <br/>

        <input type="button" value="普通按钮"/>
        <br/>

        <input type="submit" value="提交"/>
        <br/>

        <input type="reset" value="重置表单">
        <br/>

        <button type="button">普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <br/>
        <!--隐藏域：通过隐藏域设置的表单不会显示在页面上，用户看不到。
            但是在提交表单时会一起被提交。
        -->
        <input type="hidden" name="id" value="1"/>

        <!--多行文本域-->
        <textarea name="desc" rows="10" cols="50">

        </textarea>
        <br/>
    </form>
</body>
</html>

页面效果如下：

请添加图片描述

学海无涯苦作舟


最后编辑于：2024/1/17 拔丝英语网

admin-avatar

英语作文代写、国外视频下载

高质量学习资料分享

admin@buzzrecipe.com