版权声明:请注明原创地址 https://blog.csdn.net/xy_best_/article/details/89453879
html格式:
<!DOCTYPE html> 声明是H5
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!--对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk"。-->
<title>测试</title>
<!--网页标题-->
<meta http-equiv="refresh" content="x;URL=https://www.baidu.com">
<!--x秒后跳转到对应的网址,注意引号-->
<meta http-equiv="content-Type" charset=UTF8">
<!--指定文档的编码类型-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="地球在自转">
<!--通过关键字查看或显示内容-->
<script>
alert("hello 。。。")
</script>
<!--弹窗显示-->
......
</head>
<body>
......
</body>
</html>
link标签也存在于head中,作用如下
1.将样式引入到网页中
<link ref="stylesheet" href="css样式地址.css"/>
2.给网页title前面加个图标
<link rel="icon" href="图标地址.icon"/>
head内容没有补充
标签分类:
主要分为两类
1、块级标签:
2、内联标签:
注意点:
1、关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
-块元素的特点:
1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。
2.元素的高度、宽度、行高和顶底边距都是可以设置的。
3.元素的宽度如果不设置的话,默认为父元素的宽度。
-内联元素的特点:
1.可以和其他元素处于一行,不用必须另起一行;
2.内边距和外边距、高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度
3.可以通过css来将它变成为块元素之后然后就可以用css其他样式应用了。
一.块级标签 : h1~h6、p、div、hr、ol、dl、table、ul、form
1.默认占浏览器宽度
2.能设置长和宽
h标签:
<h1~h6>字体加粗变黑,h后面的数字越大,字体越小 </h1~h6>
p标签:
<p>文本标签,可以显示大量文字 </p>
注意点:
p标签不能包含块级标签,p标签也不能包含p标签。
<p> <div></div></p>---错误
div标签:
没有自己的特点,但是成为了优点,相当于白纸,可以自己画图
hr标签:
显示横线<hr>
ul标签(双标签):
无序的列表(内容前面显示实心圆空心圆等图标)
例如:
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:
disc(实心圆点,默认值),
circle(空心圆圈),
square(实心方块),
none(无样式)
ol标签(双标签)
有序的列表(内容前面显示数字、大小写字母、大小写罗马)
例如:
<ol type="1" start="1">
<li>第一项</li>
<li>第二项</li>
</ol>
start:从第几个开始
type属性:
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
table标签(双标签):
表格样式显示
格式:
<table>
<thead>
<tr>
<th>字段1</th>
<th>字段2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
</table>
实例:
<table>
<thead >
<tr aria-rowspan="30">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行姓名</td>
<td>第一行年龄</td>
<td>第一行性别</td>
</tr>
<tr>
<td>第二行姓名</td>
<td>第二行年龄</td>
<td>第二行性别</td>
</tr>
</tbody>
</table>
说明:
<th>的内容时加粗的,<td>的内容没有加粗
dl标签(双标签):
标签-内容
例如:
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
二.内联标签(行内标签) img、a、u、i、b、span、input、lable
1.根据内容决定长度
2.不能设置长和宽
img标签(单标签)
显示图片标签
例如:
<img src="图片路径" alt="加载失败的提示" title="鼠标放置时的提示" width或height="图片的宽高" >
a标签(双标签)
1.超链接标签
例如:
<a href="链接跳转路径" target="新建tab或当前页面打开,_blank为新建tab,默认是当前页(_self)">
<span style="color:#FF00FF;">链接的文案显示 </span>
2.可以跳转到当前页面的指定位置
例如:
<a href="#a2">a1跳转到a2</a>
......
<a href="" id="a2">被跳转位置</a>
b标签:加粗
i标签:斜体
u标签:下划线
s标签:删除
br标签:换行
三、剩余的标签
特殊符号对应的代码:
空格:
¥ : ¥
> : >
< : <
& : &
版权:©
注册:®