HTML详解

最新推荐文章于 2025-04-25 17:06:54 发布

卿...

最新推荐文章于 2025-04-25 17:06:54 发布

阅读量1.4k

点赞数 1

文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45845391/article/details/126025385

版权

HTML介绍 & 规范

介绍

HTML指的是超文本标记/标签语言（Hyper Text Markup Language）

专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在
超文本的意思有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利
比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，普通人是没有执法权的。
字母img只是普通的字母，没有什么特殊的含义。而被加上加括号之后，在网页的世界中，就具备了显示图片的作用

第一个网页

<html>
   <head>
      <title>亚洲最大的网站</title>
   </head>
   <body>
      hello,网页主体
   </body>
</html>

注意：

<html>标签它代表当前页面是一个HTML
<head>标签中可以声明HTML页面的相关信息
<body>标签中它主要是用于显示页面信息
标签要有开始，有结束，成双成对
开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭<br/
>
大多数标签它都具有属性，属性值要使用引号引起来。
HTML它本身是不区分大小写的

HTML 的使用

文件标签

<html>标签：代表当前书写的是一个HTML文档
<head>标签：存储的本页面的一些重要的信息，它不会显示

<title>标签：用于定义页面的标题

<body>标签：书写内容
<body>标签的属性
1.text用于设置文字颜色
2.bgcolor用于设置页面的背景色
3.background用于设置页面的背景图片

排版标签

HTML注释

    <!-- 注释  -->

换行标签

<br/> 标签就是一个换行（回车）标签

段落标签

 在<p>标签中的内容，会在开始与结束之间产生一个空白行，并且它会自动换行
 常用的属性 align 它的作用是设置段落中的内容对齐方式，可取值有left、right、center

水平线标签

<hr>标签会在页面上产生一个水平线
对于hr标签它由常用属性：

align:可取值有 left、right、center 代表水平线位置
size：代表水平线厚度（粗细）
width：代表水平线宽度
color：水平线的颜色

分区标签

 div 是一个块标签，用来进行布局
 普通的div并没有什么效果，肉眼也看不见，但div与css结合，就会更好的对页面进行排版
 div与span都是“容器”的作用，具体区别：

div会自动换行，我们也叫这样的标签为块级元素
span标签它不会自动换行，我们也叫它为行内元素
div：整体划分区块
span：局部划分

字体标签

<font>标签可以设置字体，字体的大小以及颜色，常用属性：

face：用于设置字体，例如：宋体隶书楷体
size：用于设置字体大小（大小默认设置：1-7）
color：用于设置字的颜色

注：
我们所看到的屏幕上的所有的颜色都是由红、绿、蓝这三种基色调混合而成的。

每一种颜色的饱和度和透明度都是可以变化的，用0~255的数值来表示，如纯红色(255,0,0),十六进制表示为#FF0000.
按这种表达方式，理论上我们可以得到255255255=16777216种颜色

使用十六进制，取值范围为#000000 ~ #FFFFFF(黑色到白色)。当颜色值为#CC3300时，可简化成#C30
```
        ~~~ 
        <body bgcolor="#666">
        ~~~
```
RGB颜色表示法:rgb(x,y,z)。x,y,z是0~255之间的整数。rgb字母大小写无所谓

             <body bgcolor="rgb(11,11,11)"

标题标签

给一段文字起一个标题

               <h1>------<h6>
               h1最大，h6最小，它们代表的是标题

注意：在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

格式化标签

<b>:字体加粗
<i>:字体倾斜
<del>:删除线
<u>:下划线
<font>:修饰字体

列表标记

OL:有序列表

type=‘A’：字母排序
type=‘l’：罗马排序
start="3’序列从几开始

UL:无序列表

type=“disc”:默认，实心圆
type=“square”:方块
type=“circle”:空心圆

图形标签

<img>它可以让我们在网页引入一张图片，常用属性：

src 代表的图片的路径
width图片的宽度
height图片的高度
border用于设置图片的边框
alt如果图片不可以显示时，默认显示的文本信息
title鼠标悬停图片上时，默认显示的文本信息

align图片附件文字的对齐方式，可取值有：

            left：把图像对齐到左边
            right：把图像对齐到右边
            middle：把图像与中央对齐
            top：把图像与顶部对齐
            bottom：把图像与底部对齐（默认）

超链接标签

        <a>标签，可以实现跳转到其他页面操作

超链接内容不仅可以是文本，也可以是图片等信息
常用属性：

href代表的我们要跳转的路径
target这个属性规定在何处打开这个链接文档，可取值：
_blank在新窗口中打开页面
_self默认。在本窗口打开页面

功能性链接：

发邮件：

<a href="mailto:XXXX@163.com">  联系站长</a>

