来自 软件资讯 2019-12-06 22:27 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

html5常用基本标签

生机勃勃、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(网页依期刷新卡塔尔(英语:State of Qatar) set-cookie(设置浏览器cookie缓存卡塔尔国须求十三分content属性使用。(http-equiv属性只是注脚供给设置哪部分,具体的装置剧情,放到content属性中)

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

常用且供给通晓的属性值:author(笔者) keywords(网页根本字) description(网页描述) 那多少个天性设置,网页十分重要。

3、link标签:链接网页Logo(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 文件中空格的意味: 

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" height="20%" width="20%" alt="探险家"/>

<figcaption>背包客 伊泽瑞尔</figcaption>

</figure>

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

 

5、多如牛毛的行级标签

<1>span(文本):无实际意义,用于包裹某有个别文字,更改特定样式,举例:

那是<span style="color: red;font-size: 36px;">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"被链接文书档案是近年来文书档案的Logo

      rel="stylesheet"被链接文书档案是近期文书档案的样式表

    5、Rev(当前是被链接的前/后大器晚成篇)

  锚链接:

    ①本页面锚链接:a、设置锚点:<a name="top"></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 />

© © 空格  

© © 空格  <br />

<14>u:下划线

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

mark:高亮或标识文本,浏览器彰显为香艳背景

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

 

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

  表格的常用属性:

 

 图片 1

 

   表格行列属性:[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传参:

(?表示传递参数,?后边选择name=value的款式传递,八个参数之间用&连接) ① UTiggoL传参不安全,全体新闻可在地址栏看见,而且外人能够相当轻松url注入,来 攻击自身的数据库。

② ULX570L传参数据量有限,只可以传递一点点数目。

2>post:使用http央浼传递数据。U凯雷德L地址看不到数据信息,安全且传递消息量没有范围

总结:超越52%利用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" name="username"value="1234" />

      等同于合作disabled或基于其余需求,使用蒙蔽域传递音信.

 

 

【input-type属性详细解释】

    ①text:文本输入框

    ②password:密码输入框,内容不对外展现

    ③radio:单选开关

    checkbox:复选按键

        a、单选开关,name和value属性需同一时间设有,提交时,提交的是value中的属性值

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

        b、radio依据name属性区分是不是为同大器晚成组,name相同为同组,且只可以接收贰个

        c、checked="checked"暗中同意选中,(radio只好够选三个,checkbox能够选八个)

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

    ⑤reset:重新恢复生机设置开关,重新苏醒设置为暗许状态

    ⑥file:文件上传开关

    ⑦image:图片提交按键,成效同submit,能够提交数据

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

           ⑨别的常用属性值:见下图

图片 2

 

【select标签】下拉接受标签

   写法:

<select name="=city">
<option>青岛</option>
<option>烟台</option>
<option>北京</option>
<option>纽约</option>
<option>罗马</option>
</select>

      常用属性

    ①name属性:写在select里,全数选项独有一个name
    ②multiple属性:multiple="multiple"设置select为多选,日常不用
    ③option常用属性:value=""属性,当option未有value属性时,未来台传递的是<option></option>中间的文字,
      当有value属性时,传递的是value的属性值。
      title=""属性,鼠标之上后实际的文字
      select="select"暗许属性值
    ④optgroup属性: 用于option属性分组,用lable属性表示分组名。
      <optgroup label="中国">
      <option>青岛</option>
      <option>烟台</option>
      <option>北京</option>
      </optgroup>

【textarea】:文本域,其常用属性 :

    ①装置宽度中度 style="width: 150px;height: 200px;
    ②readonly="readonly":只读方式,区别意改良编辑
    ③style="resize: none;"设置为宽度中度不许改正
    ④style="overflow:;"设置文字超过区域时,如何整理,常用属性值有:
      hidden 超出区域的文字,隐蔽无法出示
      scroll 无诗歌字多少,均显示滚动
      auto 自动,根据文字多少活动决定是不是会呈现为滚动条

【田野先生set 、legend】表单的边框与标题
      <fieldset> //边框
      <legend> //标题
      </legend>
      </fieldset>
        假若想让标题嵌入到边框中,需将标题的签写到边框标签里面
        二个表单能够有多组标题加边框组合

【h5智能表单】
1、H5新添input的form属性,用于钦点特form表单的id,完成input不需求放在form标签之中,就可以通过表单进行提交
<form id=foo>
……
</form>
<input type="text" name="" form="foo">
2、 input成分的新添属性:
Autocomplete:自动完毕功能,记录客户早先输入的从头到尾的经过,并在客户下一次输入时提示客户输入
》》》属性值:on/off
》》》可以再form表单使用,对全体表单的装有控件实行机动实现的按键也足以在input上行使,
对特定输入框实行改进
》》》绝超越四分之二浏览器默许开启
Autofocus:自动获取核心,autofocus="autofocus"只好获得叁个火热
Form:所属表单,通过id确认归属哪个表单
Required:必填,required="required",设置必填,不然甘休提交
Pattern:使用正则表明式验证input的方式
Placeholder:提醒,当有value时撤废提醒。

【示例-表格】

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>请假单</title>
 </head>
 <body >
  <!--<table width="500">
   <caption><u><b>特别请假单</b></u></caption>
   <tr>
    <td>申请日期:  年   月   日</td>
   </tr> 
  </table>
  <table border="1" style="border-collapse: collapse;" width="500">
   <tr>
    <td>所属单位</td>
    <td>卜祖班</td>
    <td>职称</td>
    <td>111</td>
    <td>姓名</td>
    <td>111</td>
    <td>厂长</td>
   </tr>
   <tr>
    <td rowspan="2">期间</td>
    <td colspan="3">年月日</td>
    <td colspan="2" rowspan="2">天数</td>
    <td>111</td>

   </tr>
   <tr>
    <td colspan="3">年月日</td>
    <td>主管</td> 
   </tr>
   <tr>
    <td colspan="2">职务代理人</td>
    <td colspan="4">盖章</td>
    <td>111</td>
   </tr>
   <tr>
    <td colspan="1">到职日期</td>
    <td colspan="3">年月日</td>
    <td colspan="2">审核意见</td>
    <td colspan="1">组长</td>

   </tr>
   <tr>
    <td colspan="2">全年特别休假书</td>
    <td colspan="2" align="right">天</td>
    <td colspan="1">111</td>
    <td colspan="1">111</td>
    <td colspan="1">111</td>

   </tr>
   <tr>
    <td colspan="2">疫情家属</td>
    <td colspan="2"align="right">天</td>
    <td >人事主任</td>
    <td >认识经办</td>
    <td >班长</td>
   </tr>
   <tr>
    <td colspan="2">本次申请日期</td>
    <td colspan="2"align="right">天</td>
    <td rowspan="2">111</td>
    <td rowspan="2">111</td>
    <td rowspan="2">111</td>
   </tr>
   <tr>
    <td colspan="2">剩余请假日期</td>
    <td colspan="2"align="right">天</td>
  </table>-->
  <h2 style="text-decoration:underline ;text-align: center;"width="500px" >贴别休假申请单</h2>
  <p>              
                 
   申请日期:  年   月   日</p>
  <table border="1" style="border-collapse: collapse;" width="500px" align="center">
   <tr>
    <td>所属单位</td>
    <td>卜祖班</td>
    <td>职称</td>
    <td>111</td>
    <td>姓名</td>
    <td>111</td>
    <td>厂长</td>
   </tr>
   <tr>
    <td rowspan="2">期间</td>
    <td colspan="3">年月日</td>
    <td colspan="2" rowspan="2">天数</td>
    <td>111</td>

   </tr>
   <tr>
    <td colspan="3">年月日</td>
    <td>主管</td> 
   </tr>
   <tr>
    <td colspan="2">职务代理人</td>
    <td colspan="4">盖章</td>
    <td>111</td>
   </tr>
   <tr>
    <td colspan="1">到职日期</td>
    <td colspan="3">年月日</td>
    <td colspan="2">审核意见</td>
    <td colspan="1">组长</td>

   </tr>
   <tr>
    <td colspan="2">全年特别休假书</td>
    <td colspan="2" align="right">天</td>
    <td colspan="1">111</td>
    <td colspan="1">111</td>
    <td colspan="1">111</td>

   </tr>
   <tr>
    <td colspan="2">疫情家属</td>
    <td colspan="2"align="right">天</td>
    <td >人事主任</td>
    <td >认识经办</td>
    <td >班长</td>
   </tr>
   <tr>
    <td colspan="2">本次申请日期</td>
    <td colspan="2"align="right">天</td>
    <td rowspan="2">111</td>
    <td rowspan="2">111</td>
    <td rowspan="2">111</td>
   </tr>
   <tr>
    <td colspan="2">剩余请假日期</td>
    <td colspan="2"align="right">天</td>
  </table>
 </body>
</html>

  

 图片 3

 

【示例-表单】

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <form action="04_form1.html" method="">
   <table >
    <tr>
     <td>登录名</td>
     <td>
      <input type="text" name="username"  />(可包含a-z 0-9 和下划线)
     </td>
     <td><img src="../img/icon.png">阅读贵美网服务协议</td>
    </tr>
    <tr>
     <td>密码</td>
     <td>
      <input type="password" name="password1"  />(至少包含6个字符)
     </td>
     <td rowspan="8">
      <textarea style="width: 150px;height: 200px; resize: none;overflow: auto;"readonly="readonly">

  1、房产:a夫妻双方婚后购有坐落在×路×号×小区×栋×单元×号的楼房一套,登记在男方/女方(或双方)名下,属夫妻共有财产。离婚后,该套房屋归男方/女方所有(注:包括房内装修内附属设施及相关配套设施),双方相互配合办理产权变更登记手续。因办理产权变更登记手续所应支付的一切税费等均由男方/女方承担。取得房屋所有权的一方给予另一方经济补偿人民币×××元,在本协议签订之日起×日内付清。

  b夫妻双方婚后购有坐落在×路×号×小区×栋×单元×号的楼房一套,购房时以男方/女方为主贷人向×银行按揭贷款购买,首付及按揭还款都来源于夫妻共有存款,该房属夫妻共有财产。离婚后,该套房屋归男方/女方所有(注:包括房内装修内附属设施及相关配套设施),双方相互配合办理产权变更登记及办理贷款主贷人变更手续。因办理产权变更登记及办理贷款主贷人变更手续所应支付的一切税费等均由男方/女方承担。取得房屋所有权的一方给予另一方经济补偿人民币×××元,在本协议签订之日起×内付清。

  夫妻共有房屋内的家用电器及家具等等(见清单),双方同意作价×××万元,归男方/女方所有,取得的一方给予另一方经济补偿人民币×××元,在本协议签订之日起×内付清。

      </textarea>
     </td>
    </tr>
    <tr>
     <td>再次输入密码</td>
     <td>
      <input type="password" name="password2" />
     </td>
    </tr>
    <tr>
     <td>电子邮箱</td>
     <td>
      <input type="text" name="email" />(必须包含@字符)
     </td>
    </tr>
    <tr>
     <td>性别:</td>
     <td>
      <input type="radio" name="sex" value="男" checked="checked"/><img src="../img/male.gif" />男
      <input type="radio" name="sex" value="女" /><img src="../img/female.gif" />女
     </td>
    </tr>
    <tr>
     <td>头像:</td>
     <td>
      <input type="file" name="files"  "/> 
     </td>
    </tr>
    <tr>
     <td>爱好:</td>
     <td>
     <input type="checkbox" name="hobby" value="吃" checked="checked"/>吃
     <input type="checkbox" name="hobby" value="喝"/>喝
     <input type="checkbox" name="hobby" value="玩"/>玩
     </td>
    </tr>
    <tr>
     <td>城市</td>
     <td>
     <select name="city" >
      <optgroup label="中国" title="中国地区">
       <option title="山东青岛">青岛</option><!--可以有n多个-->
       <option title="山东烟台">烟台</option>
       <option title="首都北京">北京</option>
      </optgroup>
      <optgroup label="外国" title="外国地区">
        <option title="美国纽约">纽约</option>
       <option title="意大利罗马">罗马</option>
      </optgroup>
     </select>
     </td>
    </tr>
    <tr>
     <td style="text-align: center;" colspan="2">
      <input type="submit" name="登录" value="登录"/>
      <input type="reset" name="重置" value="重置"/>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>

  图片 4

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:html5常用基本标签

关键词: