H5-html基础-1

  设置网页字符集编码格式:
  GB2312:国标码/简体中文编码格式。
  GBK:扩展国标码。比国标码多了更多的编码格式。
  utf-8:万国码可以兼容绝大多数国家语言。
  html4.01之前声明字符集编码格式:
  meta http-equiv="Content-type" content="text/html; charset=utf-8" /

3、meta name="keywords" content="HTML5,web开发" /
  设置网页描述:网页描述内容。
name="keywords":当前语句用于设置网页关键字
content="":网页关键字内容,用逗号隔开。

4、title博客园/title
网页标题,网页选项卡上的文字

5、link rel="icon" href="img/w-1.PNG" /
链接网页小图标:选项卡上的小图标
rel属性:icon:表示连接的文件,作为网页的icon图标.
href属性:选择图片所在路径地址。

HTML 标题(Heading)是通过 h1 - h6 等标签进行定义的。

HTML标签分为"块级标签"和"行级标签"
区别:
1、块级标签自动换行,前后隔一行;
行级标签不会自动换行,从左往右依次显示;
2、块级标签的宽度默认100%;
行级标签宽度由文字内容撑开;
3、块级标签可以设置宽高,边距,行级标签不行。
HTML标签分为成对标签和自闭和标签(空标签)
成对标签:成对出现,有开始标签,必须有结束标签,
例如:h1/h1 p/p
自闭和标签/空标签:只有一个标签,用/表示标签的自动闭合(/可以省略)
例如:hr / link / meta /

HTML 段落

HTML 段落是通过 p 标签进行定义的。

例子

pThis is a paragraph./p
pThis is another paragraph./p

HTML 链接

HTML 链接是通过 a 标签进行定义的。

[a标签 超链接]
1、href:超链接跳转地址,可以是网络链接,也可以是本地HTML文件相对路径。
2、target:超链接新页面打开方式位置。_self在当前页面打开(默认)
3、title:鼠标指在连接上显示的文字。


[功能性超链接]
1、mailto:给指定邮箱发邮件。
a href="mailto://2243949290@qq.com"给腾宝发邮件/a
2、tencent:与指定QQ聊天。
3、锚链接:点击链接,可以跳转到页面指定位置(锚点)
a.页面指定位置定义一个锚点,
b.将超链接的href属性,改为#锚点名字
a name="top"/a
.......
a href="#top"跳转顶部/a
4、跳转到其他页面地址的指定锚点方式:
a href="其他页面地址.html#center"跳转/a

例子

a href="http://www.baidu.com.cn"This is a link/a

HTML 图像

HTML 图像是通过 img 标签进行定义的。

