HTML基础总结

丶山有木兮

于 2021-12-11 22:55:13 发布

阅读量718

点赞数 1

分类专栏：网页web 文章标签： html 前端 html5

本文链接：https://blog.csdn.net/Luweb1/article/details/121801813

版权

网页web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

在网页中，HTML就像一个骨架一样，支撑起整个网页的基本架构；而CSS则像衣服，负责网页的外观部分；JavaScript是一门脚本语言，能处理逻辑判断,也就是行为动作。

而作为前端三要素之一的HTML，并不是一门编程语言，正如它的名字一样，HyperText Markup Language，它是一门超文本标记语言，它的标准是由万维网联盟（W3C）来定制的，目前的最新版本是HTML 5。

一、基本概念

什么是超文本标记语言？

超文本：能够链接到其他页面或位置，像熟知的office里面的超链接，能够链接到文件或者网页
标记语言：由一系列标签标记起来的文本，不同标记下的文本具有不同的含义或是呈现不同的样式，例如markdown就是标记语言

而普通文本（像记事本写出来的）与标记语言写出来的文本，它们差别就体现在于附加功能、排版、样式美观、突出重点、内容丰富度上。

使用电脑上的文本编辑器就能直接写HTML语言，在记事本中写上：

<p>我的第一个网页</p>

修改文件后缀名为.html，用浏览器打开，就能显示我的第一个网页。

虽然普通文本编辑器也能编写HTML，但最好要有一个自己熟悉的IDE，使用IDE编写代码会更加便捷，比如visual studio code。

二、元素element

HTML由各种元素组成，从起始标签到结束标签之间，包含标签本身的所有内容，称之为元素（element），可以从标签和内容两个方面了解元素的具体构成。

<p>我的猫咪脾气爆:)</p>
<!-- <p>是起始标签 ，</p>是结束标签 ，‘我的第一个网页’ 是内容 -->
<!-- 而这里的标签和内容加起来就是一个 p元素 -->

在这里插入图片描述

— 参考MDN中文官网

1.标签（Tag）

基本

在HTML中，使用<>包裹起来的就是标签，他可能是<p></p>这样有头有尾的双标签，或者是<br />这样的单标签。

单标签，代表一个void element ，不会包含任何内容，也可以说它标签本身就是一个元素；
双标签，可以包含内容，但并不会要求一定要有内容；

示例：

img标签

<img src="./tiger.jpg" alt="老虎图片">

img标签 - - image，引用一张图片，单标签，self closing tag。

h标签

<h1>我是标题</h1>
<p>我是一个段落</p>

h标签 - heading ，p标签 - paragraph，表示标题和段落标签，都是双标签。

HTML中有两个比较重要的无意义标签<div></div>和<span></span>，它们本身没有任何意义，就是一个标签容器，通常会用来包裹一些元素集，做一些样式上布局。

----更多标签参考W3C 的官网

标签 object

所有的标签都是一个object（对象、物件），而对象都有自己的属性（attributes）和行为（methods）。

例如一个汽车就是一个对象、物件（object），它有自己的属性和行为：

汽车 car
属性（attributes）：价格，颜色，车牌...
行为（methods）：开前灯，向前走，倒车，加速...

同样的，标签也有属性和行为

<h1 
class = 'heading'   <!--class属性=‘属性值heading’-->
style = 'color: blue'   <!--style属性=‘属性值color: blue’-->
onclick = 'alert("你刚刚点击了这个标题")'    <!--onclick行为=‘触发后执行的命令alert’-->
>我是标题</h1>

上面设置了h1标签的class和style属性，以及onclick（点击触发事件）行为，当然一个标签的属性和行为不止这些，并且不同的标签之间都会有相同或不同的属性和行为。

2.内容（content）

在标签包裹起来的所有东西都是这个标签的内容，也就是元素的内容，它可能是纯文本，也可能包含图片、超链接，甚至其他元素（即标签是可以嵌套的）。
示例：

<div>
<h1> 爱护野生动物</h1>             
<p>动物和人一样，它们都是独立的个体，它们的生命也有意义.....</p>
</div>

这里的div标签就包裹了h1和p元素，而h1和p元素就是div元素的内容，它包含了另外两个元素。
这里也称div元素是h1和p元素的父元素，即父子关系，而h1和p元素则是兄弟元素。

当然，内容还可以包含纯文本，这个是肯定的：

