HTML5技术

html5常用基本标签 - 宇宙坑一号

字号+ 作者:H5之家 来源:H5之家 2017-02-26 15:01 我要评论( )

一、Html的基本结构: !DOCTYPE html html head meta charset=utf-8" title/title /head body 网页的文本、图片等信息; /body /html 二、Head部分:用于表示网页的元数据即描述网页的基本信息其常用标签及属性有: 1、title标签 :浏览器标签页显示的标题 2

一、Html的基本结构:

<!DOCTYPE html>

<html>

<head>

<meta  charset=utf-8">

<title></title>

</head>

<body>

网页的文本、图片等信息;

</body>

</html>

 二、Head部分:用于表示网页的元数据即描述网页的基本信息 其常用标签及属性有:

1、title标签:浏览器标签页显示的标题

2、meta标签:其常用属性

charset:设置文档的字符集编码格式。HTML5中设置字符集编码:<meta charset="UTF-8">

常见的字符集编码格式:

a.GB-2312:国标码,简体中文

b.GBK:扩展的国标码

c.UTF-8:万国码 Unicode 常用

http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)

name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。

3、link标签:链接网页图标(title前的小logo),其常用属性有:

rel属性:声明链接文件的类型,此处选icon

type属性:可以省略

href属性:表示图片的路径地址

 

 三、body部分:网页的文本、图片等信息

 标签的分类:

块级标签:显示为块,前后隔一行(自动换行)

行级标签:按行从左往右逐一显示。

 

1、 常见的块级标签:

<h1></h1>......<h6><h6>:标题标签,自动加粗,h1最大,h6最小。

<hr/>:水平线标签,添加一条水平线。

<p></p>:段落标签,

<br/>:换行标签,

<blockquote/></blockquote>:引用标签,cite属性,表明引用的来源,一般引用网址

浏览器默认首行缩进。

<pre></pre>:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示:&nbsp;

2、 基于布局的块级标签

列表:无序列表、有序列表、定义列表

①有序列表:<ol></ol> 列表项:<li></li>

②无序列表:<ul></ul> 列表项:<li></li>

③定义列表(实现图文混排):<dl></dl>

列表标题:<dt>一般只有一项</dt>

列表描述项:<dd>可以有很多项</dd>

3、组合标签:<figure></figure>用于显示图片及图片标题

他有两个子标签:<img />图片

<figcaption></figcaption>图片的标题

例如:<figure>

<img src="img/EZ.jpg" alt="探险家"/>

<figcaption>探险家 伊泽瑞尔</figcaption>

</figure>

4、分区标签:<div></div>

  5、常见的行级标签

<1>span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如:

这是<span>span</span>中的文字

img(图片):其常用属性:①src:表示引用图片的地址。

              路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址

                  a、与文件处于同一层的图片,直接写图片名

                  b、图片在当前文件下一层:文件名/图片名

                  c、图片在当前文件上一层:../图片名

                      绝对路径:file:///盘符:/文件夹/图片名,但 是严禁使用

                      图片网址:网络上的图片链接,但是一般不用

             ②height和width:图片的高度和宽度。可以用CSS样式代替

             ③title:图片标。当鼠标指上之后显示的文字

             ④alt:当图片无法显示的时候,显示的文字

 

<2>em(倾斜强调)

<3>strong(加粗强调)

<4>b(加粗)

<5>i(倾斜)

         Strong、em、b、i的区别

    1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高

    2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。

 

<6>q(短引用)

<7>small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限

<8>a(超链接)

    1、href:超链接的路径,可以是网络链接,也可以是本地文件。

    2、target:跳转页面打开的位置。_self自身页面,_blank新页面。

    3、title:鼠标指在超链接上显示的名称。

    4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:

      rel="prev"被链接文档是当前文档的前一篇文 档,

      rel="next"被链接文档是当前文档的后一篇文档,

      rel="icon"被链接文档是当前文档的图标

      rel="stylesheet"被链接文档是当前文档的样式表

    5、Rev(当前是被链接的前/后一篇)

  锚链接:

    ①本页面锚链接:a、设置锚点:<a></a>

            b、跳转锚点:#name名

    ①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

            b、跳转锚点:页面地址.html#name名

        <a href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>

   功能性链接: mailto用于给指定邮箱发送邮件

      file:///e:/aaa.png打开本地文件

      tencent://message/?uin=1315618220 给指定QQ发送息

 

