html_02 | HTML——② HTML 元素、属性详解
本文推荐 PC 端阅读~
本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码
html_02
复制代码
1. meta 有哪些常见的值？
2. meta viewport 是作什么用的，怎么写？
3. 列出常见的标签，并简单介绍这些标签用在什么场景？
4. 如何在 html 页面上展现 <div></div> 这几个字符？
5. 你是如何理解 HTML 语义化的？
6. 前端须要注意哪些 SEO？
7. 你对网页标准和 W3C 重要性的理解？
8. 关于语义化，如下说法错误的是？（不定项）
✅ 在作页面作总体布局的时候，table 标签用起来很方即可以做为布局的一种推荐方案。
❌ 语义化的本质是可读性，让代码适合本身阅读、适合队友阅读、适合机器阅读。
✅ 对于 h1-h六、p、span 这些标签，用 div 替换也不要紧，修改它的 display 属性便可。
❌ 使用语义化标签能让代码更简洁，因此能用尽可能用。
复制代码
前言： 上一篇《HTML——① HTML 基础》中，咱们对 HTML 有了初步的认识，在彻底掌握的基础上，这一篇咱们将会接触大量经常使用的“标签元素”及其“属性”等。知识点不少，可是，细细的看下去，收获必定很大。css
1 学完这篇要达到的目标
随便打开一个页面，鼠标指到任意位置都知道该用什么标签就算 OK 。html
1.1 提早给出总结
咱们在选用标签时，就去跟他的本质功能去作对应，尽可能选用语义化的标签来构建整个页面框架：前端
- 若是是标题，就用
<h>； - 若是是一段话，就用
<p>； - 若是不知道他是什么，若是这个东西能占一行，就用
<div>；若是没有一行，就一个小小的位置，就用<span>； - 若是是可点击的就用一个
<a>连接； - 若是像那种并列一排排的，甚至还有一点一点，就用“列表”；
- 若是看到一个表格，就用
<table>； - 若是看到了一个输入框，就用
<input>。
2 细说各元素，各属性
2.1 元数据 <meta>
2.1.1 指定文档编码
<meta charset="UTF-8">
复制代码
2.1.2 适配移动端页面（理解并牢记）
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码
注释：面试
width=device-width宽度 = 设备宽度user-scalable=no用户缩放 = 不容许initial-scale=1.0初始比例 = 1maximum-scale=1.0最大比例 = 1minimum-scale=1.0最小比例 = 1
2.1.3 定制页面图标（即页面标签前边的小图标）
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
注释：href="favicon.ico" 这里边放这个图标的图形文件地址。
复制代码
2.1.4 设置 referer（图片所在的当前这个页面的地址）
<meta name="referer" content="never">
复制代码
2.1.5 添加页面描述（即咱们在搜索时看到的网站介绍）
<meta name="description" content="注册即表明你赞成《知乎协议》注册机构号……">
复制代码
2.2 <head> 头部元素里边还能够放：CSS 和 JS
<link rel="stylesheet" href="--.css">
<script src="--.js"></script>
复制代码
- 注释：正如上篇中所说，头部元素
<head>里边全部的标签元素都不会显示给用户，但它会承载一些与页面描述相关的东西：CSS 样式、meta、title 等。 - 注释：咱们这里的
<link>标签，来引入的 CSS 样式属于咱们最经常使用的外部样式表。有一点咱们必须清楚：HTML 创建内容的“结构”，CSS 提供“样式”和“表现”。
2.3 列表
- 任务：写出如下图片（本文摘取）的 HTML 。
🔗效果及源码连接浏览器
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Oli-Zhao的前端一万小时</title>
</head>
<body>
<h1>1、学完这篇要达到的目标</h1>
<p>随便打开一个页面，鼠标指到任意位置都知道该用什么标签就OK。<br>
提早给出总结（咱们在选用标签时……
</p>
<ul> <!--注释1-->
<li>若是是标题，就用<h>;</li> <!--注释2-->
<li>若是是一段话，就用<p></li> <!--注释3-->
<li>若是是可点击的就用一个<a>连接；</li>
<li>若是像那种并列一排排的，甚至还有一点一点，就用“列表”；</li>
<li>……</li>
</ul>
</body>
</html>
复制代码
- 注释1：
<ul>是 Unordered List——无序列表的简称；而<ol>是 Ordered List——有序列表的简称。两者惟一的区别就是，有序列表是123……开头，而无序列表是小黑点开头。其余格式同样，再也不赘述； - 注释2：
<ul>或<ol>直接嵌套的标签是<li>标签，他们之间不容许再嵌套任何标签。须要嵌套的话，要嵌套在<li>标签里； - 注释3：
<>这个乍看如乱码同样的字符就是咱们 HTML 中的“实体”，lt 是 less than “小于”的简称；gt 是 greater than “大于”的简称。而后前边加一个&字符——实体都是以&开头，以;结尾。咱们想显示出<h>这样一个文本，咱们在 HTML 中是不能直接打出<或>等这种符号的，否者会被浏览器直接识别成元素，所以咱们要进行特殊处理。
💡更多实体请参考 ：实体符号参考手册bash
2.4 自定义列表
即一个文档里一个标题一个介绍，一个标题一个介绍……：框架
- 任务：写出如下图片（本文摘取）的 HTML。
🔗效果及源码连接less
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Oli-Zhao的前端一万小时</title>
</head>
<body>
<h1>2、细说各元素，各属性</h1>
<p>1. 元数据<meta>:</p>
<dl>
<dt>-- 指定文档编码：</dt>
<dd><meta charset="UTF-8"> </dd>
<dt>-- 适配移动端页面：</dt>
<dd><meta name="viewport" content="widt……></dd>
<dt>-- 定制页面图标（即页面标签前边的小图标）：</dt>
<dd><link rel="shortcut icon" href="favicon.ico……><br>
注释：href="favicon.ico" 这里边放这个图标的图形文件地址。
</dd>
</dl>
</body>
</html>
复制代码
2.5 超连接标签
2.5.1 简单连接
<a href="这里写连接地址" title="Oli-Zhao的前端一万小时">知乎-oliver</a>
注释：这里的 title 属性，做用就是：当咱们把鼠标停在 oliver 上时，会弹出一个文本框：
Oli-Zhao的前端一万小时。
复制代码
2.5.2 外部连接
将 target 设置成 _blank 时，点击这个连接，浏览器会新开一个窗口打开该网页：布局
<a href="这里写连接地址" title="Oli-Zhao的前端一万小时" target="_blank">知乎-oliver</a>
注释：固然这里的 target 属性还能够设置成其余值。
复制代码
2.5.3 返回页面顶部连接
<a href="#">返回页面顶部</a>
注释：这里的 # 后边是能够加东西的，能够是文档中某个元素的 ID，也能够是某个标题等等（但前
提是这些东西要惟一，否则没办法定位到具体位置）。
复制代码
2.5.4 图片连接
用图片来做为连接可点击的对象。学习
2.5.5 下载连接
<a href="https://……这里放下载的连接" download>下载</a>
注释：当咱们点击“下载”二字时，就会自动下载这个连接的东西。
复制代码
2.5.6 电话连接
<a href="tel:+86177******">打电话给oliver</a>
注释：当用户是手机浏览页面时，点击“打电话给oliver”，手机就会自动拨号到这个号码。
复制代码
2.5.7 Email 连接
<a href="mailto:olizhao725@gmail.com">发邮件给oliver</a>
注释：当点击“发邮件给oliver”时，则自动打开邮箱跳转到写信页面；
<a href="mailto:olizhao725@gmail.com" cc="amantang@gmail.com">发邮件给
oliver并抄送给Aman</a>
注释：当点击"发邮件给oliver并抄送给Aman"，则自动打开邮箱跳转到写信页面并填好抄送人。
复制代码
2.6 表格
- 任务：将上文中“实体”示例的表格用 HTML 写出来。
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Oli-Zhao的前端一万小时</title>
<style type="text/css"> /*注释1*/
table {
border-collapse: collapse; /*注释2*/
}
th, td {
border: 1px solid green; /*注释3*/
}
</style>
</head>
<body>
<table> <!--注释4-->
<thead> <!--注释5-->
<tr> <!--注释6-->
<th>显示结果</th>
<th>描述</th>
<th>实体名称</th>
<th>实体编号</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>空格</td>
<td>&nbsp;</td>
<td>&#160;</td>
</tr>
<tr>
<td><</td>
<td>小于号</td>
<td>&lt;</td>
<td>&#60;</td>
</tr>
<tr>
<td>></td>
<td>大于号</td>
<td>&gt;</td>
<td>&#62;</td>
</tr>
<tr>
<td colspan="4">……</td> <!--注释7-->
</tr>
</tbody>
</table>
</body>
</html>
复制代码
- 注释1：
<style type="text/css"> /*注释1*/ table { border-collapse: collapse; /*注释2*/ } th, td { border: 1px solid green; /*注释3*/ } </style>
复制代码
咱们 CSS 的引用能够采用在表头里边加 <style> 样式元素来实现，注意格式。
这里边的 type=text/css 是咱们 <style> 元素的属性——实际工做中对于本元素这个属性能够不用写，全部浏览器均可以知道你用这个元素就是指的是 CSS 。属性的做用是用来提供元素的一些额外信息。
- 注释2：
<style type="text/css"> /*注释1*/ table { border-collapse: collapse; /*注释2*/ } th, td { border: 1px solid green; /*注释3*/ } </style>
复制代码
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有如下几个值：
-- separate 默认值：边框会被分开，不会忽略 border-spacing 和 empty-cells 属性；
-- collapse ：若是可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性；
-- inherit ：规定应该从父元素继承 border-collapse 属性的值。
- 注释3：
<style type="text/css"> /*注释1*/ table { border-collapse: collapse; /*注释2*/ } th, td { border: 1px solid green; /*注释3*/ } </style>
复制代码
这里是设置 <th> 、 <td> 元素的“边界、边框—— border”的样式。
-- solid：线；
-- dashed：破折号；
-- dotted：点
- 注释4：
<table> <!--注释4-->
<thead> <!--注释5-->
<tr> <!--注释6-->
<th>显示结果</th>
<th>描述</th>
<th>实体名称</th>
<th>实体编号</th>
</tr>
</thead>
复制代码
表格开始。
-
注释5：table head 表头开始（在页面展现时会以加粗的方式显示）。
-
注释6：
- tr = table row 表格的一行，下边只能嵌入
<td>或<th>元素。 - td = table data cell 表示行中的一个列；
- th = 是表头里边用于和 td 一样做用的元素。
- tr = table row 表格的一行，下边只能嵌入
-
注释7：
<tr>
<td colspan="4">……</td> <!--注释7-->
</tr>
复制代码
colspan 属性规定单元格可横跨的列数。这里咱们让他横跨了 4 列（注意看页面效果）；而对应的横跨多个行数是 rowspan 属性。——这两个属性是用在 <td> 、 <th> 元素里的。
后记： 这篇的学完，咱们也算是渐入佳境。稍后把下一篇的“表单”学完，那基本上咱们能够把一个页面的大致框架写出来了。对于其余很是用剩余标签、属性，咱们将在后边的学习、工做中各个击破。
祝好，qdywxs ♥ you！
相关文章
- 1. html基础元素，属性
- 2. 了解HTML表单之input元素的30个元素属性
- 3. 1-HTML元素 属性 格式化
- 4. CSS HTML元素布局及Display属性
- 5. 【HTML】块级元素的盒子属性
- 6. 前端————HTML页面元素和属性
- 7. 3、HTML 学习记录——元素、属性
- 8. HTML元素分类, CSS padding margin border属性详解
- 9. HTML accesskey属性详解
- 10. html中Marquee属性详解
- 更多相关文章...
- • W3C HTML 活动 - W3C 教程
- • XQuery FLWOR + HTML - XQuery 教程
- • JDK13 GA发布：5大特性解读
- • Flink 数据传输及反压详解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
