HTML温习回顾_html zeal-CSDN博客

本文链接：https://blog.csdn.net/ImmortalSYM/article/details/116423901

本文回顾了HTML中的转义字符、Meta标签的作用，强调了语义标签的使用，如标题、段落、强调等，并详细介绍了超链接的`<a>`标签及其属性，包括`href`和`target`。

摘要由CSDN通过智能技术生成

HTML温习回顾

转义字符

在HTML中，不能直接书写特殊字符，比如多个连续的空格，以及字母两侧的大于或者小于号，如果需要在网页中书写特殊字符，需要使用HTML中的转义字符（实体）：

实体语法：

&实体名字;

例如：

空格： 

大于号：>

小于号：<

版权符号：©

更多的转义字符可以下载查看Zeal，下载相关HTML文件进行查看更多的转义字符；

Zeal是一款离线文档器，集成多种语言文档，便于开发人员查阅学习
Meta标签

<meta>标签主要设置网页中的一些元数据，一个HTML页面中可以包含多个<meta>标签；元数据不是给用户看，而是给浏览器或者搜索引擎使用的；

<meta>标签属性：
charset：指定网页的字符编码；

name：指定元数据的名称；

content：指定元数据的内容；
相关元数据名称：

keywords：表示网站的关键字，可以同时指定多个关键字，关键字之间使用逗号隔开；

例如：
```
<meta name="keywords",content="HTML,前端，CSS3">
```
description：表示网页的描述，其描述会显示在搜索引擎的搜索结果中；

例如：
```
<meta name="description",content="这是一个不错的网站">
```
http-equiv：将页面重定向为另一个网站；

例如：
```
表示3秒以后网页将重定向百度页面
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
```
语义标签

网页中，HTML负责网页结构，CSS负责网页样式，因此在使用HTML标签时，应该关注标签的语义，而不是样式；

常见的HTML标签：

标题标签（块元素）：

<h1>~<h6> 一共有六级标题；<h1>在网页的重要性仅次于title标签；

一般情况下，一个页面只有一个<h1>标签；标题标签只会使用<h1>~<h3>；

标题标签是独占一行的；

<hgroup>用来标题分组，可以将一组相关的标题同时放入标题组中；

<p>标签（块元素）：

段落标签，表示一个页面的段落；

<strong>标签（行内元素）：

用于文本的加粗，强调重要性；

<em>标签（行内元素）：

语言语义的加重;

<blockquote>标签（块元素）：

长引用；

<q>标签（行内元素）：

短引用；

<br>标签：

换行标签

列表标签：

有序列表：<ol>标签，使用<li>标签列表项；
无序列表，<ul>标签，使用<li>标签列表项；
定义列表，<dl>标签，使用<dt>表示定义标题，<dd>表示定义的内容描述；
列表之间可以相互嵌套；

布局标签

<header>标签：表示网页的头部；
<main>标签：表示网页的主体部分，一个页面只有一个<main>标签；
<footer>标签：表示网页的底部；
<nav>标签：表示网页的导航部分；
<aside>标签：表示网页的边栏部分；
<article>标签：表示网页中一个独立的文章；
<section>标签：表示网页中一个独立的区块；分区分块
<div>标签：网页的布局标签，块元素，表示区块；
<span>标签：文字布局标签，行内元素

一般网页布局的三种基本形式有：

<div>(<div>)
<nav>(<div>)
<ul>(<li>)
块元素和行内元素

块元素：在网页中，独占一行的元素，通常通过块元素进行布局；

行内元素：网页中，不会独占一行的元素，通常用于包裹文字，设置特殊效果；

一般情况下，在块元素内放置行内元素，不会在行内元素中放置块元素；

块元素中基本什么都可以放置；

<p>标签内不能放置任何的块元素；

浏览器解析网页时，会自动对网页中不规范的内容进行验证比如：标签写在了根元素外部，<p>标签内出现了块元素，根元素内出现了除了<head>标签和<body>标签以外的子元素等；
超链接标签

<a>标签：超链接标签，行内元素标签，在<a>标签中除了其本身外，可以嵌套任何元素；
属性：
href属性：指定跳转目标路径；其属性值可以是外部网站的地址，也可以是内部页面的位置；
外部网站：
```
<a href="https://www.baidu.com">百度链接</a>
```
内部位置：将href的属性值设定为，#+目标元素id属性值；

回到当前页面的顶部，可以直接将超链接的href属性设置为#，这样点击超链接以后就不会发生跳转而是回到当前页面的顶部位置；另外，在开发过程中，可以使用#作为占位符使用；