<9>s标签,有误文本:删除线

<s>这是S标签中的文字</s><br />

<10>cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用

<cite>这是cite中的文本</cite><br />

<11>code:计算机代码,不保留代码格式

<pre>

<code></code>

</pre>

<12>bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左

<bdo dir="rtl">1234567</bdo><br />

kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体

请输入“<kbd>Esc</kbd>”推迟系统<br />

<13>sup:上标文本,sub:下标文本

x<sub>6</sub><br />

&copy; 空格 &nbsp;

&copy; 空格 &nbsp;<br />

<14>u:下划线

<u>这是下划线</u><br />

mark:高亮或标记文本,浏览器显示为黄色背景

<mark>mark</mark><br />

 

6、表格:表格的行:tr,每行中的列:td,表格的表头:th

  表格的常用属性:

 

 

 

   表格行列属性:[tr和td的属性]:

    1、width/heigh:单元格的宽高

    2、bgcolor:单元格的背景颜色

    3、align:left center right 单元格中的文字水平对齐方式

    4、valign:top center bottom 单元格中的文字垂直对其方式

    5、nowrap:单元格中文字不换行

  【注意】当表格属性与行列属性冲突时,行列属性优先级高

  7、表单(form

【两个重要属性】:action-表单提交的服务器地址 method-表单提交数据的方法(get/post)

get/post区别:

1>get使用URL传参:服务器地址?name1=value1&name2=value2

(?表示传递参数,?后面采用name=value的形式传递,多个参数之间用&连接) ① URL传参不安全,所有信息可在地址栏看到,并且别人可以很容易url注入,来 攻击自己的数据库。

② URL传参数据量有限,只能传递少量数据。

2>post:使用http请求传递数据。URL地址看不到数据信息,安全且传递信息量没有限制

综上所述:大部分使用post传参,但是get传参比Post快

input标签及属性】

    ①type:input输入框的类型,可选值有:

    ②name:input输入框的别名,必填,因为传参的时候采用name=value的形式传递。

    ③value:input输入框的默认值

    ④placeholder:提示内容,当输入框有value时,提示内容消失。

【input特殊属性值】

    ① checked="checked"默认选中

    ② disabled="disabled"设置控制不能使用,按钮上不能点击,输入框上不能修改,而且如果

      输入框时disabled,则输入框信息不传递到后台

    ③hidden=“hidden”隐藏。等同于<input type="hidden"value="1234" />

      等同于配合disabled或根据其他需要,使用隐藏域传递信息.

 

 

【input-type属性详解】

    ①text:文本输入框

    ②password:密码输入框,内容不对外显示

    ③radio:单选按钮

    checkbox:复选按钮

        a、单选按钮,name和value属性需同时存在,提交时,提交的是value中的属性值

        例如:<input type="radio" value="男"/>提交显示为"sex=男"

        b、radio凭借name属性区分是否为同一组,name相同为同组,且只能选择一个

        c、checked="checked"默认选中,(radio只可以选一个,checkbox可以选多个)

    ④submit:提交按钮,提交表单数据

    ⑤reset:重置按钮,重置为默认状态

    ⑥file:文件上传按钮

    ⑦image:图片提交按钮,功能同submit,可以提交数据

    ⑧button:普通按钮,没什么软用

           ⑨其他常用属性值:见下图

 

select标签】下拉选择标签

   写法:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 DragEvent - QxQstar

    HTML5 DragEvent - QxQstar

    2017-02-26 15:00

  • HTML5 ruby注释标签 - kumayato

    HTML5 ruby注释标签 - kumayato

    2017-02-23 15:02

  • HTML5动画(二):Canvas 实现圆形进度条并显示数字百分比 - 孟然

    HTML5动画(二):Canvas 实现圆形进度条并显示数字百分比 - 孟然

    2017-02-23 14:05

  • html4与html5的区别 - Aqiaoba

    html4与html5的区别 - Aqiaoba

    2017-02-23 13:00

网友点评