常用标签
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<p>段落标签</p>
<br />换行符标签
<hr />下划线标签
<b>字体标签</b>
<i>字体标签</i>
<u>字体标签</u>
<strong>带有语义的字体标签</strong>
<em>带有语义的字体标签</em>
<ins>带有语义的字体标签</ins>
<ul type='circle'>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol type="a" start="3">
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>定义列表</dt>
<dd>definition list</dd>
<dd>definition list</dd>
</dl>
<!-- 注释 -->
<div>容器标签</div>
<span>文本标签</span>
<a href="https://www.baidu.com">外部超链接</a>
<a href="https://www.baidu.com" target="_blank">外部超链接</a>
<a href="./other.html">本地超链接,相对路径下的文件</a>
<a href="/Users/xxx/Desktop/test.docx">下载链接,浏览器识别不了的文件点击会下载,使用绝对路径</a>
<a href="#content">锚点标签</a>
<a href="#top">锚点标签:回到顶部</a>
<div id="content">content</div>
<pre>
预排班标签
内容全部显示在页面中
</pre>
<code>代码标签</code>
<img src="./test.png" alt="图片不显示时的替换文本">
</body>
</html>
标签分类
标签的分类有两种:
- 单标签,单标签没有内容,如
<br /> - 双标签,双标签有内容,如
<p>内容</p>
标签可以有属性,属性有各自的作用,如title属性值在鼠标悬浮在页面中该标签上时会显示
HTML版本为5
字符集:utf-8 全球文字都涵盖 标签的语义化: 方便程序员阅读 搜索引擎爬虫解析 残障人士浏览网站,阅读设备正确读取语义化的标签 标签属性: 标签的 rel 属性用于指定当前文档与被链接文档的关系。
用作button使用的div,如屏幕阅读器读到会认为这是一个button 当焦点落到input时,读屏软件会读出aria-label中的内容标签种类: html标签分为块状元素、行内元素(内联元素)、行内块元素。
块状元素独占一行,宽度为父元素100%宽度,可设置外边距margin、内边距padding、边框border,高度由子元素撑开。
行内元素宽高由子元素撑开,多个行内元素同行显示,可设施内外边距跟边框,但margin-top、margin-bottom无效,设置宽高属性也无效。
行内块元素同行显示,即默认宽高由子元素或内容决定,但像块元素一样可设置宽高,内外边距和边框等。
常用标签:
a标签即可做内外链接使用,也可做本页面内的锚点使用
HTML
HTML常用标签
认识常用的标签及他们的语义
<!DOCTYPE html>
<html>
<head>
<!-- 网页在浏览器选项卡中的标题 -->
<title>Document</title>
</head>
<body>
<!-- 注释 -->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>段落</p>
<a href="https://www.baidu.com">链接</a>
<!-- 换行符 -->
<br />
<img src="#" alt="图片加载失败时显示的文本">
<strong>强调的文本,默认样式是字体粗体</strong>
<em>强调的文本,默认样式是字体斜体</em>
<!-- 无序列表 -->
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<!-- 表格 -->
<table>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
<!-- 表单 -->
<form>
<!-- 标签(与表单元素配合使用) -->
<label>标签</label>
<!-- 输入框 -->
<input type="text" />
<!-- 单选框 -->
<input type="radio" />单选框选项
<input type="radio" />单选框选项
<!-- 多选框 -->
<input type="checkbox" />多选框选项
<input type="checkbox" />多选框选项
<!-- 选择器 -->
<select>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<!-- 多行输入文本框 -->
<textarea cols="30" rows="10"></textarea>
<!-- 文件上传标签 -->
<input type="file" />
<button>按钮</button>
</form>
<!-- 音频标签 -->
<audio controls></audio>
<!-- 视频标签 -->
<video controls></video>
<div>通用的,无样式的块级标签</div>
<span>通用的,无样式的内联标签</span>
</body>
</html>
HTML版本
最新的HTML版本是HTML5,当HTML文档首行为<!DOCTYPE html>时,表明这是以HTML5标准开发的文档
HTML元素分类
- 块级元素,在网页中默认样式是独占一行,如
<div> - 行内元素,在网页中默认会跟其他的行内元素在同一行显示,如
<span> - 行内块元素,在网页中默认会跟其他的行内元素或行内块元素在一行显示,
HTML标签分类
HTML标签有单标签、比如说<br />,<img />这类标签自身即可完成它的作用,而双标签如<div></div>通常情况下标签内部需要添加其他标签,如果标签内部不需要其他标签,那么也可以写成<div />这种样子。
HTML元素和标签的关系
标签是基于HTML语言本身来说的,而HTML元素指的是浏览器解析HTML文档文档时,会在内存中建立DOM(Document Object Model)树,树上有很多标签对应的节点,这些节点就叫做元素,二者平时叫法上可以等同。
HTML标签属性
HTML标签本身作用有限,可以给标签添加属性,来增强他的作用,如<a>标签的href属性,则规定了点击<a>标签后可以跳转的网址
HTML注意事项
- HTML不分大小写,所以
<p>和<P>没有区别,但建议小写 - HTML标签之间的嵌套必须对应的上
未完待续:)