html5

结构标签

首先打出  "!" 然后按"tab"生成html框架

<!DOCTYPE html>  (不是html标签,对大小写不敏感,且必须位于html文档首行,DOCTYPE是文档类型(document type),用于声明文档类型,告知浏览器使用哪种html版本<!DOCTYPE html>表示使用html5来渲染页面)

<html></html>    (为文档的根元素,其中的所有元素都是html元素的后代)

<head></head>  (页面的头部信息)

head 元素规定了文档的配置信息(元数据元素),包括文档标题、引用的样式和脚本等,head元素里面可以包裹<title>、<base>、<link>、<meta>、<script>、<noscript>

<body></body    (页面主体信息)

文档的所有内容都在 body 元素中

<!DOCTYPE html>
<html>

<head></head>

<body></body>

</html>

基本标签
<p>                                         (段落标签)
<br>                                         (换行,行内单标签元素
<hr>                                         (水平线,块级单标签元素
<div></div>                              (用于结构上划分内容,没有具体语义,块级双标签元素
<span></span>                      (行内块标签)


<header></header>                (定义页面的头部或者页面中其它区块的头部,块级双标签元素
<nav></nav>                           (网页导航栏)
<aside></aside>                     (网页侧边区域,块级语义化标签,通常作为页面的侧边栏)
<section></section>                (网页区块)
<article></article>                   (文章区域,块级语义化标签,内部可包含 headerfooter结构化标 签,也可包含  h1-h6p等签)

<footer></footer>                    (网页底部,块级双标签元素

<address></address>             (块级的行内语义化标签,位于<article>标签内,其内部的文本通常呈现斜体)


&nbsp;                                     (空格)
<img src="图片路径/图片链接" alt="图片文本名字">

<h1></h1>到<h6></h6>         ( 块级双标签用于呈现六个不同级别的标题,h1到h6依次递减)

<address></address>             (定义 html 文档或文章的联系信息,块级的行内语义化标签

列表标签     

无序列表 (ul标签只能包含li标签,但是li标签可以包含任何内容)                    
<ul>
     <li>                   
</ul>
 有序列表
<ol>
      <li></li>           
</ol> 
自定义列表
<dl></dl>(整体包裹,与下面的距离空一行,块级双标签
<dt></dt>(内容标签首行不空格)                         
<dd></dd>(内容标签首行空两格)

<dl>
  <dt>奥特曼</dt>
  <dd>
    <a href="">迪迦</a>
    <a href="">赛文</a>
    ...
  </dd>
</dl>
<dl>
  <dt>怪兽</dt>
  <dd>
    <a href="">哥斯拉</a>
    ...
  </dd>
</dl>

表格
<table></table>             (表格整体)
<tr></tr>                        (表格行)
<td></td>                      (表格单元格)
<caption></caption>     (整个表格的大标题,放在<table>下面,块级双标签,可位于table内任意位置,始终显示在tabl上方且水平居中
<th></th>                      (表头单元格用于表格中的小标题,默认加粗居中)
<thead></thead>          (表格头部)
<tbody></tbody>           (表格主体)
<tfoot></tfoot>              (表格底部)


 合并单元格
rowspan="要合并的数量" (竖着合并,从上往下,这个属性加到<td>里面)
colspan="要合并的数量"(横着合并,从左往右,这个属性加到<td>里面)
(两者都不能跨越表格结构合并)

文件格式化标签
<b></b>(加粗)   <u></u>(下划线)   <i></i>(倾斜) <s></s>(删除线)
<strong></strong>(加粗)   <ins></ins>(下划线)   <em></em>(倾斜)   <del></del>删除线

多媒体标签
<audio src=""></audio>音频标签 (里面加controls才能显示播放按钮)
音频标签目前支持三种格式: MP3 Wav Ogg  
<video src=""></video>视频标签

表单
登录、注册、搜索功能(收集用户信息)用表单

<form></form>           (表单域,块级双标签有form才可以实现按钮功能,并向服务器提交信息)
<input type="属性值">(表单标签)
text                    (文本框)     placeholder="自定义内容"(表单占位符)
password           (密码框)
radio                  (单选框) name="自定义内容"  name相同的为一组,checked为本组默认选中的
checkbox           (复选框)
file                     (文件选择,文件上传)


表单按钮
submit                    (提交按钮),value="自定义名字"
reset                       (重置按钮)
<button></button>  (普通按钮,没有功能,配合js使用)<button type="自定义功能"></button
下拉菜单
<select></select>            (下拉菜单的整体)
<option></option>           (下拉菜单的每一项,是块级双标签) selected(下拉菜单默认选中项)
<textarea cols="30" rows="10"></textarea>           (文本域标签,cols文本域宽,rows文本域高)
<lable></lable>                                    (直接使用lable标签把内容包裹起来,然后把for属性删除)


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值