回到当前页面的底部，这里面的底部表示最后一个标签所定义的内容；因此需要给最后一个标签加入id属性；id属性是唯一不重复的；每一个标签都可以添加id属性；同一个页面不可以出现重复的id属性；id属性是字母开头，并且区分大小写；

写一个无任何作用的超链接；使用javascript:;作为href的属性值，此时点击超链接不会发生任何反应；
target属性：用来指定超链接的打开位置；

可选值：
_self：默认值，表示当前页面打开超链接；
_blank：表示在一个新的页面打开超链接；
相对路径

当我们需要跳转到本地服务器内部的页面时，一般使用相对路径；

相对路径会使用.或者…开头；

当当前网页与跳转网页在同一目录下时，./可以省略不写；

./表示当前网页文件所在目录；

…/表示当前文件所在目录的上一级目录；
图片标签

<img>标签为图片标签，可以向页面中引入一个外部图片；它是一个自结束标签；

<img>标签属于替换元素，介于块元素和行内元素之间，具有两种元素的特点；

相关属性:

src属性：指定外部图片的路径；路径可以是相对路径，也可以是绝对路径；可以直接复制网页的图片地址，这种很少使用；
alt属性：图片的描述；这个描述正常情况下不会显示，有些浏览器在图片无法加载的情况下显示描述文字；搜索引擎也会根据alt的内容识别图片
width属性：指定图片的宽度（单位是像素）；
height属性：指定图片的高度（注意高度和宽度只修改其中一个就可，另一个值会等比例缩放）
一般情况下，不建议修改图片的大小；需要多大的图片就裁剪多大的图片；大图缩小，占内存；小图放大，易失真，但是在移动端，经常需要对图片进行缩放；

图片格式：

jpeg(jpg)：支持颜色丰富；不支持透明效果；不支持动图；一般用来显示照片；
gif：支持颜色较少；支持简单透明；支持动图；适合颜色单一的图片、动图；
png：支持颜色丰富；支持复杂透明；不支持动图；专门用来设计网页；
webp：谷歌新推出的专门用来表示网页的一种格式；具备其他格式所有有点，文件特别小；但是兼容性不强；
base64：将图片使用base64进行编码；图片转换为字符，通过字符的形式引入图片；一般需要和网页一起加载的图片才会使用base64；可以百度搜索base64图片转换，将图片转换为base64编码；
内联框架
<iframe>内联框架，用于向当前页面中引入其他页面；

src属性：指定引入页面的路径；
width属性：可以调整引入页面的宽度；
height属性：可以调整引入页面的高度；
frameborder属性：表示内联框架的边框；可选值为0（无边框）或者1（有边框）；
媒体标签
<audio>标签：向页面中引入外部音频文件；
src属性：指定引入音频的路径；（相对路径和绝对路径）
controls属性：是否允许用户控制播放；音视频文件引入时，默认情况下是不允许用户控制播放停止；
autoplay属性：是否自动播放；如果设置了autoplay，则音乐会在网页打开时自动播放；但是大部分浏览器都不会对音乐自动播放（为了较好的用户体验）；
loop属性：是否循环播放；
例如：
```
<audio src="" controls autoplay loop></audio>
```
除了通过src指定外部文件的路径外，还可以通过<source>标签来指定文件路径；
对于不兼容的浏览器，可以用于显示提示文字；
同时设置多个<source>，指定多个格式的音视频（优先使用网页兼容的格式）；
<embed>标签可以在IE8引入音频

type属性：指定文件类型；
可以嵌入<audio>标签中使用；
例如：
```
<audio controls>
	对不起，您的浏览器不支持播放音频，请升级浏览器！
	<source src="">
	<source src="">
	<embed src="" type="audio/mp3">
</audio>
```
<video>标签，向网页中引入视频；视频格式mp4、webm（谷歌专门设置的视频格式）；使用方式和<audio>基本一样的；
例如：
```
<video controls>
	<source src="">
	<embed src="" type="video/mp4">
<video
```
可以通过复制网站，通过内联框架引入音视频，这样对本地服务器无压力；通常可以购买一些云服务，减少本地服务器的压力；
例如：
```
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=t0036kis46j" allowFullScreen="true"></iframe>
```

表格

在网页中，经常使用表格表示一些格式化的数据，通常通过<table>标签创建表格；

<table>标签创建表格框架；

<tr>表示表格中的一行，有几个<tr>就表示有几行；

