所在的位置: html >> html前景 >> html语言学习笔记

html语言学习笔记

贵阳白癜风医院 http://pf.39.net/bdfyy/bdfal/171105/5817679.html

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




转载请注明:http://www.aierlanlan.com/cyrz/2490.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了