注意：标红的需要重视，其余有大概印象即可，如果在工作学习过程中遇到其他不明白的html知识再去完善和记下来。HTML死记没用，多去敲代码才能记住，不要在HTML花费太多时间，元素和属性用的多就自然记下来了。

一、需要熟悉的重要标签

1、段落标签p
2、标题标签h1-h6
3、图像标签img
属性：路径src、代替文本alt

4、链接标签a
属性：href、target="_blank"；锚文本应用href="#mao"

5、head子标签：
1.title
2.base默认链接标签,href
3.link引用标签，规范化引用css：<link rel="stylesheet" href="mystyle.css">
4.style样式标签
5.meta元数据标签，属性name、content；TDK优化：title、name="descrption"、name="keywords"

6、script脚本标签，规范化引用js：<script src="./xx.js"></script>

7、列表标签：

1.无序标签ul>li
2.有序标签ol>li
3.自定义标签dl>dt>dd
标签常用属性：list-style: none;

8、表格标签table：
表格结构化标签：thead、tbody、tfooter
表格的行、列：tr行、th表头列、td列
常用属性：
1.单元格合并colspan、rowspan
2.单元格内边距cellpadding，会撑大格子
3.单元格外边距cellspacing
4.单元格合并cell-collapse: collapse;
5.边框合并border-collapse: collapse;

9、表单标签form
一、属性：
1、action表单提交的服务器地址
2、method: post、get；

二、子元素——表单元素input
1、input重要属性：
1.name变量名
2.value变量值
3.autofocus表单元素自动聚焦
4.placeholder提示内容，通常用于文本框，密码框
5.step步长，在数字文本框用得上
6.disable禁用
7.readonly文本只读
8.type表单控件类型：
1.text文本框
2.password密码框
3.radio单选
4.checkbox多选
5.submit提交
6.reset重置
7.select下拉菜单
8.textarea文本域，文本域禁止拖拽resize: none
9.button自定义按钮
10.file文件上传
——以下是H5新增input属性值———————
11.color颜色
12.date年月日，时间相关还有很多，有需要可查阅文档
13.number数字
14.range条状
15.tel电话号
16.url
17.hidden隐藏域
18.search搜索框

三、表单验证相关属性：
1、form属性：
1.表单跳过验证novalidate="novalidate"
2.文件编码enctype="mulitpart/form-data"，如果有file控件需要添加这属性
2、input属性：
1.multiple是否多选，如上传多个文件
2.max、min规定数值最值
3.maxlength文本最大字符量
4.required必填
5.pattern格式正则验证
6.formnovalidate该表单元素跳过验证

10、格式化标签:
粗体<b>
斜体<i>
插入字，底部加线<ins>
上标<sup>
下标<sub>
删除字<del>
定义计算机代码 <code>
预格式文本<pre>
着重文字<em>
定义小号字<small>

11、插件标签：

1、object: <object width="100%" height="500px" data="snippet.png">图片丢失</object>
data属性值指定插件文件
2、embed：<embed src="audi.jpeg" /> 单标签，不能使用替代文本

H5新增加标签：

1、网页结构语义化标签（8个）：

header头部
nav导航
article文章
section章节
aside侧边栏
figure文章的补充部分
figcaption，figure标签内的标题
footer页脚

２、自定义图形标签canvas，用js绘画

3、可伸缩矢量图形svg，用css进行绘画

4、math数学语言标签，可以实现公式的书写

5、媒体标签：

1、视频标签video属性：自动播放autoplay、视频控件controls、长宽、循环否loop、静音播放muted、预览图poster、文件路径src

2、音频标签audio
属性：自动播放autoplay、音频控件controls、循环loop、预加载preload、文件路径src

3、以上两者的子标签source，单标签，属性：src

6、自动完成列表datalist：input中list和datalist中id属性值保持一致
<input list="browsers" name="browser" type="text">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

二、三个重要实体字符

1、空格    
2、< < <
3、> > >

三、零散知识点：

一、HTML零散知识点：

一、head标签的内容不在网页内显示，用于描述网站，是搜索引擎查找网页的重要内容和依据，该部分内容对于网页的搜素引擎优化应用非常重要，而body负责展示浏览器内容。

二、全局属性：指的是所有标签都可以使用的属性。如文字颜色属性color，p、h1、div、span、input等等都可以使用的属性。

三、分清块级、行内元素、行内元素各自特点

二、其他知识点：