<div>
<h1> 爱护野生动物</h1>             
<p>动物和人一样，它们都是独立的个体，它们的生命也有意义.....</p>
所以，要保护动物，爱惜每一个生命。
</div>

这时候div元素的内容就是h1元素、p元素以及后面的文本。

这就是一个元素的内容，它有多种多样的形式，可以参考MDN

3. 网页里的元素

在任何一个网页中，它最外层的标签都是html，也就是说网页就是一个大大的html元素，即：<html>所有网页内容</html>，这个标签告诉了浏览器文档内容是HTML语法的标记语言，而html则是文档的根元素。
随便一个网页中点击右键，检查网页源码，可以看到这样的一个基本结构：

<!DOCTYPE html>
<html>
  <head>
    ......
  </head>
  <body>
   .......
  </body>
</html>

这就是完整网页的一个基本骨架。

三、HTML skeleton 网页骨架

所有网页的内容都是由html标签包裹起来的，并且html元素内必须包含一个head和一个body元素，放着所有的网页内容包括界面可见的UI和不可见的元信息，而它最基本的架构就是：

<!DOCTYPE html>
<html lang = 'en'>
  <head>
    <!--元信息-->
  </head>
  <body>
   <!--用户可见界面信息-->
  </body>
</html>

<!DOCTYPE html> document type 指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<html>...</html> 向浏览器声明文档的类型为HTML，限定了文档的开始与结束。
通常<html>标签里会有lang（language）属性，英语是‘en’ ，简体中文则是‘zh-Hans’ 。当然，这个属性主要是告诉浏览器，该网页的语言。毕竟一个网页是中文还是英文，用户都能在网页上直观的看出来。
<head>...</head> 是文档的头部标签，其内容可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等，并且该部分不会显示在网页内。（网页设定与编码）。
<body>...</body> 文档的主体，包含网页内的所有显示内容。（网页呈现的内容）。

网页必须包含这些基本的架构。

1.头部 head元素

一个网页不可能只有骨头，还必须要有内容填充，首先是head元素里，有一些元信息是必须要有的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width , initail-scale=1' />
    <title>网页的title</title>
  </head>
  <body>
   <!--用户可见界面信息-->
  </body>
</html>

第一个meta标签里，charset属性就是character set ，也就是字集。
这个字的集合就等于utf-8，utf-8则是一种编码，它涵盖世界上，所有你能想到的和想不到的字。
所以这个属性定义了网页的编码形式，不定义这个属性的话，可能导致网页出现乱码。
第二个meta标签，name='viewport'，viewport就是视窗，就是网页中视窗大小。
width=device-width，就是宽度等于设备宽度，主要是为了网页适应不同的移动端。initail-scale=1，就是网页的放大缩小，1就是正常大小，2就是2倍大小。
第三个是title标签，顾名思义，这个标签定义了网页的标题。

正常一个网页的head元素至少要包含以上三个元素，当然，一个完善的网页也不仅仅包含这几个元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width , initail-scale=1' />
    <meta name='robots' content='index,follow' />
    <meta name='description' content='没有买卖就没有杀害' />
    <meta name='keyword' content='保护动物，大自然' />
    <meta name='author' content='姚明'/>
    <title>网页的title</title>
  </head>
  <body>
   <!--用户可见界面信息-->
  </body>
</html>

robots，更好的让搜索引擎检测搜索到网页。
description，网页的简短描述，在搜索引擎里显示。
keyword，关键词，也在搜索引擎里显示。
author，告诉别人网页的作者。

更多的head元素里，常用的网页设定元素，可以参考htmlhead

2.主体body元素

<body> 标签内放的元素都是在网页呈现的内容，熟悉它的常用标签，就可以做一个非常不错的网站了。

h标签（heading tag）

从大到小一共6种标题（h1~h6）。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width , initail-scale=1' />
    <title>网页的title</title>
  </head>
  <body>
  
   <h1>文章标题</h1>
   <h2>文章标题</h2>
   <h3>文章标题</h3>
   <h4>文章标题</h4>
   <h5>文章标题</h5>
   <h6>文章标题</h6>
   
  </body>
</html>

a 标签（anchor tag）