<td>表示一个单元格，有几个<td>就表示有几个单元格；

例如：

<body>
    <table>
        <!--表示两行三列的单元格-->
        <tr>
        	<td>A1</td>
            <td>B1</td>
            <td>C1</td>
        </tr>
        <tr>
        	<td>A2</td>
            <td>B2</td>
            <td>C2</td>
        </tr>
    </table>
</body>

通常可以使用colspan属性横向合并单元格，rowspan属性纵向合并单元格；

例如：

<body>
    <table border="1" width='50%' align="center">
        <!--表示两行三列的单元格-->
        <tr>
            <!--表示单元格横向合并-->
        	<td rowspan="2">A1</td>
            <!--表示横向合并的单元格-->
            <td colspan="2">B1</td>
        </tr>
        <tr>
            <td>B2</td>
            <td>C2</td>
        </tr>
    </table>
</body>

长表格：

可以将一个表格分为三部分：头部<thead>、主体<tbody>、底部<tfoot>；可以用<th>表示头部的单元格；

题外话：表格的CSS样式

<table>是块元素，默认是被内容撑开的；

<td>的相关样式：

border：设置表格边框；

vertical：设置内容垂直对齐方式；

text-align：设置内容水平对齐方式；

默认情况下，元素在td中是垂直居中的；

<table>的相关样式：

border-spacing：设置单元格边框之间的距离；

border-collapse：设置单元格边框的合并；此时在设置border-spacing将无效果；

如果表格中，没有使用<tbody>，而是直接使用<tr>，那么浏览器会自动创建一个<tbody>，并且将<tr>全部放到<tboody>中；注意，<tr>不是<table>的子元素，无法通过子元素选择器table > tr选择<tr>；可以通过后代选择器选择<tr>，即：table tr

可以利用table特性设置子元素在父元素中垂直居中：

<style>
    /*父元素box1*/
    .box1{
               width: 300px;
               height: 300px;
               background-color: brown;
               /* 将父元素box1设置为表格样式 */
               /* 
                    注意：元素设置为table-cell，只会和自己相同的元素在一行
                    不会和其他元素（p标签等）在同一行；
                */
               display: table-cell;
                /* 垂直居中，可以使用vertical-align */
               vertical-align: middle;
           }
    /*子元素bo2*/
    .box2{
               width: 100px;
               height: 100px;
               background-color: teal;
               /* 水平居中依旧使用margin */
               margin:0 auto;
           }
</style>

表单

在网页中，表单用于将本地的数据提交给远程的服务器；使用<form>标签进行创建表单；这里展示常用的几个标签，其他具体可以查阅HTML文件；
创建表单：
```
<body>
    <form action="">
        
    </form>
</body>
```
添加表单项，可以使用<input>标签，它为行内块元素，可以通过<br>进行换行

文本框：<input type="text" name="文本框">

注意：数据要提交到服务器上，就必须给元素设置一个name属性；

提交按钮：<input type="submit" value="注册">

可以利用value属性值指定提交按钮的显示文字；

密码框：<input type="password" name="password">

单选框：<input type="radio" name="sex" value="男"><br><br><input type="radio" name="sex" value="女" checked>

必须具有相同的name属性；

必须指定value值，value属性值最终会作为用户填写的值传递给服务器；

checked可以将单选框设置为默认选中；

多选框：<input type="checkbox">

必须具指定name属性；

必须指定value值；
下拉列表：
```
<body>
    <form action="">
        <select name="" id="">
             <option value="1">选项一</option>
             <option value="2">选项二</option>
             <option value="3" selected>选项三</option>
             <option value="4">选项四</option>
        </select>
    </form>
</body>
```
<select>需要指定name属性；

<option>需要指定value属性；
普通按钮：<input type="button" value="按钮">

通常可以通过JS添加效果；

重置按钮：<input type="reset">

按钮：<button type="submit">提交</button>

<button type="reset">重置</button>

<button type="button">按钮</button>

颜色选择框：<input type=color>
属性值：

—autocomplete自动补全共功能；

可选值：on和off；

—readonly将表单项设为只读；数据会提交；

—disabled将表单项设为禁用；数据不会提交；

—autofocus设置表单项自动获取焦点；
设置网站图标

>  在标题栏和收藏栏中显示特定图标
>
> 	—设置语法：
>
> 		通过`link`引入图标文件，`<link rel="icon" href="图片路径">`；
>
> 		网站标题图片一般都**存储在网站的根目录**下，名字一般都叫做 `favicon.icon`；