01-文本标签
1.web标准
web前端的内容:HTML、CSS、JavaScript
web标准(万维网——W3C指定的)中规定HTML是结构标准,CSS是表现标准,JavaScript是行为标准
a.HTML结构标准中规定了网页上能够显示的内容,比如文字、图片、音频、视频、Flash、按钮、输入框ect
b.CSS表现标准规定网页内容的布局和样式,比如内容该显示在什么位置,内容是什么颜色,大小ect
c.JS行为标准规定网页的内容在某种情况下发送什么样的改变。(网页发生动态的变化)2.HTML
a.什么是HTM
HTML又叫超文本标记语言(是标记语言,不是编程语言)
b.HTML的版本
狭义的h5:指的是html第五个大版本
广义的h5:指的是html5 + CSS3 + javascript
c.html文件结构(由不同的标签组成)
<html>
——<head>
————内容是不可见的
——</head>
——<body>
————内容是可见的
——</body>
</html>3.HTML中的标签
网页中的内容就是通过html中的不同的标签(标记)来确定
标签语法:
a.常规标签(双标签):<标签名 属性名1=属性值1 属性名2=属性值2 ...>标签内容</标签名>
b.单标签:<标签名 属性名1=属性值1 属性名2=属性值2 ... ...>或者<标签名 属性名1=属性值1 属性名2=属性值2 .../>
meta、hr、br
说明:
<>,</>:固定写法,html中所有的标签都是写在<>中的
标签名:HTML中的标签名不是随便命名的,而是一些固定的值,例如:<p></p>-p标签、a标签、b标签、h1标签、input标签、img标签
标签名前不能有空隙
属性:放到开始标签中,属性名和属性值之间用=连接,多个属性之间使用空格隔开。属性可以是自定义的属性也可以是标签自带的属性
属性没有顺序
标签内容:双标签才存在标签内容,标签内容可以是任何东西(可以是文字也可以是其他的标签)
例如:<div>我是Python</div>,<div><p></p><img></div>
</>:结束标签,单标签没有一个单独的结束标签4.基本语法
HTML中大小写不敏感:html和HTML,HtMl是一样的
文件命名要求:是由字母和数字组成,但是数字不开头,一般都是小写,网站首页的html文件命名为index
DOCTYPE:用来说明当前的html文件中使用的html版本
html:代表HTML55.标签
1.head标签:head标签中的内容不可见,一般做一些网页设置性的操作
2.head标签中的内容:head标签中的子标签是固定的
meta标签:单标签,charset属性用来设置网页的编码方式
title标签:设置网页标题
link标签
style标签
script标签
base标签
02-图片和超链接
-
1.图片标签:img标签
单标签src属性:图片地址(可以是本地的图片地址,也可以是远程服务器上的地址) title属性:设置图片的标题(这个标题是鼠标停留在图片上等一会儿出现的文字) alt属性:用来设置图片加载失败的时候出现的提示信息
-
2.超链接标签:a标签
想要点击跳转的地方都可以使用超链接语法(1).href属性:跳转目标对应的地址 a.其他的网页地址 ------ 跳转 b.写本地的一个html路径 ----- 跳转 c.空 ------ 刷新 d.选择器 ------ 在网页内,让网页跳转到指定的位置 (2).target属性:设置跳转方式 _self(默认值):在当前页面中刷新出新的内容 _blank:创建一个新的页面,然后刷新href指定位置的内容 注意:刷新当前网页和在当前网页跳转到指定位置的时候,只能使用默认的_self
03-表格标签
- 1.表格标签:table标签、tr标签、td标签、th标签
快捷键:tr*10 + tab键,直接创建10行
table标签:表格整体(一个table标签代表一个表格)
tr标签:行(一个tr标签代表一行)
td标签:单元格(一个td标签代表一个单元格)
th标签:表头 - 2.属性:
a.border属性:设置表格的边框的宽度,只能作为table的属性
b.bordercolor属性:设置边框颜色,只能作为table的属性
c.background:设置背景图片
d.bgcolor:设置背景颜色,可以作为table/tr/td的属性
e.cellspacing:设置单元格与单元格之间的间距(默认值1)
f.cellpadding:设置内容和单元格之间的距离(默认值0)
g.width:一般作用于某一个单元格,影响的是一列
h.height:一般作用于一行,影响的是一行地高度
i.align:设置对齐方式(可以作用于table/tr/td)
作用于table,让整个表格在浏览器中居中
作用于tr/td,让内容在单元格中居中
j.设置宽高只有大的值有效,表格中不一定是文字,可以是图片或者超链接ect
k.colspan:列的合并;rowspan:行的合并
过程:先确定表格的行和列的最大数,再观察表格是否有合并现象,
如果有,就使用列合并(colspan)和行合并(rowspan)