图片标签img,行级标签
1、src属性:图片路径。
[路径表示方式]
a、网络图片地址,不建议使用(http://..)
b、绝对路径(file:///C:/tupian.jpg),严禁使用绝对路径,绝对路径使用file://协议,网页使用htp://协议无法打开file://协议文件。
绝对路径写法:file:///盘符:/文件路径
c、相对路径:
1、图片在当前文件的下一层,文件夹名/图片名
2、图片与当前文件在同一层,直接写图片名
3、图片在当前文件上一层,直接../图片名
注意:图片不能退出当前项目的根目录,即图片必须包含在项目里边。
d、width、height:有宽高属性
e、title:鼠标指上时所显示的文字
f、 alt=" ";图片无法加载时显示的内容。省略alt,将默认显示tiitle内容。
g、align=" ";图片周围的文字相对于图片排列方式。
top:文字居上 center:文字居中 bottom:文字局低

例子

img src="/upload/attach/blank.gif"  data-echo="longmao.jpg" width="104" height="142" /

无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 ul 标签。每个列表项始于 li。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

例子

ul
liCoffee/li
liMilk/li
/ul

有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 ol 标签。每个列表项始于 li 标签。

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

例子

ol
liCoffee/li
liMilk/li
/ol

定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

例子

dl
dtCoffee/dt
ddBlack hot drink/dd
dtMilk/dt
ddWhite cold drink/dd
/dl


表格属性
th表头,默认加粗居中
tr表示行
td表示列
1、border:给表格每个td和整个table加边框。
如果border1,则只有最外层边框加粗,td边框不变。
2、cellspacing:设置单元格与单元格之间的间距。
3、cellspacing="0";可以设置边框之间的间距为0,但是相邻的边框不会合并,而是显示两条线宽度。

[设置表格边框合并]
可以使用CSS设置:width="700" height="280"
h1 align="center"特别休假申请单/h1
h2申请日期:年 月 日/h2
tr
td所属单位/td
td部组班/td
td职称/td
td111/td
td姓名/td
td111/td
td厂长/td
/tr
tr
td rowspan="2"地方/td
td colspan="3"年 月 日/td
td rowspan="2" colspan="2"阿红/td
td111/td
/tr
tr
td colspan="3"年 月 日/td
td主管/td
/tr
tr
td colspan="2"花洒哈吉好/td
td colspan="4"好的/td
td花洒/td
/tr
tr
td到期日期/td
td colspan="3"年 月 日/td
td colspan="2"互促好很/td
td哈哈/td
/tr
tr
td colspan="2"哈哈哈哈哈哈哈/td
td colspan="2"哈哈/td
td111/td
td111/td
td111/td
/tr
tr
td colspan="2"哈哈哈哈/td
td colspan="2"哈哈/td
td111/td
td111/td
td111/td
/tr
tr
td colspan="2"哈哈哈哈/td
td colspan="2"哈哈/td
td rowspan="2"111/td
td rowspan="2"111/td
td rowspan="2"111/td
/tr
tr
td colspan="2"bdbckbbj/td
td colspan="2"nksdjc/td
/tr
/table

form表单
1、action:表单提交的服务器地址。
2、method:表单提交数据的方式,可选值有get和post.


[get和post的区别]
a、get:使用URL传递数据,内容可在地址栏可见,不安全。
b、post:数据无法在地址栏可见,比较安全。
c、get传递的数据量有限,只能传纯文本内容。
d、post:可以传递大量的数据,并且可以传递图片,视频等文件。
e、get:传输速度比post快。


[get传递数据的URL格式]
http://原来的地址,html?name1=value1name2=value2
比如:http://127.0.0.1:8020/0595.html?username=123
比如,input使用时,name属性必不可少,缺少name,将导致该输入框的数据不向后台传递。


[input常用属性]
1、type:表示当前输入框是何种类型输入框。
2、name:给输入框起别名,向后台传递时,使用name=value的形式传递。
3、value:给输入框提供默认值。
4、placeholder:输入框的提示内容,当输入框有value时,提示内容消失。
5、hidden隐藏当前输入框。可以写hidden="hidden",也可以省略属性值,只写input type="text" hidden /
隐藏的输入框内容,也可以向后台传输。
6、disable:禁用当前输入框,可以显示,不能使用。被禁用输入框内容不能向后台传递。


[input的type类型]
a、text:普通文本框。
b、password:密码框,
c、radio:单选按钮,value不能省略,这个value需要传到后台;
单选按钮,凭借name是否相同,区分按钮是否同一组,同一组按钮只能选一个,name相同。
d、checkbox:多选按钮,value不能省略,这个value需要传到后台;
checked="checked";设置单选按钮/多选按钮,默认选中。
e、file:文件上传框。
accept属性,可以限制只能上传何种类型的文件,*表示可以接受所有文件,比如:image/*表示只可以接收图片
mutiple="mutiple":设置可以上传多个文件。
f、submit:表单提交按钮。
g、reset:表单重置按钮。
h、image:图形提交按钮,src属性导入图片,与submit都具有提交表单的作用。
i、button:显示为按钮形状,无作用。
j、hidden:隐藏的输入框,与普通的输入框+hidden=hidden的作用相同。


[select下拉选择区块]
1、select里边的每一项,用option/option标签表示
2、name:需要写在select里边。
3、option标签如果有value属性,则向后台传递的将是value属性的值,如果没有value属性,
则传递是option/option之间的文字。
4、option添加属性select="select";设置默认选中。
5、select添加属性mutiple="mutiple";设置当前下拉控件可以多选。
6、option添加title,鼠标指上去显示的文字。
7、select可以使用optgroup/optgroup标签对选项进行分组,用lable属性显示分组名。


[文本域]
a、文本域大小控制:
可以用文本域属性cols="20"(宽度多少字符) rows="10"(高度多少字符)
可以使用css样式name="username" (可包含a-z、0-9和下划线)/td
tdimg src="/upload/attach/blank.gif" data-echo="images/a.gif"阅读贵网服务协议/td
/tr
tr
td密码:/td
tdinput type="password" name="psw"(至少包含六个字符)/td
td rowspan="8"textarea欢迎阅读服务条款协议....../textarea/td
/tr
tr
td再次输入密码:/td
tdinput type="password" name="psw"/td
/tr
tr
td电子邮箱:/td
tdinput type="text" name="email"(必须包含@字符)/td
/tr
tr
td性别:/td
td
input type="radio" name="sex" checked="checked"img src="/upload/attach/blank.gif" data-echo="images/a.gif"男
input type="radio" name="sex"img src="/upload/attach/blank.gif" data-echo="images/a.gif"女
/td
/tr
tr
td头像:/td
tdinput type="file" name="file"/td
/tr
tr
td爱好:/td
td
input type="checkbox" name="hobby"运动
input type="checkbox" name="hobby"聊天
input type="checkbox" name="hobby"玩游戏
/td
/tr
tr
td rowspan="2"喜欢的城市:/td
td
select
option请选择城市/option
option厦门/option
/select
/td
/tr
tr
tdinput type="submit" value="同意右侧服务条款,提交注册信息"
input type="reset" value="重填"/td
/tr
/table
/form

H5-html基础-1

原文地址:http://www.cnblogs.com/lgc-17862800193/p/7290290.html


最新回复(0)
/jishuSMrFQ7hOQw77m63FgU0jwcqHXCRsQlLekwbnTA_3D_3D4719095
8 简首页