HTML常见元素和HTML语义化

HTM常见元素和理解

常见元素

header区
meta title style link script base
页面相关资源等, 页面上不直接显示

body区
div/section/article/aside/header/footer
p
span/em/strong
表格: table/thead/tbody/tr/td
列表: ul/ol/li/dl/dt/dd
链接: a
form/input/select/textarea/button
以上是有代表性的

<meta charset="utf-8">

使用的字符集, 一般utf8

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=n0">

视口, 手机\电脑屏 , 适配移动端

<base href="/">

指定基础路径

HTM重要属性

a[href, target]
img[src, alt] //alt显示替换内容
table td[colspan, rowspan]//colspan, rowspan合并单元格
form[target, method, enctype]//method提交方式get/post, enctype主要是post编码, 两种application/x-www-form-urlencoded和multipart/form-data
input[type, value]
button[type]
select>option[value]
label[for]//根据表单项关联

<p>
    <input type="radio" name="radio1" id="radio1-1" />
    <label >选项一</label>
    <input type="radio" name="radio1" id="radio1-2" />
    <label for="radio1-2">选项二</label>
</p>

name可同, id不能重复
label没有的话,点文字就不能选这个选项

<form>
  <p>
        <button type="button">普通按钮</button>
        <button type="submit">提交按钮一</button>
        <input type="submit" value="提交按钮二"/>
        <button type="reset">重置按钮</button>
    </p>
</form>

不同按钮
提交按钮只有在form里才有意义

如果通过ajax请求, 不通过form提交, 是否需要form元素?
不一定需要, 但建议用form

1. 没有form用不了submit/reset按钮
2. 用form可以批量获取表单
3. 有form可以跟框架结合, 跟验证组件结合

如何理解HTML

HTML实际上是文档, 有结构, 有区块和大纲

HTML５提供的语义化标签就是为了让大纲更明确
工具http://h5o.github.io/
Drag this to your favorites:后面的图标拖到收藏夹
打开你想看大纲的网页, 点收藏夹里的h5o
给搜索引擎/爬虫等等看
需要关注HTML整体结构，HTML语义化.

来源：CSDN

作者：.01

链接：https://blog.csdn.net/qq_43340342/article/details/104372997