【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:输入类型用于应该包 ...

随机推荐

Java Swing 自定义Dialog确认对话框
Java Swing 自定义Dialog 需求:当点击JFrame窗口的关闭按钮时,弹框询问是否确定关闭窗口,如果是则关闭程序,否就让弹框消失什么也不做(使用Dialog). 分析:虽然Java提供了 ...
JS五种绑定彻底弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)
目录壹 ❀ 引贰 ❀ this默认绑定叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失肆 ❀ this显式绑定伍 ❀ new绑定陆 ❀ this绑定优先级柒 ❀ 箭头函数的this ...
CentOS7.8搭建STF
安装命令插件(rz.sz): yum install -y lrzsz wget unzip zip编辑配置文件导致命令无法使用时:export PATH=/usr/local/sbin:/usr/l ...
《进击吧！Blazor！》系列入门教程第一章 7.图表
<进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力. 视频地址:https://s ...
beego框架panic: 'GetSecurityInf' method doesn't exist in the controller CorporateInfcontroller问题解决
在使用beego框架时,出现类似于panic: 'GetSecurityInf' method doesn't exist in the controller CorporateInfcontroll ...
2020-2021 ACM-ICPC, Asia Seoul Regional Contest
C. Dessert Café: 题意: 给你一个N个节点的树,树上有m个房子,问树上有几个节点是在两个房子之间的. 思路:我们发现只要是该节点的子树里包括了所有节点或者只有一个节点,那么这个结点肯定 ...
Centos7安装以及设置Redis详细步骤
一.Redis安装: 1.指定文件夹下下载redis安装包: [root@bogon ~]# mkdir /usr/local/soft/redis [root@bogon ~]# cd /usr/l ...
java例题_42 求满足809*??=800*??+9*??+1的？？的值
1 /*42 [程序 42 求数字] 2 题目:809*??=800*??+9*??+1 3 其中??代表的两位数,8*??的结果为两位数,9*??的结果为 3 位数.求??代表的两位数,及 809* ...
jQuery核心函数和静态方法
jQuery核心函数从jQuery文档中可以看出,jQuery核心函数一共3大类4小类 jQuery(callback) 当DOM加载完成后执行传入的回调函数 <script> $(fu ...
Distributed | Raft
1. 复制状态机一致性算法是在复制状态机的背景下产生的.在这种方法下,一组服务器的状态机计算相同状态的相同副本,即使某些服务器宕机,也可以继续运行. 复制状态机通常使用复制日志实现,每个服务器存储一 ...

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`&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）	`©`
	注册商标	`®`
	商标	`™`
×	乘号	`×`
÷	除号	`÷`