【HTML】-CSDN博客

本文链接：https://blog.csdn.net/qq_53450254/article/details/131817001

一、HTML简介

1、网页

什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的“一页”，通常是HTML格式的文件，它需要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

什么是HTML

HTML指超文本标记语言（Hype Text Mardup Language），它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言（一套标记标签）。

所谓超文本有两层含义：
它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）；
它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

网页的形成

网页是由网页元素组成的，这些元素利用HTML标签描述出来，通过浏览器解析后展示出来。

2、常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。

3、Web标准

Web标准是W3C组织和其他标准化组织制定的一系列标准的集合。

为什么需要Web标准

让 Web 的发展前景更广阔；
内容能被更广泛的设备访问；
更容易被搜寻引擎搜索；
降低网站流量费用；
使网站更易于维护；
提高页面浏览速度。
在这里插入图片描述

Web标准的构成

结构：用于对网页元素进行整理和分类（HTML）；
表现：用于设置网页元素的版式、颜色、大小等外观样式（CSS）；
行为：指网页模型的定义及交互的编写（JavaScript）。

在这里插入图片描述

4、HTML语法规范

基本语法概述

HTML标签是由尖括号包围的关键词，例如 < html > ；
HTML标签通常是成对出现的，例如 < html > </ html > ，称之为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签，例如<br/ >，称之为单标签。

标签关系

双标签关系可以分为包含关系和并列关系。
包含关系：< head > < title >< title > < head >
并列关系：< head > < head > < body > < body >

5、HTML基本结构标签

第一个HTML网页

每个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>这是第一个页面</title>
</head>

<body>
    键盘敲烂 月薪过万
</body>

</html>

在这里插入图片描述

6、开发工具

VSCode下载

二、HTML标签

根据标签的语义，在合适的地方给一个最为合理的标签可以让页面结构更清晰。

1、标题标签

单词head的缩写，意为头部、标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

特点：
加了标题的文字会加粗，字号也会变大；
一个标题独占一行。

2、段落标签

在 HTML 中要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，标签用于定义段落，它可以将整个网页分为若干个段落。

<p>这是一个段落</p>

特点：
文本在一个段落中会根据浏览器窗口的大小自动换行；
段落和段落之间保有空隙。

3、换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。

<br>

特点：
< br /> 是个单标签；
< br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4、文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
在这里插入图片描述

5、div标签和span标签

< div > 和< span > 是没有语义的，它们就是一个盒子，用来装内容的。

<div>大盒子</div>
<span>小盒子</span>

特点：
< div > 标签用来布局，但是现在一行只能放一个< div >，大盒子；
< span > 标签用来布局，一行上可以多个 < span >，小盒子。

6、图像标签

src 是< img >标签的必须属性，它用于指定图像文件的路径和文件名。

<img src="图像URL" />

在这里插入图片描述

7、超链接标签

在 HTML 标签中，< a > 标签用于定义超链接，作用是从一个页面链接到另一个页面。

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

在这里插入图片描述
特点：
外部链接：< a href=“http:// www.baidu.com “> 百度< /a >；
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如 < a href=“index.html”> 首页 < /a >；
空链接: 如果当时没有确定链接目标时，< a href=”#”> 首页 < /a > ；
下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件；
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接；
锚点链接: 点我们点击链接，可以快速定位到页面中的某个位置；
在链接文本的 href 属性中，设置属性值为 #名字的形式，如< a href=“#two”> 第2集 < /a>；
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：< h3 id=“two”>第2集介绍< /h3>。

8、表格标签

< table > < /table >标签是用于定义表格的标签。

        <table border="1" align="center" width="500" height="300" cellspacing="0">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>关键词</th>
                    <th>趋势</th>
                    <th>今日搜索</th>
                    <th>最近七日</th>
                    <th>相关链接</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td>
                        <img src="down.jpg">
                    </td>
                    <td>345</td>
                    <td>123</td>
                    <td><a href="https://www.baidu.com" target="_blank">百度</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>盗墓笔记</td>
                    <td>
                        <img src="down.jpg">
                    </td>
                    <td>345</td>
                    <td>123</td>
                    <td><a href="https://www.baidu.com" target="_blank">百度</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>龙族</td>
                    <td>
                        <img src="up.jpg">
                    </td>
                    <td>345</td>
                    <td>123</td>
                    <td><a href="https://www.baidu.com" target="_blank">百度</a></td>
                </tr>
            </tbody>
        </table>

