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

随机推荐

super_curd组件技术点总结
1.基于包的导入的方式实现单例模式 # test1.py class AdminSite(object): def __init__(self): self.registry = {} self.ap ...
Java工程师核心书单推荐
随便打开一个招聘网站,看看对高级Java工程师的技能要求. 抛开其它的经验能力等等,单纯从技术,或者说知识上来讲,可以发现一些共通的地方. Java基础计算机基础数据库,SQL/NoSQL 常用开 ...
PTA 中序输出度为1的结点
6-9 中序输出度为1的结点 (10 分) 本题要求实现一个函数,按照中序遍历的顺序输出给定二叉树中度为1的结点. 函数接口定义: void InorderPrintNodes( BiTree T ...
PTA 求二叉树的深度
6-7 求二叉树的深度 (6 分) 本题要求实现一个函数,可返回二叉树的深度. 函数接口定义: int Depth(BiTree T); T是二叉树树根指针,函数Depth返回二叉树的深度,若树为 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
Mysql之索引选择及优化
索引模型哈希表适用于只有等值查询的场景,Memory引擎默认索引 InnoDB支持自适应哈希索引,不可干预,由引擎自行决定是否创建有序数组:在等值查询和范围查询场景中的性能都非常优秀,但插入和删 ...
OCPC产品初探
OCPC即Optimization CPC,今天我们就来看看它的Optimizaton在哪儿. 在广告模型初探(一)中我们就曾提到过,互联网广告的本质其实就是流量的买卖.是广告主.媒体方以及用户三方之 ...
使用 dynamic 类型让 ASP.NET Core 实现 HATEOAS 结构的 RESTful API
上一篇写的是使用静态基类方法的实现步骤: http://www.cnblogs.com/cgzl/p/8726805.html 使用dynamic (ExpandoObject)的好处就是可以动态组 ...
Android学习之RecyclerView初探究
•RecyclerView基本用法 RecyclerView是新增的控件,为了让 RecyclerView 在所有 Android 版本上都能使用; Android 团队将 RecyclerView ...
201871010129-郑文潇实验二个人项目—《D{0-1}背包问题》项目报告
项目内容课程班级博客链接课程链接这个作业要求链接 [作业要求](https://www.cnblogs.com/nwnu-daizh/p/14552393.html) 我的课程学习目标 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）	`©`
	注册商标	`®`
	商标	`™`
×	乘号	`×`
÷	除号	`÷`