HTML基础与标签详解-CSDN博客

浏览器是一种软件，该软件用于执行网页代码（包括HTML标签、CSS样式表和JavaScript脚本）并将执行后的结果显示出来，常用的主流浏览器软件有Internet Explorer、Google Chrome、Firefox、Safari等，软件开发过程中常使用Google Chrome和Firefox浏览器，尤其Google Chrome浏览器（因为Google Chrome最快）

HTML是什么

HTML（Hyper Test Markup Language，即超文本标记语言），是一种解释性语言，用于制作网页界面，使用该语言编写的网页最终被浏览器解释执行。

HTML基本结构：

<html>与</html>用来标记HTML文档的开始和结束；
<head>与</head>用来标记HTML文档的头部开始和结束；
<body>与</body>用来标记HTML文档的主体开始和结束；
注释：

HTML标签分类：

单标签：标签单独出现，语法<标签名/>，要加反斜线，不然不符合万维网联盟规范，例如<img/>
双标签：标签成对出现，语法<标签名>内容<标签名/>，比如<a><a/>
注意：HTML中标签不区分大小写，但是为了符合万维网联盟（W3C）的规范，推荐使用小写

HTML标签属性

HTML标签属性放在起始标签的尖括号内，如果有多个属性，则使用空格分开
注意：
属性之间使用空格间隔；
属性出现的先后顺序没有要求；
某些属性值可以不使用双引号引起来；但为了符合W3C标准，要求所有的属性值都使用双引号引起来；

常用标签及标签属性

head标签中：

title标签、link标签：设置页面标题例如：

<head>
	<title>百度一下，你就知道<title/>
	<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<head/>

效果是这样的：
在这里插入图片描述

body标签中

img标签：插入图片用：

<body>
	<img src="img/volvo.png" title="这是沃尔沃"/ width="55%">
<body/>

src标签属性用来设置图片路径，tilte用来设置把鼠标放到图片上时显示的图片描述，height和width：设置图片的高度和宽度，单位为像素或%；

a标签：超链接标签，双标签，常用标签属性

<a href = "http://www.baidu.com" target = "_blank">百度</a>

href：指定打开的页面；
target：用于指定在哪个窗口打开href标签属性指定的页面，常用属性值有_self 、_blank 等

b标签、i标签、del标签：

<b>1234567<b/><!--中间数字被加粗-->
<i>1234567</i><!--中间数字斜体-->
<del>1234557</del><!--中间数字加中划线-->

span标签：常用于组合文档中的行内元素，双标签
说明：如果span标签没有CSS样式，那么span标签中的文本与前面文本没有任何视觉上的差异；span标签的定义方便了通过CSS样式格式化标签内的内容。

p（paragraph单词缩写）标签：段落标签，双标签，常用标签属性

<p style="text-align: center; border:aquamarine 4px dotted; color:darkcyan; font-size: 50px; font-family: 华文彩云;">学习使我快乐</p>
<!--style为标签属性，text-align设置文本位置，这里设置为居中；border：设置边框，设置顺序为颜色、粗度（px为像素单位）、边框类型（solid直线、dotted点线、dashed虚线）；color：设置文本颜色；font-size设置文本大小；font-family设置文本字号-->

div（division单词缩写）标签：常用于文档中分区，双标签

hn标签：标题标签，双标签，n的值为1~6，其中<h1></h1> 定义最大的标题；<h6></h6> 定义最小的标题，常用标签属性

ol（ordered list）标签：有序列表标签，双标签，常用标签属性

<ol start="5" type="i"><!--start表示从第几个数字开始有序，这里只能写阿拉伯数字，type可以设置序号类型：有阿拉伯数字、罗马数字（大小写）、26个字母（大小写）-->
   <li>语文</li>
   <li>数学</li>
   <li>英语</li><!--li为list缩写-->
</ol>

ul（unordered list）标签：无序列表标签，双标签，常用标签属性

<ul type="circle"><!--只能用type：有实点、空心圆、方块，因为无序所以不能用start-->
   <li>语文</li>
   <li>数学</li>
   <li>英语</li>
</ul>

table标签：创建表标签，双标签：

<table>
   <tr><!--tr为行-->
    <th>编号</th>   <!--th（tablehead）为标题行-->
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
   </tr>
   
   <tr>
    <td>1</td><!--td（tabledate）为数据行-->
    <td>J</td>
    <td>17</td>
    <td>1</td>
   </tr>
   
   <tr>
    <td>2</td>
    <td>K</td>
    <td>18</td>
    <td>1</td>
   </tr>
</table>

但这时的表是这样的在这里插入图片描述

没有线，我们需要给它加上线
这时我们用到style标签：

<style>
   table{
    	width: 50%;
    	border-spacing : 0px;
    	border: black 1px solid;
    	border-collapse: collapse;
   }   
   th{
    	border: black 1px solid;
   }   
   td{
    	border: black 1px solid;
   }   
</style>

这里border添加的是线，给整个表，表头和表数据分别用线分开，但此时是这样的3
在这里插入图片描述

所以我们要把这些线里的空白填充： border-spacing : 0px;但是这样的线会很粗，我们将线折叠一下：border-collapse: collapse;这时表太窄了有点小气我们再把表变宽一点：width: 50%;我们看一下结果
在这里插入图片描述
我们来做一个这样的表格：

<style>
	table{
		border:black 1px solid;
		border-spacing:0px;
		border-collapse:collapse;
	}
	th{
		border:black 1px soild;
		width:50px;
	}
	td{
		border:black 1px soild;
		text-align:center;
		height:30px;
	}
</style>
<table>
	<tr>
		<td colspan="9" style="text-align:center">2013年图书销售统计</td>
	</tr>
	<tr>
  		<td rowspan="2">图书分类</td>
  		<td colspan="2" style="text-align:left;">一季度</td>
  		<td colspan="2" style="text-align:left;">二季度</td>
  		<td colspan="2" style="text-align:left;">三季度</td>
  		<td colspan="2" style="text-align:left;">四季度</td>
 	</tr>
 	<tr>
  		<th>销售量</th>
  		<th>销售额</th>
  		<th>销售量</th>
  		<th>销售额</th>
  		<th>销售量</th>
  		<th>销售额</th>
  		<th>销售量</th>
  		<th>销售额</th>
 	</tr>
 	<tr>
  		<td>小说</td>
  		<td>11111</td>
	    	<td>11111111</td>
	    	<td>2222</td>
	    	<td>22222222</td>
	    	<td>33333</td>
	    	<td>33333333</td>
	    	<td>44444</td>
	    	<td>44444444</td>
 	</tr>
 	<tr>
	  	<td>文艺</td>
	  	<td>12345</td>
	  	<td>12345678</td>
	  	<td>23456</td>
	  	<td>23455789</td>
	  	<td>14758</td>
	  	<td>12345678</td>
	  	<td>32164</td>
	  	<td>12365487</td>
 	</tr>
 	<tr>
  		<td>励志/成功</td>
  		<td>55555</td>
  		<td>13448798</td>
  		<td>66666</td>
  		<td>69736452</td>
  		<td>22257</td>
  		<td>22828828</td>
  		<td>67768</td>
  		<td>12378553</td>
 	</tr>
 	<tr>
 		<td>童书</td>
 		<td>12378</td>
 		<td>33333333</td>
 		<td>55556</td>
 		<td>66666665</td>
 		<td>88888</td>
 		<td>88888885</td>
 		<td>99999</td>
 		<td>98898955</td>
 	</tr>
 

	
</table>