标签分类
HTML标签按功能分类有：基础标签，格式标签，表单标签，框架标签，图像标签，音频视频，链接标签，列表标签，表格标签。今天就主要介绍基础、格式、图像、链接、列表标签以及块级元素与内联元素的概念区别。
基础标签
html
定义文档，由头部和主体组成
<html>
<head>
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<body>
<p>title显示在网页标题栏</p>
<p>body显示网页内容</p>
</body>
</html>
head
定义文档头部，描述了文档各种属性和信息，包含文档的标题，在Web中的位置以及与其他文档的关系。
可包含的标签：title，meta，link，script，style
title
1.定义文档标题
2. 显示窗口标题栏或状态栏
3.默认名称
4.必须包含内容
5.关键词有利于SED（搜索引擎）优化
meta
提供有关页面的元信息
常见meta：keywords（关键词）
description（网站内容描述）
服务器发送文件类型
<meta name="玛莎拉蒂" content="汽车" />
<meta name="玛莎拉蒂" content="性能优良，功能完善，外观优雅" />
<meta charset="utf-8" />
link（引入css样式表）
定义文档与外部资源的关系，常用链接样式表
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" />
rel即relationship，指引入资源与当前文件的关系，stylesheet指样式表
type表示浏览器的解析方式
href表示被链接文档的地址
script（引入js）
定义客户端脚本，既可以包含脚本语句，也可以通过src属性指向外部脚本文件
标签中
<script type="text/javascript">
alert("这里是弹出框")
</script>
效果
src属性
<script type="text/javascript" src="/js/iquery.min.js"></script>
style
定义样式信息
<style type="text/css">
.div1{
width: 100px;
height: 100px;
border: 1px solid black;/*边框:宽度 线条 颜色*/
</style>
效果
body
定义主体
常见属性有：background，bgcolor…
h1-h6
分级标题
常见align属性，属性值有：left（靠左），center（居中），right（靠右），justify（两端对齐）
p
定义段落
br
换行
span
组合行内元素，不加应用样式时与其他文本无异
div
定义分区或节，元素的组织工具
hr
创建水平线分割文档
属性：align，width（宽度），size（高度）
格式标签
address 定义文档或文章作者联系信息，以斜体显示
b 粗体
del 删除
em 强调内容，以斜体显示
i 斜体，但无强调意义
pre 保留空格和换行符
small 小号文本
big 大号文本
strong 强调内容，程度比em更强，加粗显示
u 下划线
sup 上标
sub 下标
<address>这是作者的联系方式</address>
<b>加粗文本</b>
<del>删除文本</del>
<em>em强调文本</em>
<i>斜体文本</i>
<p>
这是p标签：
床前明月光
疑是地下霜
</p>
<pre>
这是pre标签
床前明月光
疑是地下霜
</pre>
<p>这是一般文本</p>
<small>这是小号文本</small>
<big>这是大号文本</big>
<strong>strong强调文本</strong>
<u>下划线</u>
文本上标<sup>上标</sup>
文本下标<sub>下标</sub>
效果
图像标签
img
必需值：src，alt
其他值：title，width，height，border，align（top，bottom，middle，left，right）
链接标签
a
target属性规定打开的位置，值有：blank（在新标签打开），parent（在父标签打开），self（在自窗口打开），top（清除所有框架，载入到浏览器窗口）
列表标签
1.无序列表
项目符号类型type有：disc（实心默认），circle（空心），square（方块）
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
效果
2.有序列表
项目符号类型type有：“A”（A,B,C…）,“a”（a,b,c…）,“i”（i,ii,iii…）,“I”（I,II,III…）
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
效果
3.定义列表（无type属性）
<dl>
<dt>第一章</dt>
<dd>第1小节</dd><!--dd是对dt内容的描述，两者属于父子关系-->
</dl>
效果
块级元素与内联元素
块级元素
1.独占一行
2.元素的容器，可容纳内联元素和其它块元素
3.可设定宽高，其中宽度始终与浏览器一致，和内容无关
4.可设置四个方向的padding（外边距）和margin（内边距）值
5.显示方式display：block
内联元素
1.多个占一行
2.只能容纳文本和其他行内元素
3.不可设置宽高，宽度与内容相关，高度由元素内部字体大小决定
4.只能设置水平方向（left，right）的padding、margin值
5.显示方式display：inline
<a>a文本</a>
<a>a文本</a>
<a>a文本</a>
<a>a文本</a>
<p>p文本</p>
<p>p文本</p>
<p>p文本</p>
比较效果
应用
.div4{
width: 100px;
height: 100px;
background-color: bisque;
display: none;/*展示方式为空,即不再展示这段内容*/
display: block;/*展示为块级元素*/
}
.div5{
width: 100px;
height: 100px;
background-color: bisque;
display: inline;/*展示为行内元素*/
<div class="div4">
文字1
</div>
<div class="div5">
文字2
</div>
效果
1952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