一、两类软件系统结构：
1、B/S架构：浏览器/服务器
        缺点：速度慢、体验不好、界面不炫酷
        优点：升级方便，只升级服务端代码即可，维护成本低
        应用：办公系统多采取B/S系统架构

2、C/S架构：客户端/服务器
缺点：升级麻烦，维护成本高，如王者荣耀更新
常见C/S架构系统：QQ、微信、支付宝

四、HTML规范（参照京东）

1、文档声明：<!DOCTYPE html>

2、<html lang="zh-CN">

3、字符编码<meta charset="UTF-8">，html文档的字符编码。

4、单元素不加“/”，如<br>；元素、属性和属性值统一小写，属性值要加双引号，布尔属性值需要当成正常属性编写，如checked="checked"。

5、不需要为引入的js、css文件设置type属性，如：<link rel="stylesheet" href="">、
<script src=""></script>

6、“<”、">"用字符编码表示<、>

7、纯数字的输入框用input的tel表单元素，<input type="tel">

8、代码嵌套：块级元素独立一行，段落p标题h元素只能嵌套行内元素

9、注释：

1.单行注释—
2.模块注释：在模块开始的上一行<! S 模块A -->，在模块结束的下一行<! E 模块A -->，模块必须引用模块注释标明，且每个模块之间要空一行。
3.嵌套子模块注释：子模块注释只需要在模块的结束的下一行编写

10、图片规定：
1.PC端单张图片<=200KB，移动平台单张图片<=100KB。
2.img元素不需要行内宽高属性，如<img src="" alt="">，alt属性需要写上。
3.图片的引入url路径不需要加双引号，如background-image: url(xx.png)。

五、命名规则

1、项目、html、css、js文件都使用小写命名，项目文档需要创建css、js、img文件夹。

2、html、css、js命名使用小写，用下划线_连接，如：jdc_list.html。

3、元素类名命名使用小写，用下划线_连接，祖先模块类名不加下划线_，除了公共模块，
如：父模块<div class="content">，子模块<div class="content_left" 。

4、图片命名规范：图片业务 + 图片功能 + 模块名称 + 图片精度（不大懂），如公用模块：
wx_mod_btn_goodlist.png，非公用模块wx_btn_goodlist.png；图片功能和哪个模块的名称必须。如：background_header.png。

六、ClassName类名常用推荐

about   关于
account   账户
arrow   箭头图标
article   文章
aside   边栏
audio   音频
avatar   头像
bg,background   背景
bar   栏（工具类）
branding   品牌化
crumb,breadcrumbs   面包屑
btn,button   按钮
caption   标题，说明
category   分类
chart   图表
clearfix   清除浮动
close   关闭
col,column   列
comment   评论
community   社区
container   容器
content   内容
copyright   版权
current   当前态，选中态
default   默认
description   描述
details   细节
disabled   不可用
entry   文章，博文
error   错误
even   偶数，常用于多行列表或表格中
fail   失败（提示）
feature   专题
fewer   收起
field   用于表单的输入区域
figure   图
filter   筛选
first   第一个，常用于列表中
footer   页脚
forum   论坛
gallery   画廊
group   模块，清除浮动
header   页头
help   帮助
hide   隐藏
hightlight   高亮
home   主页
icon   图标
info,information   信息
last   最后一个，常用于列表中
links   链接
login   登录
logout   退出
logo   标志
main   主体
menu   菜单
meta   作者、更新时间等信息栏，一般位于标题之下
module   模块
more   更多（展开）
msg,message   消息
nav,navigation   导航
next   下一页
nub   小块
odd   奇数，常用于多行列表或表格中
off   鼠标离开
on   鼠标移过
output   输出
pagination   分页
pop,popup   弹窗
preview   预览
previous   上一页
primary   主要
progress   进度条
promotion   促销
rcommd,recommendations   推荐
reg,register   注册
save   保存
search   搜索
secondary   次要
section   区块
selected   已选
share   分享
show   显示
sidebar   边栏，侧栏
slide   幻灯片，图片切换
sort   排序
sub   次级的，子级的
submit   提交
subscribe   订阅
subtitle   副标题
success   成功（提示）
summary   摘要
tab   标签页
table   表格
txt,text   文本
thumbnail   缩略图
time   时间
tips   提示
title   标题
video   视频
wrap   容器，包，一般用于最外层
wrapper   容器，包，一般用于最外层

七、SEO基础知识

