HTML总结

lzy031012

于 2023-03-30 19:38:00 发布

阅读量48

点赞数

文章标签： html 网络前端

本文链接：https://blog.csdn.net/lzy031012/article/details/129851204

版权

一.什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

二.什么是协议

协议也叫网络协议，它是计算机之间进行数据通信的一种规范，约束，约定，标准的集合。在我们开发中经常会见的 http、https、ftp、file等等。

http：超文本传输协议。

https：带安全的超文本传输协议。

ftp：文件传输协议

file：本地文件协议

.....

三.HTML整体框架

四.标签

1.<p>标签

<p>标签叫段落标签，一对<p>标签要占一行，多个<p>标签之间有换行。

<body>
    <p>我要独占一行</p>
    <p>我也要独占一行</p>
</body>

2.<br>标签

标签用于换行，它是一个独立的标签，不需要闭合。在需要换行的内容后加<br>标签，段落会自动换行。

3.<hr>标签

（1）标签也是一个独立的标签，它是在页面中画一条水平实线。

（2）可以通过属性加效果：

size：用于指定水平线的粗细，值越大越粗

width：用于指定水平线的宽度，值越大越宽

noshade：设置有没有阴影

color：给水平线添加不同的颜色，颜色的值可以是以下几种：颜色的英文单词，十六进制的，使用RGB方式。

align：用于指定水平线的对齐方式，有以下几个值： left：左对齐 center：居中对齐，默认值 right：右对齐

<!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>
    生态文明建设其实就是把可持续发展提升到绿色发展高度，
    为后人“乘凉”而“种树”，就<br>是不给后人留下遗憾而是留下
    更多的生态资产。生态文明建设是中国特色社会主义事业
    的重要内容，关系人民福祉，关乎民<br>族未来，事关“两个一
    百年”奋斗目标和中华民族伟大复兴中国梦的实现。党中
    央、国务院高度重视生态文明<br>建设，先后出台了一系列重大
    决策部署，推动生态文明建设取得了重大进展和积极成效。<br>
    <hr>
</body>
</html>

4.<pre>标签

<pre>标签叫做预打印标签，在此标签中写入你想要的段落的样式，运行后会保留你所输入的样式，不会被改变。

    <pre>
        鹅，鹅，鹅，
        曲项向天歌。
        白毛浮绿水，
        红掌拨清波。
    </pre>

5.<div>标签

div标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。可嵌套使用

6.<span>标签

span标签是HTML的行内标签，被用来组合文档中的行内元素。<span>没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。

7.<img>标签

这个标签用于在页面中显示图片。使用前需要在此项目中建立一个文档用来储存图片，使用该标签链接图片在页面中显示，可通过属性调节图片尺寸大小以及边框，位置等等

<body>
    <img src="images/2022-07-17 23-05-51.jpg" alt="456" width="500" title="我不是图片" border="5" align="right">
    <img src="images/v2-d29a9ed9425ed9aae1d78cd5e9f3a9f1_r.jpg" alt="456" width="500" title="我不是图片" border="5" align="left"><br>
    <img src="images/2022-07-17 22-19-09.jpg" alt="456" width="500" title="我不是图片" border="5" align="left">
    <img src="images/2022-07-17 23-07-52.jpg" alt="456" width="500" title="我不是图片" border="5" align="right">
</body>

8.<a>链接标签

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

<body>
<a href="http://www.baidu.com/">百度</a>
</body>

9.多媒体标签

（1）<video>标签

使用 video 标签来播放视频，支持格式有：mp4,avi

通过src属性来指定视频的地址，可以是相对路径，也可以是绝对路径。这个标签还可以使用 autoplay 属性来指定自动播放。通过 controls 属性来指定控制按钮。

（2）<audio>标签

使用 audio 标签来播放音乐。

通过src属性来指定音频的地址，可以是相对路径，也可以是绝对路径。这个标签还可以使用 autoplay 属性来指定自动播放。通过 controls 属性来指定控制按钮。

10.列表标签

无序列表

