HTML基础 - 技术栈

[1 网页的基本元素](#1 网页的基本元素)

[2 基本标签](#2 基本标签)

[3 URL/SEO优化](#3 URL/SEO优化)

[3.1 URL](#3.1 URL)

[3.2 接口文档](#3.2 接口文档)

[3.3 SEO优化](#3.3 SEO优化)

[4 标签语义化](#4 标签语义化)

[5 列表](#5 列表)

[6 表格](#6 表格)

[7 表单](#7 表单)

块级、行内级元素

替换、非替换元素

1 网页的基本元素

一个完整的HTML结构包括哪几部分？

java 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charest="UTF-8">
    <title>Title</title>
  </head>
  <body>
  </body>
</html>

文档声明
- 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元素：预设文本，按照代码块中的文本格式渲染到浏览器上
特殊字符

特殊字符	描述	字符的名称
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
￥	人民币	&yen
©	版权	&copy
®	注册商标	&reg
°	摄氏度	&deg
±	正负号	&plusmn
×	乘号	&times
÷	除号	&divide
²	平方2(上标2)	&sup2
³	立方3(上标3)	&sup3

3 URL/SEO优化

3.1 URL

java 复制代码

协议://主机:端口(默认端口80,省略)/path?查询
protocol://host:post/path[;parameters][?query]#fragment
// query 请求参数，提交给服务器的数据
// fragment 锚点位置

3.2 接口文档

java 复制代码

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元素定义标注用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器或光标就自动转到或者选择对应的表单元素上，用来增加用户体验

常见元素
- 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等
- 非替换元素
  - 和替换元素相反，元素本身是有实际内容的，浏览器会直接将内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容

欢迎大家指点评论~ 点赞+关注⭐⭐⭐