1、SEO概念：搜索引擎优化，目的为了提升网站排名，即当用户使用搜索引擎搜索与我们网站业务相关关键词时，我们网站在搜索结果列表中的排名。如在百度上搜索“在哪里可以进行网上购物”，百度的结果显示页面将淘宝、京东等网上商城网站展示有前后排名，SEO的作用就是实现将我们的网站实现从无到有，再从后到前得出现在搜索结果网页上。

2、相关计量概念：
1.展示量，即用户进行搜索时，看到我们的网站的数量，看到也不一定进入。
2.点击量，即用户看到你的网站，也点击进入你的网站的数量。
3.点击率：即点击量/展示量，即表示当你的网站作为搜索结果展现给用户时，用户点击进入的比例。
4.访问量：以ip作为计数，即记录网被访问的用户数量。
5.停留时间：用户进入网站时停留的时间，如有一篇文章写的很好，用户停留很久。如在B站看视频，一看就是一整天^_&。

3、网站关键词选择的四大技巧：（不用看）
1.关键词指数——即用户每天搜索该关键词的次数，在百度指数网站可以得到数据。如百度指数网站获取关键词“火腿”，用户每天搜索10w次^_^。
2.在搜索相关结果小于1000w
3.广告位不多于3，一个页面最多5个广告位
4.首页数量，搜索结果展示的网站首页数量

4、TDK设置，占排名得分40%
title：关键词1-关键词2-关键词3-品牌词，网站标题带关键词
description：60-80字数，面向用户需求。搜索下拉菜单、描述需要包含关键词。
keywords：关键词
！一句话：一个网页的网站名、元素据<meta name="description" content="">、<meta name="keywords" content="">很重要就对咯

———————懒得整理咯，以下是自己听课的随手笔记，直接跳过—————————————

SEO：搜索引擎优化，提升网站排名

网站排名算法规则：
单页面优化，整站优化

SEO学习步骤：
1、建站
2、SEO基础
3、排名规则
4、SEO策略
5、数据分析（课程核心）

网站关键词排名流程：
1、放出蜘蛛
2、蜘蛛来访抓取
3、页面的收录（索引），把你的网页放进百度数据库
4、算法计算得分
5、排名

认识搜索引擎爬虫：
模拟普通用户-》来访-》返回数据-》评分
需要登录的网站不会收录

网站爬虫的管理规则
1、链接长度——英文、短
2、蜘蛛倾选择的网站：
   打开速度快
   识别难度：图片难，视频不识别
   链接为通道
3、有效收录：有价值
4、爬虫越多，越容易被收录
5、蜘蛛访问日志

百度收录：提高收录几率

收录率
有效收录

————————————————
用数据来提升权重值
权重：一天预计访问量

百度运营排名的核心思维：   主要盈利SEM，竞价拍卖网站排名
           盈利依靠用户流量，通过SEO满足客户搜索知识需要，吸引流量
————————————————————
高级SEO核心数据计算
1、展示量，用户搜索看到的
2、点击量，进入你的网站数量。可以刷。点击率：点击量/展示量
3、访问量，以ip为计数
4、停留时间，访客停留的时间。来了马上离开的人数，跳出率=来了马上就走的客户/访问量
——————————————————————————
关键词选择的四大技巧
1、指数——用户每天搜索关键词次数。百度指数，记录百度用户搜索词汇。500
2、相关结果，1000w
3、广告位，一个页面最多5个广告位。3个
4、首页数量，4个
满足以上三个就可以选择这个关键词作为以后优化发展
———————————————————————————
TDK，得分率40%
title：关键词1-关键词2-关键词3-品牌词
description：60-80字数，面向用户需求。搜索下拉菜单
   用户痛点，行业优势，包含关键词。
keywords
————————————————————————
网站栏目：引导用户点击
正确栏目规划：6-9个
栏目需要满足用户需求
——————————————————————————
锚文本提升网站的收录：1.增加网站点击率2.增加用户停留时间3.增加蜘蛛的存留时间
1、文字于链接内容相关性
2、文字与关键词相关性
3、锚文本密度 1000字文章4个锚文本
4、不能多个链接指向一篇文章
5、最主要的是站在用户需求
——————————————————————————————
网站的文章书写技巧：文章主要降低跳出率，增加用户停留时间
不一定要原创文章，最主要面向用户
1、图文结合1-3张图片
2、字数要求800以上
3、有效收录：足够吸引用户停留，还有包含关键词
——————————————————————————————
外链算法
外链：别人的网站放自己的链接
内链：自己网站放自己链接
绿萝算法：检测外链是否优质

