html-超文本标记语言
文件以.html或.htm为后缀结尾
全文不区分大小写
具有较高的容错性,一般浏览器打开从上到下进行解析,不同的浏览器存在差异
!DOCTYPEhtmlhtml5的DTD信息
标签(tag)的种类
1、开闭合标签
标签名需要被渲染的文本/标签名
2、整合标签
标签名/标签名
br/换行
html表示html文件的开始,是全文的根元素,内部的元素称为子元素
子元素在书写的时候应该在父元素内部向右一个制表符或根据最新的google的规范向右两个空格
head表示全文的头信息
一般用来引入外部cssjs信息或设置当前页面的编码
metacharset=utf-8/表示当前页面编码为UTF-8
title设置页面的标题
body表示页面的正文
bgcolor设置背景色
center我是居中的/center强制剧终对齐html5中不推荐使用
!--
font:设置字体,此标签
通过属性设置字体颜色大小,html5当中
已经不推荐使用,但是此标签在后续开发中
使用较多
标签属性名=属性值文本/标签
face:设置字体
color:设置颜色
size:设置字体大小
--
fontface=楷体color=#FF8C69size=20px夏天就要到来了/font
!--
一组渲染样式的标签,以下标签仅作为了解,已经全部被css取代
--
b加粗/b
strong加粗/strong
i倾斜/i
em倾斜/em
ins下划线/ins
del贯穿线/del
!--
一组用来设置文本区域的标签
段落自带换行,并且空一行
div自带换行,没有空一行
label与span多配合js使用不换行也没有空行,单独使用没有任何效果
--
p一个段落/p
div一个div层/div
label一个label/label
span一个span/span
在html中以下字符不能直接书写,必须使用转义字符
大于号:gt;
小于号:lt;
空格:nbsp
!--
href:表示链接到的目的地,默认情况下链接自带下划线
target=_blank:目的地和原页面同时展示在浏览器上
--
ahref=base1.htmltarget=_blank我是一个链接/a
!--
img:展示一张图片
src是source的简写表示图片的源
width设置宽度
scr里面通常放相对路径
../表示跳出当前目录
--
imgsrc=img.jpgwidth=px
!--
列表
ul:无序列表
ol:有序列表
--
ul
li列表/li
/ul
ol
li列表1/li
/ol
!--
table:表格,table表示表格的开始
tr表示一行,td表示一列,
table、tr、td三者缺一不可
caption:表格的标题,不是必须的
width:宽度
height:高度
border:显示表格边框
cellspacing:设置表格边框和单元格边框之间的距离,如果设置0则表示两个边框重合
bordercolor:设置边框颜色
--
tablewidth=pxheight=px
border=1px
cellspacing=0
bordercolor=red
caption我是表格标题/caption
trbgcolor=lightblue
!--
align:水平对齐
rightleftcenter
--
tdalign=right列1/td
tdalign=left列2/td
tdalign=center列3/td
/tr
tr
!--
valign:垂直对齐
topbottommiddle
--
tdvalign=top列1/td
tdvalign=bottom列2/td
tdvalign=middle列3/td
/tr
!--
上面一行是多少列,下面一行必须多少列
如果想改变列数可以通过合并单元格的方式
colspan=表示合闭单元格(行)
rowspan=表示合并单元格(列)
--
tr
tdcolspan=4列1/td
/tr
tr
td列1/td
td列2/td
td
!--
表格嵌套在表格的td中可以再次嵌套一个table表格
width:设置百分比,%
表示占满整个td
height:设置百分比存在严重的浏览器差异性,部分浏览器设置百分比无效
--
tableborder=1px
width=%height=%
tr
td内部列1/td
td内部列2/td
/tr
tr
td内部列1/td
td内部列2/td
/tr
/table
/td
/tr
/table
!--
form:表示表单的开始,表单是一种高级的链接,可以通过表单项采集用户输入的数据,提交到action属性设置的静态或者动态页面
action:表单数据提交到的目的地
method:提交的方式有get和post两种
*表单提交时,get和post有什么区别?
get:速度快,安全性低,最多传递个字符不支持中文,通过浏览器地址栏进行传递
格式:?key1=value1key2=value2keyN=valueN
链接传递值肯定是通过get
ahref=base1.html?key1=value1key2=value2链接/a
post:速度慢,安全性高,没有大小限制,不支持中文,不通过浏览器地址栏进行传递,传递格式和get相同
上传操作必须使用post
--
formaction=base1.htmlmethod=get
!--
1:单行文本输入框
type=text
name:表示key值,可以随意书写(随意书写:不包含空格数字开头中文不要使用 -可以使用_)
value:用户填写的内容就是value值
placeholder:文本框提示,html5新特性
--
用户姓名:inputtype=text
name=myname
placeholder=请输入用户姓名/
br
!--
2:单行文本密码框
type=password
--
用户密码:inputtype=password
name=mypass
placeholder=请输入用户密码/
br
!--
3:提交按钮
type=submit
注意按钮没有name属性
--
inputtype=submitvalue=提交/
!--
4:取消按钮
type=reset
--
inputtype=resetvalue=取消/
/form