HTML 学习笔记

253 阅读4分钟

常用标签

<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-topmargin-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注意事项

  1. HTML不分大小写,所以<p><P>没有区别,但建议小写
  2. HTML标签之间的嵌套必须对应的上

未完待续:)