html基础标签
一、HTML简介
1. 什么是HTML
-
HTML:HyperText Markup Language,超文本标记语言。
-
作用:用来编写网页的。
2. 写一个简单的HTML
<html>
<head>
<title>page title</title>
</head>
<body>
<font color="red">hello, kitty</font>
</body>
</html>
3. HTML的语法特点
-
文件后缀名:
.html
或者.htm
-
由一堆标签组成的
-
标签:
<关键字>内容</关键字>
或者<关键字/>
自闭合标签 -
标签可以嵌套
-
-
开始标签上可以增加属性:属性对标签的进一步修饰
-
属性:
<关键字 属性名="值" 属性名="值">内容</关键字>
-
-
不区分大小写
-
不需要编译,可以使用浏览器直接打开
4. idea开发HTML
-
选择的是:static web
二、HTML标签
1. 文字排版标签
1.1 标题标签:<h1>~<h6>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
-
特点:
-
默认加粗
-
内置字号:h1最大,h6最小
-
独占一行
-
1.2 横线标签:<hr/>
<hr color="颜色" size="粗细" width="长短" align="水平位置"/>
-
常用属性:
-
color:颜色,red,blue,green
-
size:粗细,50px
-
width:长短,500px
-
align:水平位置,left, center, right
-
1.3 段落标签:<p>
,换行标签:<br/>
<p>
一个p标签是一个段落;如果要多个段落,就写多个p标签。换行<br/>这些内容另起一行换行显示
</p>
<p>
一个p标签是一个段落;如果要多个段落,就写多个p标签
</p>
-
特点:
-
段落之间有空白间隔
-
换行后行之间没有空白间隔
-
1.4 文字标签:<font>
,粗体字:<b>
,斜体字:<i>
<font size="字号" color="颜色" face="字体">黑马程序员</font>
<b>粗体字</b>
<i>斜体字</i>
-
属性:
-
size:字号,1~7. 最小是1, 最大是7, 默认是3
-
face:字体,电脑上有的字体,才会按设置显示字体
-
2. 图片标签
2.1 图片标签:<img/>
<img src="图片路径" width="显示宽度" height="显示高度" title="鼠标悬浮提示" alt="图片加载不出来时,显示的提示"/>
<img src="../img/mm.jpg" width="500px" title="沙滩美女" alt="这是个妹纸"/>
-
属性:
-
src:图片路径,必须属性。其它属性都是非必须的
-
width:宽度
-
height:高度。 通常只写width或者只写height,图片会等比例缩放显示;如果都写,图片可能会变形
-
3. 清单标签和超链接标签
3.1 清单标签
<!-- 1. 无序清单:ul+li -->
<ul type="清单项前边的符号类型">
<li>小龙虾</li>
<li>麻婆豆腐</li>
<li>北京烤鸭</li>
</ul>
<!-- 2. 有序清单:ol+li -->
<ol type="清单项前边的序号类型">
<li>可乐</li>
<li>雪碧</li>
<li>橙汁</li>
</ol>
-
ul:无序清单本身,支持的属性:
-
type:每个清单项前边的符号类型,常用值有:
-
disc:小圆点,默认值
-
circle:小圆圈
-
square:小方块
-
-
-
ol:有序清单本身,支持的属性:
-
type:每个清单项前边的序号类型,常用值有:
-
1:阿拉伯数字序号
-
a/A:英文字母序号
-
i/I:罗马数字序号
-
-
3.2 超链接标签<a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="_01清单标签.html" target="_blank">清单页面</a>
-
属性:
-
href:跳转到哪个页面,写路径
-
target:新页面面哪显示,常用值有:
-
_self:在当前窗口显示(会覆盖掉原页面),默认
-
_blank:在新窗口显示(原页面保留)
-
-
4. 表格标签
4.1 创建表格
<table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
<th>表头单元格3</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
<td>单元格1-3</td>
</tr>
<tr>
<td>单元格2-1</td>
<td>单元格2-2</td>
<td>单元格2-3</td>
</tr>
</tbody>
</table>
-
table标签:表格本身,常用属性:
-
border:边框线。1表示有边框线
-
width:表格的宽度
-
cellspacing:单元格之间的间隔
-
bgcolor:背景颜色
-
align:表格的水平位置
-
-
tr标签:表格里的行
-
bgcolor:行的背景颜色
-
align:行里内容的水平位置
-
height:行高
-
-
td标签:行里的单元格
-
bgcolor:单元格的背景颜色
-
align:单元格里内容的水平位置
-
-
caption标签:表格的标题,写在table标签里
-
th标签:行里的表头单元格,是一种特殊的td,自带样式:加粗并居中
-
thead、tbody、tfoot:没有实际作用,仅仅是划分的标签
4.2 合并单元格
4.2.1 步骤:
-
确定用什么属性:跨行用rowspan,跨列用colspan
-
确定属性值是几:要合并几个单元格,值就是几
-
确定属性加在哪:加在要合并的单元格,最前边的那个单元格上
-
删除被合并掉的单元格
<table border="1" width="500px" align="center" cellspacing="0" bgcolor="yellow">
<tr>
<td colspan="2">1-1</td>
<td>1-3</td>
<td rowspan="2">1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td colspan="2" rowspan="2">3-2</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-4</td>
</tr>
</table>
5. 其它标签head
5.1 文档声明
-
声明给浏览器看的,声明的是当前网页使用的是哪个版本的HTML编写的。要写在html的最前边
4.2 head标签
<head>
<!--charset:当前页面的字符集-->
<meta charset="UTF-8">
<!--网页标题-->
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
<!--description:搜索引擎搜索到的结果里,显示的网站描述-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。" />
<!--Keywords:搜索引擎搜索的关键字-->
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
<!--icon:网页标题前边的图标-->
<link rel="icon" href="http://www.jd.com/favicon.ico" mce_href="http://www.jd.com/favicon.ico" type="image/x-icon" />
</head>
三、其它
1. 颜色的写法
-
颜色的名称:red, blue, green, yellow, ...
-
十六进制的色码:# + 6位十六进制的数字,比如:
#FFFFFF
-
前2位:红色的值;中间2位:绿色的值;后边2位:蓝色的值;
-
如果红、绿、蓝值一样,是
黑~白
-
如果6位数字一样,可以简写。比如:
#666666
可以简写成:#666
-
2. 尺寸的写法
-
固定像素值:500px
-
百分比写法:50%
-
百分比,是根据父容器计算的百分比。而不是直接根据页面计算的
-
3. 路径的写法
-
绝对路径:
-
带盘符的路径,比如:
C:\a.jpg
-
url地址,比如:
http://www.baidu.com/aaa.jpg
-
以/开头的路径:在web核心里会见到
-
-
==相对路径==:
-
以
./
开头的路径:从当前目录里找。比如:./mm.jpg
,当前目录里的mm.jpg
文件-
./
可以省略不写
-
-
以
../
开头的路径:从上级目录里找。比如:../img/mm.jpg
,上级目录里找img,从img里的mm.jpg
-
4. 特殊字符的写法
-
如果有一些符号,是html语法里使用的,比如:
<
,可能会出现语法错误。 -
使用实体字符替换特殊字符:
<
:<
>
:>
&
:&
查看w3school手册