超链接标签，顾名思义，就是能够链接到其他网页的标签。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width , initail-scale=1' />
    <title>网页的title</title>
  </head>
  <body>
  
   <a href="http://www.baidu.com" target="_blank">百度一下</a>
   <!--href 属性，即 hypertext reference，就是超文本参考的网址-->
   <!--target 属性，不设置默认是"_self"，当前页面打开，它可以设置以下四个值-->
   <!--"_self"，"_blank"，"_parent"，"_top"-->
  </body>
</html>

head元素里的base标签

<!DOCTYPE html>
<html>
 <head>
   <meta charset='utf-8' />
   <meta name='viewport' content='width=device-width , initail-scale=1' />
   <title>网页的title</title>
   <base href="http://www.baidu.com" target="_blank">
      <!--base 标签可以设置两个默认全局属性-->
      <!--href 和 target-->
      <!--设置 href 的 base值，在a标签中使用 href="#"，就使用默认的链接地址-->
 </head>
 <body>
 
  <a href="#">百度一下</a>
  <a href="#"  target="_self">度娘</a>
  <a href="https://www.w3school.com.cn">W3C</a>
  
 </body>
</html>

img标签

<!DOCTYPE html>
<html>
 <head>
   <meta charset='utf-8' />
   <meta name='viewport' content='width=device-width , initail-scale=1' />
   <title>网页的title</title>
 </head>
 <body>

<img src="./tiger.png"  alt="老虎图片"  width="300" height="300" />
<!--width和 height，顾名思义就是定义宽高-->
<!--src属性 , source , 源头来源，即引用图片的路径，可以是相对路径（上面将图片放在与html相同文件目录下引用），也可以是绝对路径（图片网址）-->
<img 
src="https://up.jinzhao.wiki/wikipedia/commons/thumb/3/3f/Walking_tiger_female.jpg/1920px-Walking_tiger_female.jpg"  
alt="老虎图片" 
width="300" 
height="300" />

<!--alt属性 , alternative ，图片不显示时其他显示选择，当src的路径错误时，就会显示alt属性的值-->
<img src="./tigerssssss.png"  alt="老虎图片"  width="300" height="300" />
<!--src找不到该文件，就会显示 ，" 老虎图片"-->

 </body>
</html>

相对路径 relative file path 中，./表示html文件所在的文件目录，../表示最上层目录。
绝对路径 absolute file path ，图片网址

List 列表标签

每一条列表信息由一个<li></li>标签包裹，所有的列表li元素，都放在ol或ul标签里面，表示列表形式。

ol标签，ordered list，有序列的列表，会生成带序的列表形式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width , initail-scale=1' />
    <title>网页的title</title>
  </head>
  <body>
 
<ol>
   <li>朱鹮</li>
   <li>中华鲟</li>
   <li>雪豹</li>
</ol>

  </body>
</html>

ul标签，unordered list，无序列的列表，列表的形式是不分序列的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width , initail-scale=1' />
    <title>网页的title</title>
  </head>
  <body>
 
<ul>
   <li>朱鹮</li>
   <li>中华鲟</li>
   <li>雪豹</li>
</ul>

  </body>
</html>

table 表格标签

表格，是由很多的行组成，而每个行都有行数据，而一个表格就是一个table元素，它包含所有的表格信息。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width , initail-scale=1' />
    <title>网页的title</title>
    <style>
      table,
      td,
      th{
        border-collapse: collapse;
        border: 1px solid;
      }
      td,
      th{
        padding:0.25rem;
      }
    </style>
  </head>
  <body>
  
    <table>

      <tr>
        <th>名称</th>
        <th>俗称</th>
        <th>纲目</th>
        <th>保护级别</th>
      </tr>

      <tr>
        <td>大熊猫</td>
        <td>花熊</td>
        <td>4</td>
        <td>1</td>
      </tr>

      <tr>
        <td>白鲟</td>
        <td>象鼻鱼</td>
        <td>1</td>
        <td>1</td>
      </tr>
      
      <tr>
        <td>中华鲟</td>
        <td>鳇鱼</td>
        <td>1</td>
        <td>1</td>
      </tr>

    </table>
  
  </body>
</html>

请添加图片描述

<table> </table>，表格标签，标志一个表格的开始结束。
<tr></tr>，table row，表格的行标签，而表格是由一行一行组成的。
<td></td>，table data，表格数据，一个数据就是一个格子，将数据放到对应行的对应位置。
<th></th>，table heading，跟td一样，th表示放在首行的数据。

以上标签是一个表格必须要有的，除此之外，表格元素还有一些其他标签，主要是语义化的标签，在界面上没有效果的差异。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width , initail-scale=1' />
    <title>网页的title</title>
    <style>
      table,
      td,
      th{
        border-collapse: collapse;
        border: 1px solid;
      }
      td,
      th{
        padding:0.25rem;
      }
    </style>
  </head>
  <body>
  
    <table>

      <thead>
        <tr>
          <th colspan='5'>国家保护动物</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td rowspan="4">濒危动物</td>
          <td>名称</td>
          <td>俗称</td>
          <td>纲目</td>
          <td>保护级别</td>
        </tr>
        <tr>
          <td>大熊猫</td>
          <td>花熊</td>
          <td>4</td>
          <td>1</td>
        </tr>
        <tr>
          <td>白鲟</td>
          <td>象鼻鱼</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>中华鲟</td>
          <td>鳇鱼</td>
          <td>1</td>
          <td>1</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>合计数量</td>
          <td colspan='4'> </td>
        </tr>
      </tfoot>

    </table>
  
  </body>
</html>

请添加图片描述

thead，就是表格头；
tbody，表格内容；
thead，表格尾；
这三个标签，不是必须要写，写了也不会在界面上产生影响，但在语义化代码上有很大作用，方便程序员和浏览器读懂代码。
colspan属性，定义数据的列宽，相当于数据在行上占多少列；
rowspan属性，定义数据的行宽，相当于数据在列中占多少行；

form表单标签

表单，就是一些列要提交的数据，将这些数据做成一个表单，而网页有了表单就可以做很多事情，提交数据到网页的后端，或者通过数据呈现出相应的UI界面等等。
相应的，表单的所有的元素都放在一个form标签里面，并且通过button元素提交，button的类型使用submit类型。

<form></form>标签通常会使用两个属性，action 和method 。
action ，表单提交到的目的地，路径。
method ，表单提交的方式，get和post，使用GET方法，表单的内容会出现在网址栏上的URL上，所以当要传密码时，则不安全，这时候就要用POST。

input 输入标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body>
  
  <form action="" method="GET">

    <label for="userName">名字</label>
    <input 
    id="userName" 
    type="text"
    name="userName"
    value="初始值"
    maxlength="10" 
    minlength="2"
    placeholder="请输入真实姓名"
    required/>

    <br/>
    <label for="age">年龄</label>
    <input id="age" 
    type="number" 
    name="age" 
    value="18" 
    min="0" 
    max="100"
    required/>

    <br/>
    <label for="phone">号码</label>
    <input 
    id="phone" 
    type="text" 
    name="phone" />

    <br/>
    <input id="checkbox" 
    type="checkbox" 
    name="checkbox" 
    value="checkbox"/>
    <label for="checkbox" >选定</label>
    <br/>
    <input id="male" type="radio" name="gender" value="male" required/>
    <label for="male">男</label>
    <input id="female" type="radio" name="gender" value="female" />
    <label for="female">女</label>
    <input id="female" type="radio" name="female" value="female"/>
    <label for="female">女</label>

    <br/>
    <label for="email">邮箱</label>
    <input id="email" 
    type="email" 
    name="email" />

    <br/>
    <label for="password">密码</label>
    <input id="password" 
    type="password" 
    name="password" 
    required/>

    <br/>
    0<input type="range" name="radio" min="0" max="100"/>100

    <br/>
    <input  type="file" name="file" />
    <br/>

    <button type="submit">提交表单</button>

  </form>

</body>
</html>

常用input的属性

type，设定输入框的类型
max，对input类型为number时可以设定数字的最大值；
min，设定数字的最小值
maxlength，输入内容的最大长度；
minlength，输入内容的最小长度；
placehoder，该属性设定了输入框的提示内容；
required，属性定义了输入是否是必须的；
value，输入的数据值，也是表单最终提交的数据，可以初始化设定。而input就可以当作是，一个修改value的标签，它把标签的内容，赋值给value。

常用input的type属性值

text，文本输入框；
checkbox，勾选框，多选；
radio，单选框，对name属性一致的输入单选；
email，邮箱输入框，限制输入格式；
file，上传文件的输入；
number，数字输入框；
password，密码输入框；
range，滑动选取；

输入标签，至少要包含name和value属性，对于checkbox和radio类型的输入，要手动添加value值。

更多的input标签内容参考MDN

