超详细的HTML标签使用说明

183 阅读4分钟
<!--charset 属性规定 HTML 文档的字符编码。 -->
<meta charset="UTF-8">

<!--author(作者)-->
<meta name="author" content="oGaowang">

<!--keywords(关键字)-->
<meta name="keywords" content="前端,html,css,javascript ">

<!--description(网站内容的描述)-->
<meta name="description" content="该网站进行前端学习,提供html css javascript的学习">

<!--viewport(移动端的窗口,比较重要,后面有相关详细描述)-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--copyright(版权)-->
<meta name="copyright" content="Lxxyx">

<!-- 用于告知浏览器以何种版本来渲染页面。 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

<!--cache-control 指定请求和响应遵循的缓存机制
    no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
    no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
    public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果
    private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
    maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。 
-->
<meta http-equiv="cache-control" content="no-cache">

<!-- expires用于设定网页的到期时间,过期后网页必须到服务器上重新传输 -->
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

<!-- refresh网页将在设定的时间内,自动刷新并调向设定的网址 -->
<meta http-equiv="refresh" content="2000" URL=http://www.lxxyx.win/"> <!--
    Set-Cookie(cookie设定),如果网页过期。那么这个网页存在本地的cookies也会被自动删除 -->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT">

<!-- title网页的标题 -->
<title>我是网页的标题</title>
<!--h1 to h6定义1-6级标题,默认加粗,为块状元素 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<!--p定义段落,为块状元素 ,一般不要在p标签中插入其他的块状元素-->
<p>我是段落</p>

<!--ol定义有序列表,为块状元素 li定义列表项目,为块状元素-->
<ol>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
</ol>

<!--ul定义无序列表,为块状元素 li定义列表项目,为块状元素-->
<ul>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
</ul>

<!--dl定义列表,为块状元素 dt定义列表项目,为块状元素-->
<dl>
    <dt>我是列表</dt>
    <dt>我是列表</dt>
    <dt>我是列表</dt>
</dl>

<!--table定义表格-->
<table></table>

<!--form定义表单-->
<form>我是表单内容</form>

<!-- div块状元素,最常用的标签 -->
<div>我是div标签</div>

<!-- 表示地址的标签,块状元素,默认倾斜 -->
<address>我是地址</address>

<!-- pre表示格式化文本,能够保留标签中的格式 -->
<pre>表示格式化文本        里面的空格可以保留</pre>

<!-- hr 块状元素,为分割线 -->
<hr>

<!-- span 行内元素,无实际意义,比较常用-->
<span>我是span标签</span>

<!-- strong 行内元素,默认加粗-->
<strong>我是strong标签</strong>

<a href="https://www.baidu.com">我是a链接</a>

<sub>上标</sub>

<sup>下标</sup>

我是斜体

强调