HTML基础
目录
1 网页的基本元素
2 基本标签
3 URL/SEO优化
3.1 URL
3.2 接口文档
3.3 SEO优化
4 标签语义化
5 列表
6 表格
7 表单
块级、行内级元素
替换、非替换元素
1 网页的基本元素
- 一个完整的HTML结构包括哪几部分？
Title-
文档声明
-
HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
-
必须放到HTML文档的最前面，不能省略，省略了会出现兼容性问题
-
-
html元素
-
html元素是HTML文档的根元素，一个文件只能有一个，其他所有元素都是它的后代元素
-
lang => language 语言的意思，作用：
-
帮助翻译工具确定要使用的翻译规则
-
帮助语音合成工具确定要使用的发音
-
-
lang="en" =>英文; lang="zh" =>中文
-
zh-CN:地区限制匹配规范，表示用在中国大陆区域的中文
-
zh-Hans:语言限制匹配规范，表示简体中文
-
-
-
head元素
-
head元素里面的内容是一些"元数据"(元数据：描述数据的数据)
-
元数据 => metadata; 用来描述数据的数据 对网页进行一些基本设置
-
-
比如字符编码、网页标题、网页图标
-
meta charest="UTF-8" => 字符集 作用:将文字存储到计算机中，之后解析出来显示 应用:所有的网页目前都需要采用UTF-8编码，所有浏览器在解析时，我们也要告诉浏览器当前我们使用的时UTF-8，浏览器才能正常的解析出来文字 中文 => GB2312 => GBK 其他国家：其他文字 => 自己的编码规则 Unicode => 规则 utf-16 => utf-32 => utf-8 哈哈 => utf8 => 01010101 =>GBK 乱码
-
title => 网页标题
-
link:favicon 网页图标
-
-
-
body元素
-
网页的具体内容和结构
2 基本标签
-
h元素：定义了六个大小不同的标题，加粗文本
-
strong：加粗
-
img：显示图片
-
src：图片的路径(网络图片/本地图片(相对路径/绝对路径))
-
alt：当图片无法加载，显示的代替文字
-
注意：img如果只设置了width或height，浏览器会自动根据图片宽高比计算出height或width
-
-
a元素：定义锚点
-
href：超链接
-
target： _self(默认值):当前页 _blank:空白，新的标签页
-
在iframe标签内的target： _parent:父元素 _top:多层嵌套iframe，在顶层 某个frame的name值：在某个frame中打开URL
-
"#id":可以定义到id所在位置
-
伪链接：没有指明具体链接地址的链接 点击链接后具体做什么,可以编写对应的JS代码 "#" onclick = "return false" "javascript: alert()" //弹出弹窗
-
-
-
iframe: 框架，一般用来包含别的页面
-
pre元素：预设文本，按照代码块中的文本格式渲染到浏览器上
-
特殊字符
特殊字符 描述 字符的名称 空格符   大于号 > & 和号 & ￥ 人民币 ¥ © 版权 © ® 注册商标 ® ° 摄氏度 ° ± 正负号 ± × 乘号 × ÷ 除号 ÷ ² 平方2(上标2) ² ³ 立方3(上标3) ³ 3 URL/SEO优化
3.1 URL
协议://主机:端口(默认端口80,省略)/path?查询 protocol://host:post/path[;parameters][?query]#fragment // query 请求参数，提交给服务器的数据 // fragment 锚点位置
3.2 接口文档
baseURL:http://localhost:8000 访问某个资源/home/multidata 参数 page：当前要访问的页面 type：访问数据的类型 pop new sell
3.3 SEO优化
SEO: 搜索引擎优化
-
百度/搜狗/360/Google
-
h元素有助于网站的SEO优化，可以促进关键词排名
-
建议在网页中最多只有一个h1元素
-
乱用不会带来好的权重，反而有可能被搜索引擎认为作弊，最后导致K站
-
logo优化： logo里面首先放一个h1标签，目的为了提权，告诉引擎这个地方很重要 h1里面在放一个连接，可以返回首页的，block给链接一个logo的背景图片 链接里面放文字，为了搜索引擎收录我们，但是文字不要显示出来。 text-indent:-9999px，然后overflow：hidden 淘宝的做法 直接给font-size : 0，就看不到文字了， 京东的做法 最后给链接一个title，这样鼠标放到logo上，就可以看到提示文字了
-
-
网站优化三大标签:
-
一.网页title标题 title具有不可替代性,使我们内页的第一个重要标签,是搜索引擎了解网页的入口, 和对网页主题归属的最佳判断点. 标题长度: Google,35个中文 Baidu,28个中文 关键字分布: 最先出现的词语权重越高 关键字词频: 主关键词出现3次,辅关键词出现一次. 建议: 首页标题:网站名(产品名)-网站的介绍
-
二.Description:网站说明 字符数含空格在内不超过120个汉字. 补充在title和keywords 中未能充分表述的说明. 用英文逗号 关键词1,关键词2
-
三.keywords：关键字 通常限制到6~8个
4 标签语义化
-
什么是标签语义化？
-
选择标签的时候要尽量让每一个标签都有正确的语义
-
-
标签语义化的好处
-
方便维护代码
-
减少让开发者之间的沟通成本
-
能让语音合成工具正确识别网页元素的用途，以便做出正确的反应
-
让搜索引擎能够正确识别重要的信息
5 列表
-
有序列表 ol>li 无序列表 ul>li
-
li 前面的部分（序号或者实心点）是占据了一个独立的块元素
-
-
自定义列表dl常用与对术语或名词解释
-
dl中含有dt第一 dd第二
-
dt
-
列表中每一项的项目名
-
-
dd
-
列表中每一项的具体描述，是对dt的描述、解释、补充
-
-
-
列表相关的CSS属性
-
注：它们都可以继承
-
list-style-type
-
设置li元素前面标记的样式 decimal 将样式改为阿拉伯数字 其他属性不常用，翻阅文档
-
-
list-style-image
-
设置某张图片覆盖前面的样式
-
-
list-style-position
-
设置li元素前面标记的位置 outside 标记放在外边距里面 inside 标记放在内容里面
-
-
list-style
-
常用 list-style: none
-
6 表格
-
常见元素
-
table、tr、td、th
-
-
table
-
border:控制表格边框的宽度（默认为0） width:控制表格的宽度 height：控制表格的高度 align:设置表格再网页中的水平对齐方式（left center right） cellspacing:设置单元格与单元格边框之间的空白间距 cellpadding:设置单元格内容与单元格边框之间的空白间距
-
注：不常用，推荐使用CSS样式来修改
-
bord-collapse
-
separate 默认分开
-
collapse 合并
-
-
border-spacing: 10px 15px;
-
10px 左右边距
-
15px 上下边距
-
-
-
th、td
-
valign
-
单元格的垂直对齐方式
-
-
align
-
单元格的水平对齐方式
-
-
width、height
-
单元格的宽度、高度
-
-
rowspan
-
单元格可横跨的行数
-
-
colspan
-
单元格可横跨的列数
-
-
-
表格划分结构：三个部分，题头、正文、脚注，分别为thead,tbody，tfoot thead 内部必须有 tr 标签
-
caption 表格标题，跟随着表格移动，居中表示在表格上方。
7 表单
label标签
label标签未input元素定义标注 用于绑定一个表单元素，当点击标签内的文本时， 浏览器或光标就自动转到或者选择对应的表单元素上，用来增加用户体验
-
常见元素
-
from
-
表单，一般情况下，其他表单相关元素都是它的后代元素
-
action 发送的url地址
-
method get 在请求url后面以？的形式跟上发给服务器的参数，多个参数之间用&隔开， 由于浏览器和服务器对url长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB post 发给服务器的参数全部放在请求体中
-
target 在什么地方打开URL，（参考a元素的target）
-
enctype 规定了在向服务器发送表单数据之前如何对数据进行编码 取值有三种 application/x-www-form-urlencoded：默认的编码方式 multipart/form-data：文件上传时必须为这个值，并且method必须是post text/pain：普通文本传输
-
accept-charset：规定表单提交时使用的字符编码（默认值UNKNOWN，和文档相同的编码）
-
-
input
-
单行文本输入框、单选框、复选框、按钮等元素
-
type: input的类型
-
text：文本输入框（明文输入）
-
password：文本输入框（密文输入）
-
radio：单选框
-
checked 默认被选中
-
-
checkbox：复选框
-
checked 默认被选中
-
-
button：按钮
-
reset：重置
-
submit：提交表单数据给服务器
-
file：文件上传
-
-
-
oninput
-
内容发生改变就触发
-
-
onchange
-
内容发生改变且失去焦点后才触发
-
-
-
textarea
-
多行文本框
-
cols: 列数
-
rows: 行数
-
缩放的CSS设置
-
resize
-
none 禁止缩放
-
horizontal 水平缩放
-
vertical 垂直缩放
-
-
-
-
select、option
-
下拉选择框
-
select常用属性
-
multiple: 可以多选
-
size：显示多少项
-
-
option
-
selected：默认被选中
-
-
-
button
-
按钮
-
-
label
-
表单元素的标题
-
-
fieldset
-
表单元素组
-
legend
-
fieldset的标题
-
-
-
maxlength
-
允许输入的最大数字
-
-
placeholder
-
占位文字
-
-
readonly
-
只读属性
-
-
disabled
-
禁用
-
-
autofocus
-
当页面加载时，自动聚焦
-
-
name
-
在提交数据给服务器时，可用于区分数据类型
-
-
-
表单提交
-
传统的 表单提交
-
将所有的input包裹到一个form中，form设置action（服务器的地址），点击submit，自动将所有的数据传输到服务器
-
弊端
-
会进行页面的跳转（意味着服务器必须提前将一个页面写好，并且将写好的页面返回给前端，前端直接展示这个页面）
-
不方便进行表单数据的验证
-
-
-
前后端分离
-
通过JavaScript获取到所有表单的内容，通过正则表达式进行表单的验证，发送Ajax请求，
将数据传递给服务器，验证成功后，服务器会返回结果，需要前端解析这个数据，并且决定显示什么内容（前端渲染和前端路由 ）
-
块级、行内级元素
-
根据元素的显示（能不能在同一行显示）类型
-
块级元素
-
独占父元素一行
-
-
行内级元素
-
多个行内级元素可以在父元素的同一行中显示
-
行内非替换元素
-
不起作用：width、height、margin-top、margin-bottom
-
效果特殊：padding-top、padding-bottom、上下方向的border
-
上下会多出区域，但是不占据空间
-
-
-
基线对齐
-
行内级元素（包括inline-block元素）的代码之间如果有空格，会被解析为空格
-
解决方法
-
1.元素代码之间不要留空格
-
2.注释掉空格
-
3.设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size
-
-
-
替换、非替换元素
-
根据元素的内容（是否浏览器会替换掉元素）类型
-
替换元素
-
元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
-
例img、input、iframe、video、embed、canvas、audio、object等
-
-
非替换元素
-
和替换元素相反，元素本身是有实际内容的，浏览器会直接将内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
-
欢迎大家指点评论~ 点赞+关注⭐⭐⭐
-
-
-
-
-
-
-
-
-
-
