今天开始python学习的第二阶段,进入web前端的学习;
一、web前端简介
1、web标准
web前端的内容:HTML、CSS、JS(JavaScript);
web标准(万维网-W3C指定的)中规定HTML是结构标准,CSS是表现标准,JS是行为标准;
HTML结构标准中规定了网页上能够显示的内容,比如文字、图片、音频、视频、Flash、按钮、输入框等
CSS表现标准规定网页的内容的布局和样式,比如内容该显示在什么位置,内容是什么颜色、多大、多宽等
JS行为标准规定网页的内容在某种情况下发生什么样的改变(动态改变)。
2、HTML
什么是HTML?
HTML又叫超文本标记语言(是标记语言,不是编程语言)
HTML版本
狭义的h5:指HTML第5个大版本
广义的h5:指的是HTML5+CSS3+javascript
HTML文件结构(由不同的标签组成)
3、HTML中的标签
网页中的内容就是通过HTML中的不同的标签(标记)来确定的
标签语法:
常规标签(双标签):<标签名 属性名1=属性值1 属性名2=属性值2 ...>标签内容
单标签:<标签名 属性名1=属性值1 属性名2=属性值2...> 或者 <标签名 属性名1=属性值1 属性名2=属性值2.../>
说明:
<>,<"/">:固定写法,HTML中所有的标签都是写在<>中的
标签名:不是随意命名的,而是一些固定的值;例如:p标签、a标签、b标签、h1标签、input标签、img标签等;
标签名前不能有空隙
属性:属性放在开始标签中,属性名和值之间用=连接,多个属性之间用空格隔开。属性可以是自定义的属性也可以是标签自带的属性。
标签内容:双标签才存在标签内容,标签内容可以是任何东西(可以是文字,也可以是其他的标签)
4、基本语法
HTML中大小写不敏感:HTML和html,Html是一样的。
文件名命名要求:是由字母和数字组成,但是数字不开头,一般都是小写的。网站首页的HTML文件命名为index。
二、文本标签
1、标题标签:h1~h6
2、段落标签:p标签
3、文字效果:
加粗:b 标签,strong 标签 b标签:单纯的在样式上进行加粗 strong标签:除了将文字加粗显示外,还有强调的意义。
倾斜标签:i 标签;em 标签具有强调作用。
4、水平线:hr标签
5、列表标签(ul,ol,dl)
html中有三种列表,分别是:无序列表,有序列表,自定义列表;其中都要包含li标签
三、图片和超链接
1、图片标签:img标签
它是单标签
src属性:图片地址(可以是本地地址,可以是远程图片地址)
title属性:设置图片的标题(这个标题是鼠标停留在图片上显示的文字)
alt属性:用来设置图片加载失败的时候出现的提示信息。
2、超链接标签:a 标签
想要点击跳转的地址
1)、href属性:跳转目标对应的地址
其他的网页地址
写本地的一个HTML路径
空----刷新当前网页
选择器----让网页跳转到指定的位置
2)、target属性:设置跳转方式
_self(默认值):在当前页面中刷新出新的内容。
_blank:创建一个新的页面,在新的页面中刷新出href指定的内容。
注意:刷新当前网页和在当前网页中跳转到指定位置的时候,只能使用默认的_self
四、表格标签
1、表格标签:table标签、tr标签、td标签
table标签:表格整体(一个table标签代表一个表格)
tr标签:行(一个tr标签代表表格中的一行)
rd标签:单元格(一个td代表一个单元格)
th标签:表头
2、属性
border属性;设置表格边框的宽度(只能作为table)
bordercolor:设置边框颜色(只能作业于table)
background:设置背景图片
bgcolor:设置背景颜色(可以作用于table、tr、td)
cellspacing:单元格与单元格之间的间距。(默认是1)
cellpadding:单元格与单元格中的内容的间距。
width:一般作用于某个单元格,但是影响一列。
height:一般作用于行。影响一行。
align:设置对齐方式(可以作用于table、tr\td) 作用于table时,让整个表格在浏览器中居中; 作用于tr/td时,让内容在单元格中居中。