常用的标签其实也很简单, 平时我们百度,或者查找w3cSchool都要详细的用法, 这里只是简单的列举几个
注意:块元素和内联元素
div就是一个块元素，
所谓的块元素就是会独占一行的的元素,无论他的内容有多少
他都会独占一整行。
p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的块元素，
并且不会为它里边的元素设置任何的默认样式，
div元素主要用来对页面进行布局的
span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：
a img iframe span
span没有任何的语义，span标签专门用来选中文字，
然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块元素
1. h1,标题标签
2. <a/>标签 , 可以跳转到外部的连接地址(网址), 也可以跳转到本地的文件网页(当前项目某文件路径), 也可以在当前网页跳到指定的位置(其实是根据选择器跳转)
3. <p></p>段落标签, 在网页上直接写空格或者分行是不起效果的，必须通过标签或者css样式进行决定, 所以这个时候的p标签就很重要了
4.<text></text>文本标签, 区别于p,这个是文字的
5.<span></span>空标签, 可以用在段落, 文字等标签内部,进行样式设置
6.<img>图片标签,显示本地或者网络图片,其中图片显示样式可以具体去百度
使用img标签来向网页中引入一个外部图片，
img标签也是一个自结束标签
属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width：可以用来修改图片的宽度,一般使用px作为单位
height ：可以用来修改图片的高度，一般使用px作为单位
宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小
如果两个值同时指定则按照你指定的值来设置
一般开发中除了自适应的页面，不建议设置width和height
其中图片的后缀代表的图片也不一样
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般使用JPEG来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多，并且支持复杂的透明
- 可以用来显示颜色复杂的透明的图片
图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
7.<form></form>表单标签
8.列表标签
列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：
1.无序列表
2.有序列表
3.定义列表
无序列表
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项，
一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
可选值：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
注意：默认的项目符号我们一般都不使用！！
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值：1，默认值，使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
ol也是块元素
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表
9.<hr/>标签
10.<br/> 换行
11.特殊额符号需要特出打出来
在HTML中，一些如< >这种特殊字符是不能直接使用，
需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
浏览器解析到实体时，会自动将实体转换为其对应的字符
实体的语法：
&实体的名字;
< <
> >
空格
版权符号 ©
12.其他文本标签
em和strong
- 这两个标签都表示一个强调的内容，
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示
<p>
今天天气<em>真不错</em>！
</p>
<p>
<strong>
注意：如果你不认真上课，你就找不到好工作！
</strong>
</p>
i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，
就可以使用b和i标签
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p>
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small
<p>
我是p标签中的内容<small>我是small标签中的内容</small>
</p>
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，
比如：书名 歌名 话剧名 电影名 。。。
<p>
<cite>《论语》</cite>是最喜欢的一般的书
</p>
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
<p>
子曰:<q>学而时习之不亦说乎！</q>
</p>
<div>
子曰:
<blockquote>
有朋自远方来，乐呵乐呵！
</blockquote>
</div>
使用sup标签来设置一个上标
<p>2<sup>2</sup></p>
<p>赵薇<sup><a href="#">[1]</a></sup></p>
sub标签用来表示一个下标
<p>H<sub>2</sub>O</p>
使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线
<p>
<del>17.75</del> <br />
15.54 <br />
</p>
ins表示一个插入的内容
ins中的的内容，会自动添加下划线
<p>
我们的老师真<ins>好啊</ins>！
</p>
需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码
<pre>
<code>
window.onload = function(){
alert("Hello World");
};
</code>
</pre>
网友评论