目录

1 网页的基本元素

2 基本标签

3 URL/SEO优化

3.1 URL

3.2 接口文档

3.3SEO优化

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

  • 特殊字符

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

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：访问数据的类型popnewsell

3.3SEO优化

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等

    • 非替换元素

      • 和替换元素相反，元素本身是有实际内容的，浏览器会直接将内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容

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