QQ聊天窗口：

    <a href="tencent://message/?uin=27663386&Menu=yes">
           <img border="0" src="http://wpa.qq.com/pa?p=615050000:7"/>
     </a>

表格

     <table>:定义一个表格
            border：边框，取值是像素为单位
            width：代表的表格的宽度
            align：代表表格的对齐方式；
            取值
                  left左对齐表格
                  right右对齐表格
                  center居中对齐表格
            cellspacing：单元格间距（通常设置0表示单线表格）
      <tr>:表格中的行（Table Row）
           align代表表格的对齐方式；
           取值：
                  left：左对齐内容（默认值）
                  right：右对齐内容
                  center：居中的对齐方式(th元素的默认值)
       <td>:表格中的数据单元格（Table DataCell）
            colspan指示列的合并
            rowspan指示行的合并

表单标签

表单可以让我们录入信息携带到服务器端
简单的说通过表单可以将要提交的数据提交到指定的位置
但一个一个的提交，不方便，表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。
常见的登录页面、注册页面都离不开表单的应用

form 属性

action：整个表单提交的目的地
method：表单提交的方式
get：提交时，传输数据量少，明文提交
post：提交时，传输数据量大，密文提交

表单中的元素（控件）

 <input>元素的type属性
        text：默认值，普通的文本输入框
                  placeholder属性：提示文本
                  maxlength属性：最多能输入字符数量
        password:密码输入框
        checkbox：多选框/复选框
                          checked:被选中
         radio:单选按钮
         file：上传文件
         reset：重置按钮
         submit：提交按钮
         button：普通按钮 
    <select>:下拉列表/下拉框
                   <option>:列表中的项
                                  selected:被选中
    <textarea>：文本域（多行文本框）
                       可以通过cols和rows属性来规定textarea的尺寸，不过更好的办法是使用CSS的height和width属性

  <button>:按钮
       在form表单中，作用和submit一样
       不在form表单中，就是普通按钮

注意事项：
1.所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区别多个元素之间的不同）
2.单选框要想可以一次只选择一个，要具有相同的name值
3.所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值

框架标签

通过<frameset> 和 <frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面
注意，框架标签和body标签不共存。
“有你没我，有我没你”


<!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>Document</title>
</head>

    <frameset rows="10%,*,13%">

        <frame src="top.html"></frame>
        <frameset cols="15%,*">
            <frame src="left.html"></frame>
            <frame src="right.html"></frame>
        </frameset>
        <frame src="foot.html"></frame>

    </frameset>

</html>`

top.html、left.html、right.html、foot.html四个页面内容一样，稍微改下文字而已，以top.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>
    <h1> &hearts; 顶部导航&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区域</h1>
</body>
</html>

其他标签与特殊字符

<meta>标签

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

1.当前页面的字符编码 gbk：中文简体
2.这里的名字是viewport（显示窗口）
数据是文本内容content=“width=device-width,inital-scale=1.0”
也就是显示窗口的宽度是客户端的屏幕宽度（满屏），显示的文字和图形的初始化比例是1.0
3.每个电脑内置的IE版本是不一样得到，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染

通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面

<meta http-equiv="refresh" content="5;url=http://www.lagou.com">

注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径

<link>标签

后面我们会使用link标签来导入CSS
注意：link标签也必须写在<head>标签中

特殊字符

在这里插入图片描述

HTML5新特性

HTML4和HTML5的区别

H5包含H4

h5是h4的升级版本

1.大小写不敏感
（1）标签
（2）属性
（3）属性的值

<input tYpe="pasSWord"/>

2.引号可省略

<input type="password">
<input type=password>

3.省略了结尾标签

<p>哈哈哈哈哈哈
<p>哈哈哈哈哈哈

说是省略，其实运行起来，查看源代码，HTML是自动帮我们补全了

新增语义化标签

html4中，所有的容器标签95%都会使用div，div使用过多的话，很难区分彼此

section标签：表示页面中的内容区域，部分，地区
article标签：文章
aside标签：文章内容之外的
header标签：头部，页眉，页面的顶部
hgroup标签：内容与标题的组合
nav标签：导航
figure标签：图文并茂
foot：页脚，页面的底部

媒体标签

想要在网页上播放视频，就要使用<video>,属性有：

src：媒体资源文件的位置
controls：控制面板
autoplay：自动播放（谷歌失效，360浏览器都可以）
loop：循环播放

<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>

新增表单控件

表单的控件更加丰富了

<inpu>,修改type属性
color:调色板
date：日历
month：月历
week：周历
number：数值域
min：最小值（默认值是1）
max:最大值（默认值无上限）
step：递增量
range：滑块
search：搜索框（带x号，可一键删除框中内容）
进度条<progress/>
高亮<mark>
联想输入框<datalist>（模糊查询）
选项<option>