无序列表由<ul>定义，在<ul>中每一行列表用<li>定义

<ul> 一般和 <li> 配合使用，不会单独出现，而且不建议在 <ul> 中直接使用除 <li> 之外的其他标签。

<body>
    <ul>
        <li>hh</li>
        <li>vv</li>
        <li>dd</li>
    </ul>
</body>

有序列表

有序标签就是可以在每一项之前有一个序号，使用 <ol> 标签来定义，每一个具体的项还是使用< li> 标签来定义。

<body>
    <ol>
        <li>hh</li>
        <li>vv</li>
        <li>dd</li>
    </ol>
</body>

带标题的列表

在 HTML 中，<dl> 标签用于创建定义列表。定义列表由标题（术语）和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。

<dl>表示定义列表。

<dt>表示定义术语，也就是我们说的标题。

<dd>表示定义描述。

<dt> 和 <dd> 是同级标签，它们都是 <dl> 的子标签。一般情况下，每个 <dt> 搭配一个 <dd>，一个 <dl> 可以包含多对 <dt> 和 <dd>。

<body>
    <dl>
        <dt>超大城市</dt>
        <dd>重庆</dd>
        <dd>上海</dd>
        <dd>北京</dd>
    </dl>
</body>

11.表格标签

通过<table><tr><th><td>标签来定义一个表格，首先用<table>定义一个表格，用<tr>来定义一行，每行有几个单元格可在<tr>标签内套用<td>标签，<td>标签内定义内容。

<table>标签内可用属性修改表格的大小尺寸，位置，内边距以及外边距等

<body>
    <table width="500" border="1" align="center">
        <caption>标题</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>大小</th>
        </tr>
        <tr>
            <td>1</td>
            <td>lzy</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>hxk</td>
            <td>6</td>
        </tr>
        <tr>
            <td>3</td>
            <td>hc</td>
            <td>9</td>
        </tr>
    </table>
</body>

12.<strong>标签

该标签可对文字进行加粗处理。

13.标题标签

有<h1>到<h6>有六个标签，依次逐级递减

<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

五.form表单

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素

<input>元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的type属性，运行后的格式各有不同。

常见的type属性如下所示：

<!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>form表单练习</title>
</head>
<body align="center">
    <p>
        <h1>用户注册</h1>
    </p>
    <p>
        用户名：<input type="text">
    </p>
    <p>
        密码：<input type="text" autofocus>
    </p>
    <p>
        请选择你的性别：
        <input type="radio" checked>男
        <input type="radio">女
    </p>
    <p>
        请选择你的爱好:
        <input type="checkbox">足球
        <input type="checkbox">篮球
        <input type="checkbox">LOL
        <input type="checkbox">韩剧
        <input type="checkbox">王者荣耀
    </p>
    <p>
        邮箱：<input type="email" placeholder="请输入您的邮箱">
    </p>
    <p>
        用户头像：<input type="file">
    </p>
    <p>
        您的家庭住址是：
        <select>
            <option value="西安">西安</option>
            <option value="郑州">郑州</option>
            <option value="上海">上海</option>
        </select>
    </p>
    <p>
        您的收货地址是：
        <select name="address" multiple size="4">
            <option value="-1">请选择你的收货地址</option>
            <option value="永川">永川</option>
            <option value="江北">江北</option>
            <option value="万州">万州</option>
        </select>
    </p>
    <p>
        请留下您的建议或者意见：
        <textarea placeholder="您的意见或者建议" rows="10" cols="25"></textarea>
    </p>
    <p>
        请选择您喜欢的颜色：
        <input type="color">
        注册的时间：
        <input type="datetime-local">
    </p>
    <p>
        <input type="button" value="注册">
        <input type="reset" value="重置">
    </p>
</body>
</html>

type=“text”：创建单行文本输入框
type=“password”：密码输入框
type=“radio”：单选按钮
type=“button”：普通按钮

type=“submit”：提交按钮

type=“reset”：重置按钮

type=“image”：图像按钮

type=“file”：文件域

type=“textarea”：文本输入域

type=“select”：下拉列表