Html元素和属性

Html元素-编码-emmet

一、html的结构分析

1.1、文档声明

<!DOCTYPE html>:表头声明文档是h5的版本的页面，让浏览器用 HTML5 的标准去解析识别 HTML文档，必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；

1.2、html元素

html标签: html页面的根元素（顶级元素）所有元素必须是该元素的后代，w3c的标准给html添加lang="zh_CN"属性

lang=zh_CN属性的作用

帮助语音合成工具确定要使用的发音; 帮助翻译工具确定要使用的翻译规则

常见的规则lang="en"表示这个HTML文档的语言是英文 lang="zh_CN" 则是中文

1.2.1、head标签：存放 html 页面的基本配置（元数据）
- 常见设置
  
  meta->charset=”utf-8“：网页编码 utf-8 国际通用编码不区分大小写
  
  title->标题
1.2.2、body 标签：存放标签元素（element)

二、常见元素

2.1、h元素和p元素

标题元素 h1~h6，

p段落元素: p元素默认上下有一定的margin 块级元素，而且宽度是auto的

2.2、img元素可替换元素（replaced element）

作用：将一份图像嵌入到文档，是一个可替换元素
两个属性
- src:是source单词的缩写，表示源
- alt: 当图片加载失败的时候出现的提示字符串、也是用来描述图片的
读取图片的两种方式
- 网络地址url
- 本地地址
  1. 绝对路径：不用解释
  2. 相对路径：./当前目录，../上一层目录
图片支持的格式

补充：img图片403无法读取

referrerpolicy="no-referrer"

部分网站不允许读取图片，403错误如果读取的话需要在img元素添加属性

可以在mdn文档上面查

视频的话应该（印象中有可能是错误的）是设置：origin

2.3、a标签超链接元素（anchor 锚）

超链接用来打开跳转新的url

两个常用的属性:
- href：Hypertext reference的简写
- target：给属性指定在何处显示链接的资源
  - _self（自己-默认值）：在自己的页面打开src的链接
  - _blank（空白）：在新的空白页面打开
  - _parent：iframe的父级页面打开url
  - _top：iframe最顶级的页面显示url
本页面的锚点链接：跳转到网页中的具体位置
a 元素和 img 元素：可以使用 a 标签嵌套 img，但是 a 标签要是 block 元素
也可以使用mailto:12345@qq.com打开邮箱

注意：a标签是行内元素，按照浏览器解析html的规范行内元素里放块级元素是不符合的

这样又可能造成a元素设置背景色的时候无法显示

当想要在a元素里面嵌套的话要设置inline-block

2.4、div和span元素

div 和 span 是两个特殊的元素 -> 都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的

产生的历史：
- 网页的发展早期是没有 css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
- 后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可；
- 比如 h1元素可以是一段普通的文本+ CSS 修饰样式；
- 这个时候就出现了 div、span来编写 HTML 结构所有的结构，样式都交给 css来处理
div 元素：多个 div 元素包裹的内容会在不同的行显示； ✓ 一般作为其他元素的父容器，把其他元素包住，代表一个整体 ✓ 用于把网页分割为多个独立的部分
span 元素：多个 span 元素包裹的内容会在同一行显示； ✓ 默认情况下，跟普通文本几乎没差别 ✓ 用于区分特殊文本和普通文本，比如用来显示一些关键字

2.5、iframe元素

用来嵌套网页
属性
- frameborder：默认是 0 没有边框 1 是有边框
某些网页禁止嵌套(原理)

X-Frame-Options
1. DENY：页面不能被嵌入到任何 iframe 或 frame 中；
2. SAMEORIGIN：页面只能被本站页面嵌入到 iframe 或者 frame 中；
3. ALLOW-FROM：页面允许 frame 或 frame 加载。
和 a 元素结合 ( target 另外两个值)
获取父页面的 windows 对象 parent
刷新父页面 parent.location.reload()

2.6、不常用元素

strong：加粗
i：斜体，也可以用来显示图标
code: 代码块

就是给内容添加了一个字体样式，font-family: monospace;
br：换行（基本没人用）
del：删除线
sub: 文字下标
sup: 文字的上标

2.7、全局属性 data-*

id、class、style、title、data-*
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性

data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
通常用于HTML和JavaScript数据之间的传递；

 <div class="box" age="18" data-name="why" data-age="18" data-height="1.88"></div>
  <script>
     const boxEl = document.querySelector(".box")
     console.log(boxEl.dataset)
  </script>

小程序中, 就是通过 data- 来传递数据的, 所以该全局属性必须要掌握

三、Html高级元素

1、列表元素

1.1、列表实现的方式

方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
方案二: 使用列表元素, 使用元素语义化的方式实现
事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局
- 原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
- 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等
- 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div

2、常见列表元素

HTML提供了3组常用的用来展示列表的元素

