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

冷知识

万维网之始：第一个网站·蒂姆伯纳斯-李

HTML5

html5文档类型声明:

头部： <!doctype html>

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

UTF-8：万国码

<head>

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

</head>

常用html实体

w3school-html实体大全

显示结果 描述 实体名称
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
" 引号 &quot
' 撇号 &apos; (IE不支持)
￠ 分（cent） &cent;
£ 镑（pound） &pound;
¥ 元（yen） &yen;
€ 欧元（euro） &euro;
§ 小节 &sect;
版权（copyright） &copy;
注册商标 &reg;
商标 &trade;
× 乘号 &times;
÷ 除号 &divide;

重要标签

️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从入门到深入（复习查漏向的更多相关文章

  1. 【JavaScript】JS从入门到深入（复习查漏向

    [JavaScript]JS从入门到深入(复习查漏向 pre 精细得学过一遍JS后才发现,原来之前CTF中有些nodejs的题目以及一些游戏题的payload就变得很好理解了. 基础知识 ECMASc ...

  2. 【CSS】CSS3从入门到深入（复习查漏向

    CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...

  3. 《CSS权威指南》基础复习+查漏补缺

    前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...

  4. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  5. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  7. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  8. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  9. 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

随机推荐

  1. 【python+selenium的web自动化】- 控制浏览器的常用操作

    如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html 前言 ​ 本文主要介绍se ...

  2. HDU(1420)Prepared for New Acmer(JAVA语言)【快速幂模板】

    思路:快速幂裸题. //注意用long,否则会超范围 Problem Description 集训进行了将近2个礼拜,这段时间以恢复性训练为主,我一直在密切关注大家的训练情况,目前为止,对大家的表现相 ...

  3. tips 【总结】

    需求 移入a标签把对应的详情显示出来并且根据位置判断,当前详情是否超出父级可视区范围,如果超出就定位的距离方向应该正好在父级可视区范围内 需求分析: 需要用到: offsetLeft   获取外边框到 ...

  4. iovec结构体使用说明

    http://blog.163.com/lichuan0502@126/blog/static/9933534820111033228285/

  5. Kubernetes声明式API与编程范式

    声明式API vs 命令时API 计算机系统是分层的,也就是下层做一些支持的工作,暴露接口给上层用.注意:语言的本质是一种接口. 计算机的最下层是CPU指令,其本质就是用"变量定义+顺序执行 ...

  6. 给我一个shell我能干翻你内网

    0x00 前言 在去年小菜鸡学了点内网知识就闲着没事跑点jboss的站看看,在经历过很多次内网横向失败之后终于算是人生圆满了一把,阿三的站一般进去之后很难横向,不知道是不是我太菜的原因,反正阿三的站能 ...

  7. OO第二单元作业——魔鬼电梯

    简介 本单元作业分为三次 第一次作业:第一次作业要实现单部简单电梯,停靠所有楼层,无载客容量,性能分考量电梯运行时间. 第二次作业: 第二次作业实现多部电梯,电梯数量由初始化设定,每部电梯都停靠所有楼 ...

  8. 对不起，“下一代ERP”仍旧是现在的ERP

    最近数字化转型太火了,到处都是相关数字化的网文.很多人又说在数字化转型时代,ERP早就落伍了云云,取而代之的是什么"下一代ERP",叫什么"ARP"." ...

  9. 一文简述Java IO

    Java IO 本文记录了在学习Java IO过程中的知识点,用于复习和快速查阅,不够详细的部分可能会在后续补充. 什么是流 流:内存与存储设备(外存)之间传输数据的通道 IO:输入流输出流(如rea ...

  10. NDEBUG与assert

    当宏NDEBUG定义在assert的头文件之前,会使assert.trace这类调试函数失效, 需要注意的是#define NDEBUG必须放在这些函数的头文件之前,放在它们的 头文件后面的话就相当于 ...