外链发布技技巧：
   发布形式：文字、链接，如在某平台发评论
——————————————————————————————
友情链接：
交换规则
   1.30个，周边行业，同行
   2.选择权重高，优质站点
   3.nofollow，蜘蛛不进入链接；内页首页
——————————————————————————————
闪电算法：秒排的数据要求
   1、加载速度 >3s扣分、2-3、小于2s加分
===========================================
应该先学SEO再去搭建网站
————————————————————————————
选择一个符合SEO的网站域名
主体：产品英文or拼音，品牌名
后缀：.com .cn .net

一级域名：baidu.com
二级域名：www.baidu.com
   ziyuan.baidu.com
三级域名：bbs.ziyuan.baidu.com
网站排名的有利程度：主域名>二级域名>栏目>内页，要简短
——————————————————————————————
网页布局 F布局，越重要放左上边
————————————————————————————————
利用好h1-h6标题
————————————————————————————
nofollow
< a href="" rel="nofollow">爬虫别来</a>
应用范围：
   外部链接
   不重要的页面：关于我们
——————————————————————————————————
图片alt代码优化
每张图片都要加，准确描述图片，采用关键词
—————————————————————————————————
企业网站优化方案：
   产品：   产品分类-热门产品-价格-维修-公司保障
   服务：   流程-区域-价格-客户案例
其他：
   商城：图片多，商品种类多

——————————以上内容直接跳过—————————————————————————

HTML及相关知识汇总相关推荐

【LWIP】LWIP协议|相关知识汇总|LWIP学习笔记
这里作为一个汇总帖把,把以前写过的LWIP相关的博客文章汇总到一起,方便自己这边查找一些资料. 收录于: [LWIP]LWIP协议|相关知识汇总|LWIP学习笔记 LWIP协议 [LWIP]LWIP网 ...
ODBC管理器相关知识汇总
ODBC管理器相关知识汇总最近,在使用终端应用程序调用数据库文件时,发生了:ODBC问题之驱动程序和应用程序之间的体系结构不匹配等问题,通过查阅资料,小有收获,汇总如下: ODBC:开放数据库互连, ...
kaggle 相关知识汇总(转载+自己整理)
本文只保留了重要的信息,泛泛之谈全部予以删除.(在知乎中分别搜索kaggle.Kaggle stack之后所有信息的摘录) 刚参加一个比赛,需要花点时间了解这个比赛的领域背景,甚至需要查一些资料或阅读 ...
xserver相关知识汇总
本文主要是从以下几个方面介绍xorg-xserver 相关的知识 1.linux系统图形界面框架 2.xserver 和x client启动过程 3.图形2d,3d加速原理简介 4.xserver主 ...
磁盘阵列相关知识汇总
RAID基本知识 RAID 磁盘阵列(Redundant Array of Independent Disks)简单的解释,就是将N台硬盘透过RAID Controller(分Hardware,Sof ...
Mybatis相关知识汇总
1.#{}和${} 在mybatis中#{}与${}的区别先来看两个例子,假设在数据库中有一个name字段,它的类型是varchar,当通过这个字段进行查询语句时,在xml文件中可以使用where ...
自定义注解相关知识汇总(转)
之前在开发中,就总纳闷,为什么继承接口时,会出现@Override注解,有时候还会提示写注解@SuppressWarnings? 原来这是java特有的特性,注解! 那么什么是注解呢? 注解就是某种注 ...
Xilinx AXI Interconnect相关知识汇总-AXI协议理解（三）
xilinx的IP核很多都用到了AXI总线进行数据和指令传输.如果有多个设备需要使用AXI协议对AXI接口的BRAM进行读写,总线之间该如何进行仲裁,通信? Vivado有一个叫做AXI Interc ...
CSP-J CSP-S初赛相关知识汇总
[计算机科学速成课][40集全/精校] - Crash Course Computer Science [计算机科学速成课][40集全/精校] - Crash Course Computer Scie ...
【DOM相关知识汇总-学习小结】
目录一.DOM 1.排他思想 2.获取元素的属性值 3.设置属性的值 4.移出属性 5.H5对标签自定义属性的名称约定 6.H5中设置自定义属性的值 7.H5获取自定义属性的值二.DOM的节点 1 ...

HTML及相关知识汇总