HTML常用标签
不同的标签 作用是不一样的!
文本标题标签: h1 - h6
特点:有默认样式:文本会加粗、字号不一样
h1标签是比较特殊的:具有唯一性,在单独页面里面只能出现一次,一般用来放网站logo
h2-h6 : 板块的标题、一段叙述性文本的标题。
注:
h1 - h6 不能互相嵌套
文本的加粗&文本的倾斜
加粗:<b></b> <strong>语义化:表示强调</strong>
倾斜:<i></i> <em></em>
下划线、水平线、换行符
下划线: <u></u>
水平线: <hr>
换行符: <br>
段落标记
<p></p>
一般用来放一段叙述性文本。
注:
P标签不能进行相互嵌套
p标签里面不能嵌套 h1- h6
转义字符:
不换行的空格
< > 左右尖角号
© 备案图标
块|容器标签
<div></div>
作用:划分网页结构!!!
列表元素
无序列表:
<ul>
<li>新闻条新闻条新闻条新闻条</li>
<li>新闻条新闻条新闻条新闻条</li>
</ul>
特点:默认情况下 : 每一个li前面都存在一个列表符号(实心圆点)
怎么用:实现新闻列表、页面的主导航
有序列表:
<ol>
<li>新闻条新闻条新闻条新闻条</li>
<li>新闻条新闻条新闻条新闻条</li>
</ol>
特点:列表符号默认为数字
拓展:更改列表符号
type="a" 以小写英文字母排序
type="A" 以大写英文字母排序
type="i" 以小写罗马字母排序
type="I" 以大写罗马字母排序
start="" 控制排序的起始符号,只能接收数字。
自定义列表:
<dl>
<dt></dt>
<dd></dd>
</dl>
超链接
<a></a>
a标签的属性:
href="url" 作用:跳转地址。
<a href="#">新闻</a> //空连接,在当前页面进行跳转。
<a href="###">新闻</a> //空连接,不会跳转 (用来模拟一个按钮)
target=""
属性值:
_self 默认值:在当前窗口打开
_blank 新建一个窗口打开目标地址。
title="" 属性(不仅仅使用在a上面,大部分标签都支持)
用来做提示信息。
超链接默认的样式:文字为蓝色、下划线
图片
<img>
属性:
src="图片的url" 必须存在
alt="" 必须存在
alt属性的作用:
a:文本替换图片(当图片加载不出来的时候,显示alt里面的文本)
b:搜索引擎检测不到图片里面的文本,会查找alt里面的文本 (seo优化)
title="" :
title属性的作用:
a:提示文本
b:当作图片的一个小标题
width="" 控制图片的宽度
height="" 控制图片的高度
border="" 给图片添加边框
五、相对路径
相对路径的写法:
1:同级找同级文件 ./直接写目标文件名称
2:父级找子级 ./文件夹的名称/目标文件
3:子级找父级 ../ 返回上一级
六、表格
表格的作用:
显示数据!
表格标签:
<table>
<tr>
<td></td>
</tr>
</table>
table 表格
tr 行
td 列
表格的属性:
width="" 宽 (table上面添加 整个表格的宽,如果添加在td上 每列的一个宽)
height="" 高
border="" 添加边框
bordercolor="" 边框颜色
cellpadding="" 内容距离边框的一个间距
cellspacing="" 边框与边框之间的间距
align="" 水平对齐方式 属性值:left/ right/ center
valign="" 垂直对齐方式 属性值:top/ bottom/ middle
单元格的合并:
只要跨行:就是合并行
如果没有跨行:就是合并列
行合并: rowspan="合并的单元格的数量"
列合并: colspan="合并的单元格的数量"
注:无论合并行 还是 合并列 都是给td添加属性。和谁合并就删除谁。