前端系列(02) - 三剑客之HTML

语义化

HTML和Markdown一样都是规范文档编写的标记语言，其最大的特点就是语义化，也就是见名知义。如看到了a标签就知道这是个链接，img标签则表示一个图像等等。此外标签本身没有样式，在写demo时浏览器会给标签添加默认的样式，这就像使用markdown编辑器设置不同的主题一样。

常见标签

div、span、a、img、form、input、button、h1、p、ul、ol等等都是经常用到的，全部的标签及语义可参照MDN中的HTML Element。

因form用的比较多且相关属性也多一些，简单记录下属性所表示的含义：

<form action="/post" method="post">
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" value="tom">
    <label for="password">密码</label>
    <input type="password" name="password" id="password" value="123123">
    <label for="remember">记住我</label>
    <input type="checkbox" name="remember" value="yes">
    <button type="submit">登录</button>
</form>

1. action：服务器处理的资源路径，method：请求类型

2. input输入域是表单重要组成，type属性表示类型，name和value表示请求入参会以key:value的形式发送出去，value在不同类型中表现不同，比如在text文本域中会显示为默认值等等。

3. 在form中经常也会看到id这个属性，但目前查到的资料id在HTML中大致有两个作用，一个是作为文档的锚点链接，另一个是id选择器。在form提交表单交互中没有作用，表单最终发出去的是name和value。

标签分类

W3C同时也对标签元素分为了两类：行内元素和块级元素，需要了解这个是因为除了语义上的差异，同时还存在CSS表现差异，如行内元素在一行展示而块级元素独占一行，高度和宽度在行内元素上设置是无效的等。（HTML5对分类有了重新定义，参照内容分类）。

最后，HTML的内容了解以上这些就差不多了，只需知道标签对应单词的意思，知道这个标签怎么用就可以了(语义化)，遇到没见过的搜索MDN文档。

标签：02,form,标签,元素,语义,value,HTML,三剑客
来源： https://www.cnblogs.com/dream08/p/16345775.html