select、option，下拉选择标签

select标签包含option元素来作为选择的数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body>
  
  <form action="" method="GET">
  
    <label for="gender">性别</label>
    <select name="gender" id="gender" required>
      <option value="male">男</option>
      <option value="female">女</option>
      <option value="zhuzhuzhu">朱朱朱</option>
    </select>
    <button type="submit">提交表单</button>

  </form>

</body>
</html>

select标签，选择输入框；
option标签，选择输入的数据来源；

datalist 可下拉选择的输入标签

datalist标签可以做一个，可选择的输入框。

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body>
  
  <form action="" method="GET">

    <label for="area">省份:</label>
    <input type="text" list="areaList" name="area" id="area"/>
    <datalist id="areaList">
      <option value="陕西省">陕西</option>
      <option value="山西省">山西</option>
      <option value="四川省">四川</option>
      <option value="广东省">广东</option>
      <option value="广西省">广西</option>
    </datalist>

    <button type="submit">提交表单</button>

  </form>

</body>
</html>

与select一样，使用option标签来设置选择数据
datalist标签的id属性值，必须要对应，input标签list属性的值。

textarea 多行输入标签

使用textarea标签，可以实现多行输入，可以用于提交用户对网站的一些意见之类的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body>
  
  <form action="" method="GET">

    <label for="suggestion">意见:</label>
    <br/>
    <textarea 
    name="suggestion" 
    id="suggestion" 
    cols="30" 
    rows="10"
    placeholder="谢谢你的意见!"></textarea>

    <button type="submit">提交表单</button>

  </form>

</body>
</html>

cols和rows可以设定输入框的宽高；

HTML里element的类型

HTML里的标签可以分为两类，block和inline，也就是常说的块级元素和行内元素。

block元素

块级元素，会占据网页的一行。

宽度width=device width，或者说等于父元素宽度；
多个块级元素会从上到下排列。
常见的块元素有div、p、h1...h6、ol、ul、dl、table、address、form等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body>

  <h1>标题1</h1>
  <h1>标题1</h1>
  <h1>标题3</h1>

</body>
</html>

inline元素

行内元素，不会占据一行

它的宽度与内容有关 ;
行内元素的高度、宽度、行高及顶部和底部边距不可设置 ;
多个行内元素会从左到右排列；
常用的有span、img、a、lable、input、textarea、select、button等；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body>

<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">度娘</a>
<a href="http://www.baidu.com">百度一下</a>
<br/>
<img src="./1.jpg" alt="1">
<img src="./2.jpg" alt="2">

</body>
</html>

div、br、hr

<div></div>是一个通用的block容器，可以将元素包裹起来；
<br/>标签，换行；
<hr/>标签，水平线；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body>

<div>
  <a href="http://www.baidu.com">百度</a>
</div>
<div>
  <a href="http://www.baidu.com">度娘</a>
</div>
<div>
  <a href="http://www.baidu.com">百度一下</a>
</div>
  <hr/>
  <a href="http://www.baidu.com">百度</a>
  <br/>
  <a href="http://www.baidu.com">度娘</a>
  <br/>
  <a href="http://www.baidu.com">百度一下</a>
</body>
</html>

特殊符号

HTML中的特殊符号非常多，很多时候这些特殊符号可以代替引入图片样式，这非常的方便。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body>
<div>
&#9837;
&#9838;
&#9839;
&#119082;
&#119083;	
&#119084;
&#119085;
</div>
</body>
</html>

HTML的entity codes可以参考这个网站。

3.comment 注释

在HTML中的注释使用

<!--单行注释，我是注释-->
<!--多行，第一行
第二行
第三行-->

四、语义化

一般情况下，首页网页的HTML的文件命名为index.html，这种命名方式并不强制要求，但最好是这样命名。

最后是HTML标签的语义化，HTML中每个标签都有本身自带的默认样式，但不应该去追求样式来选择标签。比如某个段落的字，要加粗字体放大，就用h1标签替换p标签，这样做很不好。
要根据内容含义选择标签，是段落就用p标签，主要标题就用h1，次要标题就用h2，呈现效果就交给css。
样式应该由CSS来决定的，所以代码中应该尽量减少标签乱用，以及div标签的使用，而使用合适的带语义的标签，则会更好，代码也会变得易读。尽管在显示上没有差异，但标签语义化会在代码内带来很多好处。