- 浏览器是什么?
首先浏览器是一个软件,是用来执行网页代码(包括HTML标签、CSS样式表和JavaScript脚本)的一个软件,然后把执行结果显示出来,常用的主流浏览器软件有Internet Explorer、Google Chrome、Firefox、Safari等,软件开发过程中常使用Google Chrome和Firefox浏览器,尤其Google Chrome浏览器。
- HTML是什么?
HTML全拼是:Hyper Text Markup Language,即“超文本标记语言”,是一种解释性语言,用于制作网页界面,使用该语言编写的网页最终被浏览器解释执行。
- HTML的结构是什么?
<html>
<!--用来标记HTML文档的开始和结束(html注释)-->
<head>
<!--用来标记HTML文档的头部开始和结束-->
</head>
<body>
<!--用来标记HTML文档的主体开始和结束-->
</body>
</html>
- HTML标签:
单标签:标签单独出现,语法:<标签名/>,比如<img/>。可以没有标签反斜线,即<img>也可以,但是这样不符合万维网联盟(World Wide Web Consortium,简称W3C) 规范.,
双标签:标签成对出现,语法:<标签名>内容</标签名>,比如<a></a>。
注意:HTML标签中的标签名不区分大小写,但为了符合W3C规范,推荐使用小写。
- HTML标签属性:
HTML标签属性放在起始标签的尖括号内,如果有多个属性,则使用空格分开,语法结构:
单标签:<标签名 属性名1="属性值1" 属性名2="属性值2" ... 属性名N="属性值N"/>,比如img标签中src 、width、height和title属性;
双标签:<标签名 属性名1="属性值1" 属性名2="属性值2" ... 属性名N="属性值N">内容</标签名>,比如a标签href和target;
注意:
1.属性之间使用空格间隔;
2.属性出现的先后顺序没有要求;
3.某些属性值可以不使用双引号引起来;但为了符合W3C标准,要求所有的属性值都使用双引号引起来;
- <head>标签的子标签:
- <titli>标签:用于设置页面标题
- <link>标签:用于设置页面标题的图标
- <body>标签的子标签:
- <img>标签:用于调用img内的各个格式的图片,视频等等。
例子如下:(可以发现都是单标签)
<html>
<head>
<meta charset="utf-8" />
<title>百度一下,你就知道</title>
<link rel="shortcut icon" href="img/png-1536.png" type="image/x-icon" />
</head>
<body>
<img src="img/png-1548.png" width="30%" title="这是头猪" />
<body>
<html>
执行结果如下:
- <body>标签的子标签:
- b标签,加粗
- i标签,斜体
- del标签,中划线
- h标签,h1——>h6,用于区分大小
- span标签,无格式,但是以后css样式会用到很多
例子如下:
<i>十二生肖</i>
<b>十二生肖</b>
<del>十二生肖</del>
<h1>十二生肖</h1>
<h6>十二生肖</h6>
<span>十二生肖</span>
执行结果:
- <body>标签的子标签:
- p标签,paragraph单词缩写,是一个段落标签
- div标签,division单词缩写,常用于文档中分区
注意:在各个标签中也可以加入样式,style
例子:
<p style="text-align: center; border:blue 3px dashed; font-size:70px;">十二生肖</p>
<div style="text-align: center; font-family: 'arial black';font-size: 70px;">十二生肖</div>
执行结果:
- <body>标签的子标签:
- ul标签,无序标签
- ol标签,有序标签
例子:
<ol start="2" type="A">
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>体育</li>
</ol>
<ul type="circle">
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>体育</li>
</ul>
执行结果:
- <body>标签的子标签:
- table标签,表格标签,用于建立表格
- th标签,tabke head 表头
- tr标签,table row表的一行数据,在此添加数据
- td标签,table date 表的数据。
例子:用以上标签实现一个如下的表格:
<style>
table{
border-spacing: 0px;
border-collapse: collapse;
border: blueviolet 1px solid;
}
th{
border: blueviolet 1px solid;
}
td{
border: blueviolet 1px solid;
}
</style>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>地址</th>
</tr>
<tr>
<td>001</td>
<td>Tim</td>
<td>ASDFGHJKL</td>
</tr>
<tr>
<td>002</td>
<td>JOM</td>
<td>ZXCVBNMP</td>
</tr>
- 行的合并:rowspan。
- 列的合并:colspan。
<style>
table{
border-spacing: 0px;
border-collapse: collapse;
border: blueviolet 1px solid;
}
th{
border: blueviolet 1px solid;
}
td{
border: blueviolet 1px solid;
}
</style>
<table>
<tr>
<th>编号</th>
<th colspan="2">姓名</th>
</tr>
<tr>
<td rowspan="2">001</td>
<td>Tim</td>
<td>ASDFGHJKL</td>
</tr>
<tr>
<td>JOM</td>
<td>ZXCVBNMP</td>
</tr>
</table>
结果如下:
注意:使用时,一定要把被合并的行或列删除,不然会出现这种数据错乱的情况: