这是我参与「第五届青训营 」伴学笔记创作活动的第1天
本文主要介绍HTML相关的基础内容
前端语义化
语义化是什么
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 如有序列表用
ol；无序列表用ul，lang属性表示内容所使用的语言
如何理解HTML语义化
- 对开发者来说，语义化可以提升代码可读性、可维护性；
- 对搜索引擎来说，语义化可以更容易分析出网页的主次关系（SEO，搜索引擎优化）
要传达的是内容，而不是样式
<!--对于两种相同的展示效果-->
<p style="font-size:32px;">糟糕的写法</p>
<h1>恰当的写法</h1>
常见标签
块级标签： div h1 table ul ol p 等
行级/内联标签： span img input button a 等
列表：
- 有序号：
<ol> <li> - 无序号：
<ul> <li> - 定义列表：
<dl> <dt> <dd>
链接：
<a href="" target="_blank"(新窗口打开)></a>
<link rel="引用/被引间的关系" type="引用类型" href="路径">
<script defer="defer/async"></script>
<base href="链接前缀"target="_blank/_self">
- 若指向本站，可以写相对路径；父级："../(文件名)"；祖父级："../../(文件名)"
- 链接到当前页面某位置：id="top" href="#top"
图像：<img src="" alt=""(加载失败时的描述)>
- 带描述图像：
<figure><img><figcaption>
标题：<h1>到<h6>
换行：<br/>
文本框：<input type="text/password" name="框前信息" maxlength="">
标签：<label for="相当于id">
文本域：<textarea name="" cols="" row="">
单选/复选：<input type="radio/checkbox" name="" value="" checked="checked">
下拉选：<select name=""><option value="" selected="selected">
提交：[<input type="submit/image(带图标)">](url)
隐藏表单控件：<input type="hidden">(用于追踪提交页面)
组合表单：<fieldset><legend>(标题)<input...>
选择日期：<input type="date">
输入邮件/URL/搜索：<input type="email/url/search" placeholder="">
HTML 语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
前端页面常见的内容划分
Tips
- 在HTML中，连续空格和换行都被视为一个空格
- 块级元素会占据一整行，内联元素不会
- 不要在属性值与单位之间留有空格（如：
"margin-left: 20 px"），正确的写法是 "margin-left: 20px" - 当值为0时，可不写单位
