【HTML】HTML5从入门到深入（复习查漏向

HTML5从入门到深入（复习查漏向

冷知识

HTML5

html5文档类型声明:

头部： <!doctype html>

字符集(charset)：编码与解码采用的规则

UTF-8：万国码

<head>

	<meta charset="UTF-8"> <!-- gb2322 -->

</head>

常用html实体

w3school-html实体大全

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`&quot`
'	撇号	`' (IE不支持)`
￠	分（cent）	`¢`
£	镑（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
	版权（copyright）	`©`
	注册商标	`®`
	商标	`™`
×	乘号	`×`
÷	除号	`÷`

重要标签

️HTML决定网页结构，因此多注意标签意义，而不是决定大小形态颜色等属性

`<meta> 元标签`

属性Attribute	用法Usage	例Exaples
name - content	一起使用设置网站元数据	`<meta name="keywords" content="xx,yy">`、`<meta name="description" content="xx.com-zz">` 为百度等搜索引擎提供`关键字key`以及`描述description`
charset	定义网站字符编码形式	`utf-8`、`gb2322`
http-equiv	容纳一些特殊 `HTTP headers`	`<meta http-equiv="refresh" content="2;url=https://www.baidu.com">` 2秒后跳转指定url

块元素包裹行内元素，块元素默认上下换行

`布局标签-结构化语义标签`

标签名	语义
header	网页头部
footer	网页底部
main	网页主体
nav	网页导航
aside	网页侧边栏
article	文章
section	独立区块
div	块（主要使用
span	同div（行内元素，其他是块元素

`列表`

标签（均为块元素	语义
ul	无序列表
ol	有序列表
li	列表项
dl	定义列表
dd	dl解释说明
dt	dl内容

`超链接-<a>`

Attribute	语义
href	链接url
target	链接显示窗口（如默认本窗口 `_blank => 新窗口`
href="#`id`"	`id：`标签唯一标识，重复则第一个生效
--	跳转到当前页面指定`id`位置
href="`javascript:;`"	占位

`图片元素-<img>`

自结束标签
属性Attribute 语义

src ≈href

alt 图片获取失败会默认显示
图片形式：gif、png、jpg、webp、base64

<img src="data:image/jpeg;base64,···">

`内联框架-<iframe>`

属性Attribute	语义
src	≈href
width-height	定义长宽
`frameborder`	定义边框厚度

`音视频`

<audio src="your music" controls autoplay loop></audio>

<audio controls autoplay loop>

	<source src="···" type="···">

	<embed src="···" ··· width ···>

</audio>

<video controls autoplay loop>

	<source src="···" type="···">

	<embed src="···" ··· width ···>

</video>

// controls 用户可控

// autoplay 自动播放

// loop 循环播放

`table`

<table border="1" width='50%' align="center">

    <!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->

    <tr>

        <!-- 在tr中使用th表示表头

        <th>B1</th>

        <th>C1</th>

        <th>D1</th>

    </tr>

    <tr>

        <!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格

        <!-- rowspan 纵向的合并单元格 -->

        <td rowspan="2">B1</td>

        <td>C1</td>

        <td>D1</td>

    </tr>

    <tr>

        <!--

            colspan 横向的合并单元格

         -->

        <td colspan="2">C4</td>

    </tr>

</table>

结构固定-长表格

<table border="1" width='50%' align="center">

    <!--

        可以将一个表格分成三个部分：

            头部 thead

            主体 tbody

            底部 tfoot

            这三部分页面显示位置固定，论出现在html中位置如何

     -->

    <thead>

        <tr>

            <th>日期</th>

            <th>收入</th>

            <th>支出</th>

            <th>合计</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>2000.1.1</td>

            <td>500</td>

            <td>200</td>

            <td>300</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td></td>

            <td></td>

            <td>合计</td>

            <td>300</td>

        </tr>

    </tfoot>

</table>

`form`



<!-- action 表单要提交的服务器的地址 -->

<form action="target.html">

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

    <br><br>

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

    <br><br>

    <!-- 当选按钮选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器

            - checked 可以将单选按钮设置为默认选中 -->

    单选按钮 <input type="radio" name="hello" value="a">

    <input type="radio" name="hello" value="b" checked>

    <br><br>

    多选框 <input type="checkbox" name="test" value="1">

    <input type="checkbox" name="test" value="2">

    <input type="checkbox" name="test" value="3" checked>

    <br><br>

    <!-- 下拉列表 -->

    <select name="haha">

        <option value="i">选项一</option>

        <option selected value="ii">选项二</option>

        <option value="iii">选项三</option>

    </select>

    <br><br>

    <!-- 提交按钮 -->

    <input type="submit" value="注册">

    <!--    <input type="file" accept="">-->

    <!--        <input type="image" >-->

    //button按钮无效果，需要其他效果需要自行设置

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

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

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

</form>

//常用属性

autocomplete="off" 关闭自动补全

readonly 将表单项设置为只读，数据会提交

disabled 将表单项设置为禁用，数据不会提交

autofocus 设置表单项自动获取焦点

其他标签查询文档

【HTML】HTML5从入门到深入（复习查漏向的更多相关文章

【JavaScript】JS从入门到深入（复习查漏向
[JavaScript]JS从入门到深入(复习查漏向 pre 精细得学过一遍JS后才发现,原来之前CTF中有些nodejs的题目以及一些游戏题的payload就变得很好理解了. 基础知识 ECMASc ...
【CSS】CSS3从入门到深入（复习查漏向
CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块形式内联样式 ...
《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...
Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素可以理解为语义话标记,比如:以前这么写&l ...
03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

随机推荐

进阶宝典一|SqlServer数据库自动备份设置
很多人都没机会接触到数据库备份,经常操作的要么是数据库管理员,要么是项目负责人.那是不是说数据库备份就不用学了? 不,其实作为开发人员应该要了解数据备份,数据备份的手段有很多:软件备份.脚本备份.其他 ...
Spring Boot 启动过程
一切从SpringApplication.run()开始,最终返回一个ConfigurableApplicationContext 构造了一个SpringApplication对象,然后调用它的run ...
css整理之-----------技巧、黑魔法
css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. ...
HDU_6590 Code 【凸包】
一.题目 Code 二.分析题目描述了一大堆东西,就是想问二维空间里,能不能确定$d w_1 w_2$使得函数满足$f(x_1,x_2) = y$,并且$sign(x)$函数是一个信号函数,只 ...
王兴：为什么中国的 ToB 企业都活得这么惨？
本文节选自美团创始人王兴的内部讲话.在讲话中,王兴罕见地分享了他对全球和中国宏观经济的理解,谈了他对 TO B 业务的深度思考. 我们今天讲一下餐饮生态业务部,以及对我们整个公司在整个业务发展过程中的 ...
P1149_火柴棒等式（JAVA语言）
题目描述给你n根火柴棍,你可以拼出多少个形如"A+B=C"的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-90−9的拼法如图所示 ...
C++11正则表达式
java例题_11 求不重复数
1 /*11 [程序 11 求不重复数字] 2 题目:有 1.2.3.4 这四个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 3 程序分析:可填在百位.十位.个位的数字都是 1.2.3. ...
学习一下 SpringCloud （六）-- 注册中心与配置中心 Nacos、网关 Gateway
(1) 相关博文地址: 学习一下 SpringCloud (一)-- 从单体架构到微服务架构.代码拆分(maven 聚合): https://www.cnblogs.com/l-y-h/p/14105 ...
BUUCTF 基础CODE REVIEW
1.说明: 题目来自于BUUCTF 的基础部分,内容就如题,是一个代码审计.代码如下: <?php /** * Created by PhpStorm. * User: jinzhao * Da ...

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`&quot`
'	撇号	`' (IE不支持)`
￠	分（cent）	`¢`
£	镑（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
	版权（copyright）	`©`
	注册商标	`®`
	商标	`™`
×	乘号	`×`
÷	除号	`÷`

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`&quot`
'	撇号	`' (IE不支持)`
￠	分（cent）	`¢`
£	镑（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
	版权（copyright）	`©`
	注册商标	`®`
	商标	`™`
×	乘号	`×`
÷	除号	`÷`

【HTML】HTML5从入门到深入（复习查漏向

HTML5从入门到深入（复习查漏向

冷知识

HTML5

重要标签

<meta> 元标签

布局标签-结构化语义标签

列表

超链接-<a>

图片元素-<img>

内联框架-<iframe>

音视频

table

form

【HTML】HTML5从入门到深入（复习查漏向的更多相关文章

随机推荐

热门专题

`<meta> 元标签`

`布局标签-结构化语义标签`

`列表`

`超链接-<a>`

`图片元素-<img>`

`内联框架-<iframe>`

`音视频`

`table`

`form`

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`&quot`
'	撇号	`' (IE不支持)`
￠	分（cent）	`¢`
£	镑（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
	版权（copyright）	`©`
	注册商标	`®`
	商标	`™`
×	乘号	`×`
÷	除号	`÷`