HTML知识总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>ul的效果示例</h1>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>橙子</li>
    </ul>
    <h1>ol效果示例</h1>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>橙子</li>
    </ol>
    <h1>单一的li效果</h1>
    <li>苹果</li>
    <li>香蕉</li>
    <li>桃子</li>
    <li>橙子</li>
</body>
</html>

示例结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- li 的嵌套效果 -->
    <ul>
        <li>苹果
            <ul>
                <li>香蕉</li>
                <li>桃子</li>
            </ul>
        </li>
        <li>橙子</li>
        <li>橘子</li>
    </ul>
</body>
</html>

1、无序标签ul

<ul type="">无序标签

属性type可以为disc（实心圆）、circle（空心圆）、square（实心正方形）

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

    <!-- 无序列表ul的type属性 -->
    <ul type="disc">
        <li>苹果</li>
    </ul>
    <ul type="circle">
        <li>香蕉</li>
    </ul>
    <ul type="square">
        <li>橘子</li>
    </ul>
</body>
</html>

2、有序标签

如果在<ol start="50">，则可以控制开始的数字为50

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 有序列表ol标签的start属性 -->
    <ol start="50">
        <li>苹果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>橙子</li>
    </ol>
</body>
</html>

三、表格类标签

表格	table标签属性：width（设置表格宽度）、height（设置表格最小高度）、cellspacing(单元格之间的距离)、 border（设置表格边框宽度）例如：cellspacing="0"
表标题	caption标签
表头	thead标签使用<tr>代表行，th代表单元格属性：height，width不能用 align设置文字的位置，例：align="center"居中另外还有left（左对齐）、center（中间对齐）、right（右对齐） valign设置水平位置，例：valign="middle"水平居中还有bottom（底部）、top（顶部）
表内容	tbody标签使用<tr>代表，不要与表头弄混了，td代表单元格；属性与thread相同 rowspan：指定要跨的行数 colspan：指定要跨的列数
表脚注	tfoot标签

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格 -->
    <table border="10" style="text-align: center;">
        <!-- 表标题 -->
        <caption>学生信息</caption>
        <!-- 表格头部 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
                <td>男</td>
            </tr>
            <!-- 表格结尾 -->
            <tfoot>
                <tr>
                    <td></td>
                    <td></td>
                    <td>总人数：2</td>
                </tr>
            </tfoot>
        </tbody>
    </table>
</body>
</html>

注意，border属性设置的边框值，如果大于1，则只会对外边距进行加粗，内边框不会，如下设置为10

四、from表单

属性	作用
action	提交到的网址
target	是否另外打开一个网页 _blank：新打开一个。在新的未命名的浏览上下文中加载。 _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。 _self：在当前打开 _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。
method	`post`：指的是 HTTP POST方法；表单数据会包含在表单体内然后发送给服务器。 `get`：指的是 HTTP GET方法；表单数据会附加在 `action` 属性的 URL 中。 `dialog`：如果表单在<dialog>元素中，提交时关闭对话框。

示例代码：_blank是另一个页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com" target="_blank" method="">
        <div>
            请输入你的用户名：<input type="text"><br>
            请输入你的密码：<input type="password">
        </div>
            <button>提交</button>
    </form>
</body>
</html>

五、input标签

属性	解释说明	浏览器效果
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button、submit、reset	按钮
file	文件上传
hidden	定义隐藏的输入字段。（可以反爬虫的一种）
checked	默认单选值

六、其他类标签

1、a标签

a标签，以下划线为标记的跳转

属性：target，何处打开超链接

_blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。

_parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。

_self ：当前页面加载。（默认）

_top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

示例：

<a>标签的细节（注释）

对本地路径的跳转（尚硅谷课程截图）

其他引用跳转示例

电话tel:

邮箱mailto:

短信sms:

2、br标签

br标签表示换行符

3、hr标签

hr标签表示换行符。

4、pre标签

<pre>标签表示预定义格式文本。元素在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

示例代码：

5、select标签 - option

option属性	作用
selected	默认下拉框的初始值
value	提交的值

6、disabled 禁用标志

disabled 禁止输入，元素不可变、不能聚焦或与表单一同提交

例如input标签和button标签：

option标签：

7、label标签

属性	作用
label	标注后，当点击那个位置，会有光标在闪烁

使用方式：方法一中，绑定的是id

8、fieldset标签

作用：弄一个外文本框

用法

</fieldset>

9、iframe标签

作用：设置一个弹窗，可以链接外部网站，或者使用本地的图片、视频等

属性	作用
src	链接到其他的网站、地址等
frameborder	是否设置边框，0代表无边框，1代表设置边框
width、height	设置宽高

示例：

10、实体字符总结

其他字符实体的官方列表：HTML Standard (whatwg.org)

11、abbr标签

以下划虚线为标记的解释性文本。

示例：

12、address标签

就是简单标记定义文档的作者的标签，通常和其他元素被包含在footer元素.

示例：

13、area标签

与map标签同用，可以对所在图像设置一个可以跳转的位置，即点击图片所在的位置也可以实现跳转功能。

示例

14、常用的全局属性

15、常见的图片格式

jpg特点是占用空间小，但会有损图片像素，png是无损的，但占用空间更高。

内存占用(从小到大)：jpg<png<bmp

清晰度（从大到小）：bmp>png>jpg

七、HTML5概述

