一、排版标签
1.标题标签:
为了使网页更具有语义化,HTML提供了六个等级的标题, 即 <h1><h2><h3><h4><h5><h6>.
2.段落标签:
在网页中把文字有条理的显示出来 ,将文字分段 <p>文本内容</p>
3.水平线标签:
将段落与段落之间用一条线隔开 ,使得结构清晰,层次分明 <hr/>
4.换行标签:
在HTML中一个段落的文字是从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签。 <br/>
5.div span标签:
div和span是没有语义的,单纯的用来布局。
例如: 运行结果:
<div>布局</div> 布局
<div>布局</div> 布局
<span>布局</span> 布局 布局
<span>布局</span>
总的来说:div标签之间的文本不能同在一行,而span标签之间的文本可以同在一行
6.文本格式化标签:
标签 | 显示效果 |
<b></b><strong></strong> | 文字以粗体方式显示 |
<i></i><em></em> | 文字以斜体方式显示 |
<s></s><del></del> | 文字以加删除线方式显示 |
<u></u><ins></ins> | 文字以加下划线方式显示 |
b,i,s,u只有使用,没有强调的意思,而strong,em,del,ins语义更加强烈
7.图像标签img:
要在网页中显示图像就需要用图像标签
该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必须属性。
基本格式:<img src="图片名.jpg"/>
属性 | 属性值 | 描述 |
src | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 数字 | 设置图像边框的高度 |
8.链接标签:
在HTML中创建超链接非常简单,只需要标签环绕需要被链接的对象即可,其基本语法格式如下:
<a herf=“跳转目标” target=“目标窗口的弹出方式”>文本或图像</a>
跳转目标:外部链接(需要添加http://www.baidu.com);内部链接(直接连接内部页面名称);#(空连接)
目标窗口弹出方式:self(默认当前窗口中打开,可不写);blank(在新窗口打开)
9.锚点定位:
<a herf="#名字">文字</a><br/>
<h3 id=”名字“>文字</h3>
当点击上方文字时,就会跳到下方文字。简单的说,就是赋予一个地址名字,然后利用这个名字将两个地址相连接并跳转。
10.base标签:
<base target="_blank" /> 表示一下打开的网页全为新窗口打开
11.特殊字符标签:
12.注释标签:
在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签
基本格式:<!--注释语句-->
13.路径:
实际工作中通常新建一个文件夹专门用来存放图像文件,这时在插入图像,就需要采用”路径“的方式来指定图像的位置。
相对路径:把图片放到本地,从本地找
2.图雪文件位于HTML文件的下一级文件夹。输入文件夹名和文件名,之间用广隔开,如<img SIC "img/mg01/ogogf P.
3.图像文件位于HTML文件的上一缓文件夹,在文件名之前加入“../”,如果是上两级。则需要使用“../../".以此类推。如img src="../logo.gif"/>
绝对路径:找到网上的图片,从网上找
用的是网上图片完整的网络地址。
14.列表标签:
无序列表(ul):无序列表的各个列表之间没有顺序等级之分,是并列的,<ul>里只能放li标签,而<li>里可以放任意标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
有序列表(ol):有顺序之分,结构与无序列表相同,不过前面会带有1,2,3,4.....
自定义列表:常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>