特点：
< tr > < /tr > 标签用于定义表格中的行，必须嵌套在 < table > < /table >标签中；
< td > < /td > 用于定义表格中的单元格，必须嵌套在< tr >< /tr >标签中；
< th > 标签表示 HTML 表格的表头部分(table head 的缩写)，一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示；
< thead >标签表示表格的头部区域，< tbody >标签表示表格的主体区域。
表格标签这部分属性实际开发我们不常用，后面通过 CSS 来设置。在这里插入图片描述
特殊情况下，可以把多个单元格合并为一个单元格。

        <table border="1" width="500" height="300">
            <tr>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

合并单元格三步曲：
先确定是跨行还是跨列合并；
找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：< td colspan=“2” >< /td >；
删除多余的单元格。

9、列表标签

表格是用来显示数据的，那么列表就是用来布局的；
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便；
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
在这里插入图片描述
无序列表
< ul > 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 < li > 标签定义。

        <ul>
            <li>詹姆斯 23</li>
            <li>韦德 3</li>
            <li>戴维斯 3</li>
        </ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的；
< ul >< /ul > 中只能嵌套 < li >< /li >，直接在 < ul >< /ul > 标签中输入其他标签或者文字的做法是不被允许的；
< li > 与 < /li > 之间相当于一个容器，可以容纳所有元素；
无序列表会带有自己的样式属性，但在实际使用时会通过CSS来设置。
在这里插入图片描述

        <ol>
            <li>江苏省 南京市</li>
            <li>安徽省 合肥市</li>
            <li>浙江省 杭州市</li>
        </ol>

< ol >< /ol >中只能嵌套< li >< /li >，直接在< ol >< /ol >标签中输入其他标签或者文字的做法是不被允许的；
< li > 与 < /li >之间相当于一个容器，可以容纳所有元素；
有序列表会带有自己样式属性，但在实际使用时会通过CSS来设置。
在这里插入图片描述

        <dl>
            <dt>关注我们</dt>
            <dd>新浪微博</dd>
            <dd>官方微信</dd>
            <dd>官方公众号</dd>
        </dl>

< dl >< /dl > 里面只能包含 < dt > 和 < dd >。
< dt > 和 < dd >个数没有限制，经常是一个< dt > 对应多个< dd >。
在这里插入图片描述

10、表单标签

使用表单目的是为了收集用户信息。在网页中需要跟用户进行交互、收集用户资料，此时就需要表单。
在这里插入图片描述

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
表单域是一个包含表单元素的区域；
在 HTML 标签中， < form > 标签用于定义表单域，以实现用户信息的收集和传递；
< form > 会把它范围内的表单元素信息提交给服务器。
在这里插入图片描述
< input > 表单元素在英文单词中，input 是输入的意思，而在表单元素中 < input > 标签用于收集用户信息。
在 < input > 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
在这里插入图片描述

    <body>
        <form>
            <label for="account">账户</label>
            <input type="text" id="account"><br>
            密码<input type="password"><br>
            性别<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女<br>
            爱好<input type="checkbox" name="fav">篮球<input type="checkbox" name="fav">足球<input type="checkbox"
                name="fav">台球<br>
            上传头像<input type="file"><br>
            点击获取验证码<input type="button" value="获取验证码"><br>
            重置按钮<input type="reset" value="重置"><br>
            提交按钮<input type="submit" value="提交"><br>
            下拉标签<select>
                <option>南京市</option>
                <option selected="selected">合肥市</option>
                <option>安庆市</option>
            </select><br>
            <textarea rows="4" cols="20">
中国天气网讯今天（7月26日），超强台风“杜苏芮”已经绕过菲律宾吕宋岛高山，向我国步步逼近。为应对“杜苏芮”，中央气象台已经发布最高级别的台风红色预警。根据预报，台风“杜苏芮”最大可能于28日早晨到上午在福建福清到闽粤交界沿海登陆，登陆后还将一路北上，风雨影响或覆盖十余省区市，威力不容小觑，各地需做好台风防御准备。
            </textarea>
        </form>
    </body>