html快速成长(2)-常用标签
常用的标签其实也很简单, 平时我们百度,或者查找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>