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

随机推荐

【译】Rust宏：教程与示例（二）
原文标题:Macros in Rust: A tutorial with examples 原文链接:https://blog.logrocket.com/macros-in-rust-a-tutor ...
从Android手机的抢红包插件说起
前语最近,Android手机上的手机管家更新了新版本,提供了红包闹钟功能,只要有微信红包或者QQ红包,就会自动提醒.恰逢最近又在做UI自动化的工作,使用到UI Automator框架.几行代码,就可 ...
2019 GDUT Rating Contest II : Problem G. Snow Boots
题面: G. Snow Boots Input ﬁle: standard input Output ﬁle: standard output Time limit: 1 second Memory ...
DenseNet的个人总结
DenseNet这篇论文是在ResNet之后一年发表的,由于ResNet在当时引起了很大的轰动,所以DenseNet也将ResNet作为了主要的对比方法,读起来还是比较容易的,全篇只有两个数学公式,也 ...
攻防世界 reverse Guess-the-Number
Guess-the-Number su-ctf-quals-2014 使用jd-gui 反编译jar import java.math.BigInteger; public class guess ...
在 .NET Core 中使用 ViewConfig 调试配置
介绍 .NET Core 中的配置包含了多个配置提供程序,包括了 appsettings.json,环境变量,命令行参数等,还有一些扩展的自定义提供程序,比如说 ApolloConfig,AgileC ...
学习Typora来写博客
Typora学习标题分级知识详解标题分级可使用快捷键Ctry+数字键(1.2.3.4.5.6.0) 例如Ctry+1为一级标题,Ctry+2为二级标题,以此类推,总共可分为六个级别的标题,Ctr ...
生产中使用ssh-copy-id复制公钥到多台服务器
在系统运维的时候,可能免密码通过ssh方式登录到远程主机,这时就首先需要将本机的公钥复制到远程主机,用 ssh-copy-id 命令可以轻松做到. 对于单台远程主机,直接使用命令就可以了 # 生成密钥 ...
leetcode 刷题（数组篇）11题盛最多水的容器（双指针）
题目描述给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) .找出其 ...
6.2set用法
目录 1.set的定义 2.set容器内元素的访问 3.set常见使用的函数 set可以内部进行自动递增排序,且自动去除了重复元素 1.set的定义 set<typename> name; ...

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