web前端基础知识02--HTML（二）

一、认识网页开发

1.w3c(万维网)标准 

w3c对web开发制定的标准：  

 内容标准 - html

 结构标准 - css

 行为标准 - javascript(js)

二、认识html

1.什么是html（就像markdown语法）

html叫超文本标记语言（超文本，除了文本还可以显示其他的内容，包括：图片、视频、音频、图形等）

html是标记语言，不是编程语言

2. html版本

html1.0 - html2.0 - html3.2 -...- html5

html5: 狭义概念，html标记语言的第五个大版本；广义的html5:指html5+css3+js

3.html的结构 ：网页的内容可以看成一个树结构

	
		负责网页中看不到的设置性的东西(灵魂)
	


	
		负责网页所有显示的内容（树干）
	

4.html标签(标记、元素)

（1）常规标记

<标记 属性=属性值 属性=属性值>内容

（2）空标记

<标记 属性=属性值 属性=属性值 /> 

<标记 属性=属性值>

说明：

1.尖括号中的第一个单词叫标记，标记后加一个空格后面的是属性，属性和属性值之间用等号连接，多个属性之间用空格隔开

2.属性之间没有先后顺序

3.常规标记的开始标记和结束标记中间就是标记的内容，这个内容理论上可以是任何内容(包括任何问题或者任何标签)

4.空标记只有属性

5.不同的标记有不同的功能（给网页提供不同的内容）

 

三、用h5写hello world

1.下面的结构，是每次写一个网页都必须写的结构

2.写第一个程序

	


    hello world

 

说明：（1）DOCTYPE用来声明html版本： html 对应的是 html5

 

注：标签不区分大小写:DOCTYPE和doctype、Doctype等是一样的

（2）html标签就是网页的根标签，所有的网页内容(不管是看得见还是看不见的)都要写在html标签中 

（3）head标签中主要是用来对网页进行设置和说明的（这个标签中的内容在网页上是看不见的） 

主要包含:title标签、type标签、script标签、meta标签、link标签、base标签等 

（4）body标签代表网页上可见的部分，所有需要展示在网页上的内容都需要写在这个标签里 

p、h1-h6、img 、div、table、input等 

四、文本标签

1.标题标签（h1-h6）

功能：显示标题

注意：我们网页内容中的标题都要使用h标签

我是标题1

我是标签2

我是标签3

我是标题4

我是标题5

我是标题6

---

2.段落标签(p标签)

在网页上单纯的显示一段文字（文字不是标题、没有特殊的功能(比如点击会有跳转效果...)） 
功能：p标签的内容结束后会默认换行，并且和下面的内容之间会多一个空行（一般情况一段文字使用一个p标签）

注意：html中的文本中手动的插入换行、空格和制表符是无效的

 3.空格( ) 

    比利时杀入世界杯四强，追平了在1986年所创的最佳成绩，当年的欧洲红魔得到殿军，为历届世界杯最高名次。如果他们能够再进一步，杀入决赛，就能与邻国荷兰的往绩看齐，甚至有机会比橙军更先拿到冠军。

 

4.加粗标签（b标签） 

比利时杀入世界杯四强，追平了在1986年所创的最佳成绩，当年的欧洲红魔得到殿军，为历届世界杯最高名次。如果他们能够

5.strong标签 

注意：显示效果上b标签和strong标签都有对文字进行加粗的效果，但是strong有强调的意思，b没有

比利时杀入世界杯四强，追平了在1986年所创的最佳成绩，当年的欧洲红魔得到殿军，为历届世界杯最高名次。如果他们能够

 

6.i标签和em标签 

让文字倾斜的标签，em标签有强调的意思

 

比利时杀入世界杯四强，追平了在1986年所创的最佳成绩，当年的欧洲红魔得到殿军，为历届世界杯最高名次。如果他们能够再进一步，杀入决赛，就能与邻国荷兰的往绩看齐，甚至有机会比橙军更先拿到冠军。

比利时杀入世界杯四强，追平了在1986年所创的最佳成绩，当年的欧洲红魔得到殿军，为历届世界杯最高名次。如果他们能够再进一步，杀入决赛，就能与邻国荷兰的往绩看齐，甚至有机会比橙军更先拿到冠军

 7.强制换行标签(br标签)

8.水平线(hr标签) 

五、列表标签

1.无序列表(ul标签)
2.有序列表(ol标签) 
3.自定义列表(dl标签)

注意：dl中一组数据是通过dt和dd来列举的，dt后列举内容，dd后面对内容进行解释

	





	
python
	
python课程主要包含五个阶段。。。。
	
H5
	
Java
	
测试




	
星期一
	
星期二
	
星期三
	
星期四
	
星期五
	
星期六
	
星期天





	
a
	
abc

	
b
	
abc
  

输出

六、图片和超链接

1.图片标签(img标签) 

注意：属性的值全部需要使用双引号括起来

（1）src属性： 需要显示的图片的地址（本地和网页）

      本地图片：一般需要将图片放到当前的工程目录下

（2）alt属性：图片加载错误的提示信息

（3）title属性：鼠标放在图片上不动的时候，弹出的提示信息

2.超链接标签(a标签) 

能够有点击跳转效果的内容

（1）href属性：

点击a标签跳转的目标地址

（2）target属性：

有_self(默认)和_blank两个值。_self代表在当前页面中打开href属性中的地址的内容；_blank在新的页面中打开

 
百度一下



点我一下  


回到顶部



	

七.表格标签

1.标签

table标签：表

tr： 行

td:  列

2.属性

border：

            设置表格的边框的宽度

bordercolor: 

            设置表格边框的颜色，颜色值有两种表示方式：1.RGB的十六进制值（#XXXXXX）2.颜色单词

width:

        表格宽度

height:

            表格的高度;作为table的属性是设置整个表格的高度，作为tr属性是设置当前行的高度

bgcolor:

            设置背景颜色;作为table的属性是设置整个表的背景颜色；作为tr属性是设置当前行的背景颜色；作为td属性就是这个具体的单元格的背景颜色

cellspacing: 

        设置单元格与单元格之间的间隙(默认值是1)

cellpadding: 

            上右下左的间距; 这儿要注意当表格本身的大小小于设置完间距后的内容的大小，表格会被撑大

 

	
	





	

		
		
姓名
		
		
成绩
	

	
	

		
关羽
		
87
	

	
	

		
刘备
		
85
	

	
	

		
张飞
		
82
	






	
	

		
		
姓名
		
		
成绩
	

	
	

		
z张三
		
87
	

	
	

		
李四
		
85
	

	
	

		
王二
		
82
	





	

		
学科
		
成绩
	
	

		
数学
		
100
	

3.复杂的表格：行和列的合并

 rowspan: 行合并

 colspan：列合并

 rowspan和colspan是td标签的属性，属性的值表示合并的列和行的数量

 

4.细线表格

1.通过背景颜色和单元格之间的间隙来达到细线表格的效果

2.align对齐方式属性：left、right、center三个值。

注意：align作为table属性的时候，是整个表格在它所在的容器中对其；作为tr和td属性时是将指定的单元格的内容对齐