2.1、有序列表：ol(ordered list）、li(list item）

概述：ol有序列表，直接子元素只能是li

css 样式：list-style-type: decimal;
去除样式list-style: none

2.2、无序列表：ul(unordered list）、li(list item）

ul:无序列表，直接子元素只能是li

css 样式：list-style-type: disc;

2.3、定义列表：dl（definition list）、dt（definition term）、dd（definition description）

dl（definition list）
- 定义列表，直接子元素只能是dt、dd
dt（definition term）
- term是项的意思, 列表中每一项的项目名
dd（definition description）
- 列表中每一项的具体描述，是对 dt 的描述、解释、补充

3、table表格元素

3.1、常见表格元素、css样式

table
tr (table row)
td(table data)
另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用
css样式非常重要的属性
- border-collapse（折叠） CSS 属性是用来决定表格的边框是分开/折叠的还是合并的。
- table { border-collapse: collapse; }：折叠合并单元格边框

3.2、语义化表格元素

thead：表格的表头
tbody: 表格的主体
tfoot：表格的页脚
cpation：表格的标题
th：表格的表头单元格

3.3、单元格合并

在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的

一个单元格可能会跨多行或者多列来使用

跨列合并: 使用colspan
- 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
跨行合并: 使用rowspan
- 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;

3.4、tbody滚动

    tbody {
        display: block;
        max-height: 320px;
        overflow: auto;
    }
    thead, tbody tr {
        display: table;
        width: 100%;
        /*table-layout: fixed;!* even columns width , fix width of table too*!*/
    }css
    thead {
        width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
    }

3.5、colgroup

HTML 中的表格列组（Column Group <colgroup>）标签用来定义表中的一组列表。

span: 有几列需要定义

<table>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="1" class="flash" />
  </colgroup>
  <tr>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

5、form表单元素

5.1、from：表单, 一般情况下，其他表单相关元素都是它的后代元素

块级元素

form通常作为表单元素的父元素:
- form可以将整个表单作为一个整体来进行操作;
- 比如对整个表单进行重置;
- 比如对整个表单的数据进行提交
form常见属性如下
- action：用于提交表单数据的请求URL
method：请求方法（get和post），默认是get
target：在什么地方打开URL（参考a元素的target）
enctype

当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型。可能的取值有：

具体查看mds文档
onSubmit事件

该事件会在表单提交前执行，多数用于校验，整合数据

返回值：Boolean 值类型来决定是否提交

获取 form 表单对象

//方法一：这个方法也可以转 URLSearchParam 对象，只要是键值对类型就行
const addrObj = Object.fromEntries(new FormData($("#dialog_orderForm").get(0)))
//方法二：直接便利所有的 input 对象
  $("#add_product_form").on("submit", function (e) {
    const specif = []
    Array.from($(".sku_specif_content .sku_specif_item")).forEach(el => {
      const skuImg = $(el).find("input[name=skuImg]").val()
      const skuName = $(el).find("input[name=skuName]").val()
      const skuPrice = $(el).find("input[name=skuPrice]").val()
      const skuStock = $(el).find("input[name=skuStock]").val()
      specif.push({skuImg, skuStock, skuPrice, skuName})
    })

    $("#product_sku_specif_inp").val(JSON.stringify(specif))
        //这里必须要有返回值
    return true
  })

5.2、input: 单行文本输入框、单选框、复选框、按钮等元素

行内替换元素，但需要根据type类型决定

类型
- text：文本输入框（明文输入）
- password：文本输入框（密文输入）
- radio：单选框
- checkbox：复选框
- file：文件上传
- button：按钮
  -  reset：重置  submit：提交表单数据给服务器
扩展类型H5特性
- date
- time
- number
- tel
- color
- email
- range: 这里的属性是 min和max 不是maxlength
属性
- readonly：只读
- disabled：禁用
- (H5)autofocus：当页面加载时，自动聚焦
- checked：默认被选中
  - 只有当type为radio或checkbox时可用
- name：名字
  - 在提交数据给服务器时，可用于区分数据类型
- value：取值
- (H5)multiple：是否允许多个值
- (H5)placeholder: 输入框的占位文字
常见布尔属性（6个）
- 常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
type类型的其他取值和input的其他属性, 查看文档: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

5.3、textarea: 多行文本框

textarea常用属性
- cols：列数
- rows: 行数
主要用来设置 textarea 的大小相当五width、heght
缩放的css设置
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal
- 垂直缩放：resize: vertical
- 水平垂直缩放：resize: both

5.4、select、option：下拉选择框

默认选中：selected
下拉框多选的布尔属性：multiple
显示多少项: size

5.5、button

5.6、label：表单元素的标题

◼ label元素一般跟input配合使用，用来表示input的标题 ◼ labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

5.7、清空form表单

$("#dialog_orderForm").get(0).reset()

四、认识emmet

◼ Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具,vscode和webstorm在html中内置了emmet

!和html:5可以快速生成完整结构的html5代码

2.1 HTML Emment

1. 隐式标签:.类名默认是div，其他属性前面要加标签名,id也是一样span#box
    .box=<div class="box">
        </div>
    span.box=<span class="box"></span>
    id也是一样span#box
2.>是子元素,+是兄弟元素
    div>span+p=  <div>
                    <span></span>
                    <p></p>
                </div>
3.{元素的content},[元素的属性名,不是属性值]
    div>span{这里是div}+span[lang]  = <div>
                        <span>这里是div</span>
                        <span lang=""></span>
                  </div>
4.*n代表多个,$代表数字,^代表上一级
  ul>li>span{这里是span$}*4^h1{这里是h1} =<ul>
                                          <li>
                                            <span>这里是span1</span>
                                            <span>这里是span2</span>
                                            <span>这里是span3</span>
                                            <span>这里是span4</span>
                                          </li>
                                          <h1>这里是h1</h1>
                                        </ul>
5.

2.2 Css Emment

w100: width:100px
w100p: width: 100%
lh30: line-height: 30;
w20+h30+m40+p50: width:20px; height:30px; margin:40px; padding:50px
m20-20-30-40-50: margin:20px 30px 40px 50px
dib: display: inline-block
bd1#cs: border: 1px solid #000
posa position: absolute
posr position: relative

五. 额外知识

3.1. 字符实体

&nbsp; 空格 在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。
&lt; < 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签
&gt;>

3.2. URL

URL的格式:
- 协议://主机:端口/路径/文件名?查询字符串#片段id
- 协议://localhost:prot/path?query#fragment
和URI的区别:
- URI:标志符例：id就是一个标志符
- URL: 定位符(网络地址)