HTML重要知识合集

HTML

[](#html是什么)HTML是什么？

HTML（Hyper Text Markup Language）超文本标记语言。超文本为超级文本，可以包含：图片，音频，视频，超链接，表格等等。

历史更新迭代，html的历史

HTML5 是最新版本 HTML4.01 是上一个版本

document 文档

c/s架构模式客户端/服务器

有LOL，淘宝

需要不断维护客户端

b/s架构模式浏览器/服务器 brower 浏览器

有QQ空间，微博

方便快捷简便

以下是HTML文档的初始格式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>这是我的第一个文档</title>
    </head>
    <body>
        
    </body>
</html>

[](#解析如下)解析如下

<!DOCTYPE html> 声明式语句，声明一下当前的html版本是HTML5
<title>这是我的第一个网页</title> 标题标签
<meta charset="UTF-8"> 说明一下当前文档的解读编码为中文
<body></body> 网页中能看到的内容，写在body中
<head></head> 通常放置网页的设置
<html></html> 所有标签的根标签
 注释快捷键 ctrl+/
- *

[](#注意事项)注意事项

标签是分类型的单标签双标签
双标签 <标签名称>标签的内容</标签名称> <开始标签></结束标签>
单标签 <单标签 />
属性标签是有属性的 <开始标签的标签名称属性=“属性值” name=value> 标签名称属性之间以空格区分
标签是有嵌套关系的注意正确嵌套
标签是有关系的父子关系兄弟关系后代关系

标签和转义符相关知识

  是空格(转义符)
< > 分别是< 和 >
<p></p> 段落标签
<span></span> 纯粹的文本标签
<img> 图片标签
src:图片资源(source) 相对路径（本地图片）绝对路径（线上图片） base64
width height
- px
- 百分比：以父标签的宽度为依赖
alt 图片加载不出来时显示出来的文字
title 鼠标移入时，图片显示出来的文字

HTML标签相关知识及颜色分类

[](#音频-视频)音频、视频

    <audio controls="controls" src=""></audio>
    <video controls="controls" src=""></video>
    <!--controls 控件是否可见-->

因为不同浏览器显示效果不同的原因，将在第二阶段详细解释。

[](#有序列表)有序列表

代码如下

    <!--type的值可以为，“a”,“A”,“i”,“I”,“1”-->
    <ol type = "1">
        <li></li>
        <li></li>
        <li></li>
    </ol>

效果实现如下：

1.
2.
3.

[](#无序列表)无序列表

代码如下

    <!--type的值可以为，square 正方形 desc 实心圆 circle 空心圆 none-->
    <ul type = "none">
        <li>明天放假</li>
        <li>好开心</li>
        <li>Yeah</li>
    </ul>

效果实现如下：

明天放假
好开心
Yeah

[](#自定义列表)自定义列表

代码如下

    <!--起始于<dl>标签，每个列表项以<dt>开始，列表项注释<dd>-->
    <dl>
        <dt>我是王超</dt>
        <dd>来自山西临汾</dd>
    </dl>

效果实现如下：

我是王超
    来自山西临汾

[](#超链接标签)超链接标签

    <!--href可以是本地链接，也可以是线上链接
        target是指打开当前网页的方式，self为默认自身窗口打开，_blank为在新窗口打开
    -->
    <a href="http://www.baidu.com" target="self">请跳转到百度</a>

    <!--id 属性 
        是一个全局属性，每个标签都可以有的属性
        id表示唯一性  每个标签只有一个id属性  id属性不可以重复  禁止以数字开头
    -->

[](#在当前页面进行跳转)在当前页面进行跳转

    <!--同页面跳转
        需要有两个值：
            href:#id;
            要跳转的地方要有id属性
    -->
    
    <a href = "#hello">跳转到指定位置</a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p id = "hello">你好，大舅哥</p>

[](#表格)表格

代码如下

    <table border="1px">
        <!--tr代表行-->
        <tr>
            <!--colspan横跨多少列-->
            <!--td代表列-->
            <td colspan="5">swt2007开班</td>
        </tr>
        <tr>
            <!--th表示加粗-->
            <th>序号</th>
            <th>学生姓名</th>
            <td>联系方式</td>
            <td>毕业院校</td>
            <td>专业</td>
        </tr>
        <tr>
            <td>1</td>
            <td>杨涛</td>
            <td>1234567897</td>
            <td>山大</td>
            <td>软工</td>
        </tr>
    </table>
    
    <table border="1px">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <!--rowspan竖跨多少行-->
            <td rowspan="3">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
        </tr>
    </table>
    
    <!--cellpadding 单元格内容和边框中间的间距
        cellspacing 单元格和单元格之间的间距
    -->
    <table border="1px" cellpadding="10" cellspacing="20">
        <!--表格的标题-->
        <caption>个人简历</caption>

[](#表单)表单

代码如下

    <!--表单  注册-->
    <!--
        注册
        搜索
    -->
    <span>用户名：</span><input type="text"><br>
    <span>密码：</span><input type="password"><br>
    <label>
        <input type="radio" name="sex" checked="checked">男
    </label>
    <label>
        <input type="radio" name="sex">女
    </label>
    

    <!--
        <input>单行文本框
        <input type="password">密码框
        <input type="radio">单选框
            如何让单选框关联起来？
                给这些需要关联的单选框一个 name属性  属性值相等
            如何给可以选择的框 默认选中效果？
                给其添加 checked属性 属性值为checked
            如何能点击文本实现单选效果？
                给其外面添加label标签，括起来

    -->

    <!--多选框-->
    <p>请说出您的兴趣爱好有哪些？</p>
    <label>
        <input type="checkbox" checked="checked">读书
    </label>
    <label>
        <input type="checkbox">看报
    </label>
    <label>
        <input type="checkbox">嗑瓜子
    </label>

[](#下拉列表)下拉列表

代码如下

    <!--下拉列表-->
    省：
    <select>
        <option>山西省</option>
        <option>陕西省</option>
        <option>河南省</option>
    </select>

    市：
    <select>
        <option>太原</option>
        <option>大同</option>
        <option>忻州</option>
    </select>
    
    <!--文本域-->
    <!--查询 如何设置文本域宽高，如何禁止拉伸-->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    
    <!--按钮-->
    <button>提交</button>
    <!--value 值 也就是input的内容（value的值就是框框里的内容）-->
    <input type="button" value="确定">

[](#标题标签)标题标签

h1-h6 代码如下

     <!--标题（h1-h6）-->
    <h1>我是最大的标题</h1>
    <!--h4和正常文本的字体大小一致-->
    <h4>标题</h4>
    <p>正常文本</p>

    <!--标签是有权重的-->

实现效果如下：

[](#我是最大的标题)我是最大的标题

[](#标题)标题

正常的文本

[](#标签的分类)标签的分类

块元素（block）：单独占据一整行，可以改变宽高 ul ol p 默认宽度：父级容器的100%
内联块元素（inline-block）：不独占整行，可以改变宽高；input button
内联元素/行内元素（inline）：不独占整行，不可以改变宽高；span a 宽度：取决于自身内容的宽度

[](#颜色的分类)颜色的分类

颜色：

三种方式

1、英文单词：red,black,white
2、16进制 0-9 a-f     #000000(黑色) #ff0000(红色) #00ff00(绿色) #ffffff(白色)
    三原色 rgb        #000          #f00         #fff
    越接近0就越深，越接近f就越浅
3、rgb()   每个数值的取值范围是0-255      rgb(0,0,0)   rgb(255,255,255)

HTML重要知识合集

HTML

[](#html是什么)HTML是什么？

[](#解析如下)解析如下

[](#注意事项)注意事项

标签和转义符相关知识

HTML标签相关知识及颜色分类

[](#音频-视频)音频、视频

[](#有序列表)有序列表

[](#无序列表)无序列表

[](#自定义列表)自定义列表

[](#超链接标签)超链接标签

[](#在当前页面进行跳转)在当前页面进行跳转

[](#表格)表格

[](#表单)表单

[](#下拉列表)下拉列表

[](#标题标签)标题标签

[](#我是最大的标题)我是最大的标题

[](#标题)标题

[](#标签的分类)标签的分类

[](#颜色的分类)颜色的分类

王超

引用和评论

Vue3.0与Vue2.X版本的区别

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合