二、html常用标签


一、<!DOCTYPE>标签
  <!DOCTYPE>标签:声明位于文档中的最前面的位置,处于<html>标签之前。告知浏览器文档使用那种html或xhtml规范。
  作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。
     BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
    CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。
注:这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat

二、<head>内常用标签
1、<meta>标签:
name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<meta name="keywords" content='meta 总结,html,meta,meta属性,meta跳转'> #关键字搜索
<meta name="description" content="你好"> #描述性内容
<meta charset="UTF-8"> #告诉解释器文本按照utf-8编码
等价于上面
<meta http-equiv="content-Type"charset="utf-8">

2、<link>标签
<link rel="icon" href="路径"> #设置头部图标,就是标题前面的小图片
<link rel="stylesheet" href=".css文件"> #引入cs文件
<script src=".js文件"></script> #引入js文件

3、标题标签
<title>Title</title> #标题

例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="meta总结,html,这是我的meat">
<meta name="description" content="这是描述性内容">
<title>lesson</title>
<link rel="icon" href="//图片路径"> <!--设置标题图片-->
<link rel="stylesheet" href=".css文件"> <!--引入css文件-->
</head>
<body>
<div>关键字搜索</div>
</body>
</html>

三、<body>内常用标签
1
<h1>...<h6>标签 #从大到小,用来表示标题
<p> #段落标签,包裹的内容被换行,并且上下内容之间有一行空白
</br> #换行标签
<b>或者<strong> # 加粗标签
<strike> #为文字加上一条中线
<em> #文字变成斜体
<sup>和<sub> #上角标和下角标
<hr> #水平线
<div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

每一个 &nbsp 代表一个空格
&lt #小于号
&gt #大于号

例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="meta总结,html,这是我的meat">
<meta name="description" content="这是描述性内容">
<title>lesson</title>
<link rel="icon" href="//www.jd.com/favicon.ico"> <!--设置标题图片-->
<link rel="stylesheet" href="CSS_lesson.css"> <!--引入css文件-->
</head>
<body>
<div>关键字搜索</div>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<p>第1行</p>
<p>第2行</p>
<p>第3行</p>
<b>这是加粗标签</b>
<strong>这也是加粗标签</strong><br>
<strike>为文字加上一条横线</strike><br>
<em>文字变成斜体</em><br>
2<sup>3</sup> <!--上角标-->
2<sub>3</sub> <!--下角标-->
<hr> <!--水平线-->
<span>neilian</span> <!--内联标签不换行,跟div一样无实际意义-->
<span>BB</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span>AA</span> <!--每个&nbsp代表一个空格-->
<div>div1</div>
<div>div2</div> <!--块级标签,每次从新行开始-->
</body>
</html>

2、图形标签:<img>
src #要显示图片的路径
alt #图片没有加载成功的提示
title #鼠标悬浮时的提示信息
width #图片的宽
height #图片的高

3、超链接标签(锚标签):<a>
href #要连接的资源路径,格式为:href="http://www.baidu.com"
target: _blank #在新的窗口打开超链接,框架名称;在指定框架中打开链接内容

4、列级标签
<ul> # 无序列表
<li>
<ol> #有序列表
<li> #列表中的每一项
<dl> #定义列表
<dt> #列表标题
<dd> #列表项

5、table标签
<table>
<tr> #表行
<th>标题</th> #表头
</tr>

<tr>
<td>内容</td> #表数据
</tr>
</table>

属性:
border: 表格边框
cellpadding: 内边距
cellspacing: 外边距
width: 像素 百分比(最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)

例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--src图片加载路径-->
<!--alt图片没有加载成功的提示-->
<!--鼠标悬浮时的提示信息-->
<img src="a.jpg" alt="截图" title="进度" width="100px" height="100px">
<a href="CSS_lesson.css" target="_blank">点我</a> <!--href=超链接路径,target=_blank在新的窗口打开-->
<!--无序列表-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--#有序列表-->
<ol>
<li>aa</li> <!--列表中的每一项-->
<li>aa</li>
<li>aa</li>
<li>aa</li>
</ol>
<!--#定义列表-->
<dl>
<dt>一、</dt> <!--列表标题-->
<dd>1</dd> <!--列表项-->
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
</dl>
<!--表格标签-->
<table border="3px" cellpadding="8px" cellspacing="8px">
<tr>
<th>11</th>
<th>11</th>
<th>11</th>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>

<tr>
<th>11</th>
<th>11</th>
<th>11</th>
</tr>
<tr>
<td rowspan="2">333</td>
</tr>

</table>
</body>
</html>
posted @ 2021-05-19 11:34  ShadowFolk  阅读(73)  评论(0编辑  收藏  举报