1、什么是HTML5？

HTML5是新一代的HTML标准，由2014年10月由万维网联盟（W3C）完成标准制定。

2、HTML5的优势

针对JavaScript，新增了很多可操作的接口；

新增了一些语义标签、全局属性；

新增了多媒体标签，可以很好的替代flash；

更加侧重语义化，对于SEO更友好；

可移植性好，可以大量应用在移动设备上；

3、HTML5兼容性

支持Chrome、Safari、Opera、Firefox等主流浏览器

IE浏览器必须是9及以上版本才支持HTML5，且IE9仅支持部分HTML5的标签

八、H5新增标签

1、新增布局标签

<header>	整个页面或部分区域的头部
<footer>	整个页面或部分区域的底部
<nav>	导航
<article>	文章、帖子、杂志、新闻、博客等，里面包含<section>标签，article是一整个文章，<section>是里面的一段内容。
<section>	页面中的某段文字或文章中的某段文字（里面文字通常里面包含标题），一般都用div较多
<aside>	侧边栏

一般这些标签都表示语义化的意思，标签本身没有什么特别的作用。

2、新增状态标签和属性

<meter>标签，显示进度条

属性	作用
high	规定最高值
low	规定最低值
max	规定最大值
min	规定最小值
optimum	规定最优值
value	规定当前值

<progress>标签，显示进度条

属性	作用
max	规定目标值
value	规定当前值

3、新增列表标签

<datalist>标签，与option连用

点击文本框出现提示

输入文字进行搜索

类似百度的搜索

标签<details>

要与<summary>连用

点击后

4、新增文本标签

标签名	语义
ruby	包裹需要注意的文字
rt	写注意，rt标签写在ruby标签里面

效果展示

5、新增表单控件属性

属性	作用
placeholder，占位符
required，必须填写
autofocus，文本框聚焦
autocomplete="on"，是否保存历史记录，需要打开浏览器的保存地址的设置
pattern="正则表达式"	示例："\w{8}",必须填写8位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- placeholder占位符 -->
    账号：<input type="text" required><br>
    <!-- required必填 -->
    密码：<input type="password" placeholder="请输入密码" ><br>
    <!-- autofocus -->
    文本聚焦测试：<input type="text" autofocus><br>
    <!-- pattern正则表达式 -->
    正则表达式测试：<input type="text" pattern="\w{8}"><br>
    <!-- autocomplete保存历史记录 -->
    保存历史记录：<input type="text" autocomplete="on"><br>
    <button>提交</button>
</body>
</html>

什么是正则表达式？

正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。

引用☞【正则表达式】详解及常用的使用方法详解_正则表达式的使用-CSDN博客

6、input新增type属性值

属性名	作用
type="email"	填写邮箱，可以判断是否是邮箱格式
type="url"	填写网址
type="number"	填写数值，可以搭step使用调整步长
type="search"	搜索框，侧重语义化
type="tel"	在手机端会如下图显示，只能输入数字
type="range"	设置滑动条
type="color"	自主调整颜色
type="date"	设置日期，年月日
type="month"	设置月份，只能是年月
type="week"	选择周数，选择每一年的第几周
type="time"	设置时间
type="datetime-local"	设置当前的时间

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input新增属性值</title>
</head>
<body>
   <form action="#">
    邮箱:<input type="email"><br>
    数值（步长2）：<input type="number" name="数值" step="2"><br>
    搜索：<input type="search" name="search"><br>
    滑动条：<input type="range" max="80" min="0"><br>
    颜色设置：<input type="color" name="颜色"><br>
    年月日：<input type="date" name="日期"><br>
    年月：<input type="month"><br>
    周数：<input type="week"><br>
    时间：<input type="time"><br>
    当前时间：<input type="datetime-local" name="当前时间"><br>
    <button>提交</button>
   </form>
</body>
</html>

7、视频标签

属性	作用
controls	视频的基础模块，声音、播放、全屏等
muted	视频默认静音
autoplay	自动播放，前提是视频必须是默认静音，与，muted连用，否则不会自动播放
loop	自动循环播放
poster="图片路径"	设置视频的封面
preload="none"，不进行预加载。 metadata，加载一部分内容 auto，根据浏览器启动缓存	预加载，还有另外两个属性

只有标签示例：

无法播放

添加属性示例：

8、音频标签

效果类似如上视频标签

属性	作用
controls	音频播放、静音等功能模块
muted	静音播放
loop	循环播放
preload="none"，不进行预加载。 metadata，加载一部分内容 auto，根据浏览器启动缓存	预加载

9、新增全局属性

属性名	功能
contenteditable	表示元素是否可以编辑 true：可编辑 false：不可编辑
draggable	表示元素可以被拖动 true：可拖动 fasle：不可拖动
hidden	隐藏元素
spellcheck	规定是否对元素进行拼写和语法检查 true：检查 false：不检查在浏览器时需要打开浏览器的拼写检查功能
contextmenu	规定元素的上下文菜单，在用户鼠标右键点击元素时显示
data-*	用于存储页面的私有定制数据

部分示例：

效果示例，添加文字“I Love You.”

注：部分引用了尚硅谷视频内容和其他博主文章

小城'

关注

31
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
HTML知识总结

是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。它不能编程，只能用来标记网页中的内容，通过不同的标签实现对应的功能。
复制链接

扫一扫