标签:
一、基本概念
1、标签:HTML用于描述功能的符号称为“标签”,它是用来表现组成HTML文档的最基本的部件--HTML元素的。起始标签和终止标签之间的内容称为元素内容。
2、属性:在元素的起始标签中,可以设置1个或多个属性来控制标签的显示效果,格式为<标签名称 属性名 = “属性值”>
二、基本结构元素
HTML的基本结构元素主要有3个,它们是<html>、<head>和<body>元素,每个网页页面一般都包含这3个元素,而且它们只能出现一次。
1、<html>元素:Html标签:是包裹整个页面元素的根元素,它告诉浏览器整个文件是HTML格式,通常情况下document.documentElement(页面根元素)获取的就是html标签。
2、<head>元素:头部标签,用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等,主要包含meta标签、title标签、link标签(引入CSS)、script标签(引入CSS)等。
3、body 元素定义文档的主体。body 元素包含文档的所有内容(比如文本(<text>)、段落(<p>)、标题(<h1>)、换行(<br>)、分隔线(<hr>)、超链接(<link>)、图像(<img>)、表格(<table>)和列表(<ul>)等等。)
4、其它标签:
4.1、<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
4.2、<meat>标签:提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词,<meta> 标签的属性定义了与文档相关联的名称/值对。比如<meta charset="utf-8" />,定义了文档以utf-8编码。
4.3、<title>标签:页面的标题,设置之后将在浏览器选项卡看到。
5、一个简单的小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我喜欢的唐诗</title> </head> <body> <h1>我喜欢的唐诗</h1> <div> <h2>早发白帝城</h2> <p> 朝辞白帝彩云间,<br> 千里江陵一日还。<br> 两岸猿声啼不住,<br> 轻舟已过万重山。 </p> </div> <hr> <div> <h2>静夜思</h2> <p> 床前明月光,<br> 疑是地上霜。<br> 举头望明月,<br> 低头思故乡。 </p> </div> </body> </html>
三、常用标签
1、下边列出部分常见的html4标签
标签名 | 含义 | 属性值 | h5中的新属性 | 备注(说明) |
link | - | href(CSS地址) |
属性:size 值:heightxwidth、any 描述:规定被链接资源的尺寸。仅适用于 rel="icon" |
1.link 元素是空元素,它仅包含属性 2.此元素只能存在于 head 部分,不过它可出现任何次数 |
script | - | src(JS地址) |
属性:async 值:async 描述:规定异步执行脚本(仅适用于外部脚本) |
1.假如此元素内部的代码没有位于某个函数中,那么这些代码会在页面被加载时被立即执行 2.此元素的代码最好写在dom节点之后,否则可能会阻碍节点的渲染加载 |
div | 分割 | - | - | <div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符 |
table | 表格 | - | - | - |
span | 范围 | - | - | - |
a | 锚 | href(跳转地址) |
属性:download 值:filename 描述:规定被下载的超链接目标。 属性:media 值:media_query 描述:规定被链接文档是为何种媒介/设备优化的 属性:type 值:MIME type 描述:规定被链接文档的的 MIME 类型 |
1.如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性 2.被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性) 3.需用 CSS 来设置链接的样式 |
p | 段落 | - | - | - |
form | 表单 | action(表单提交地址) |
属性:autocomplete 值:on/off 描述:规定是否启用表单的自动完成功能 属性:novalidate 值:novalidate 描述:如果使用该属性,则提交表单时不进行验证 |
form 元素是块级元素,其前后会产生折行 |
h1~h6 | 标题 | - | - | - |
ul | 无序列表 | - | - | 用 CSS 来定义列表的类型 |
li | 列表项 | - | - | 用 CSS 来定义列表和列表项目的类型 |
img | 图片 | src(显示的图片的地址) | - |
1.从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间 2.有两个必需的属性:src属性 和 alt属性(alt="文本"如果无法显示图像,浏览器将显示替代文本) |
input | 用于搜集用户信息 | type(类型) | ||
iframe | 内联框架 | Src(显示的文档的地址) |
属性:sandbox 值:“”/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation 描述:启用一系列对 <iframe> 中内容的额外限制 属性:seamless 值:seamless 描述:规定 <iframe> 看上去像是包含文档的一部分 属性:srcdoc 值:HTML_code 描述:规定在 <iframe> 中显示的页面的 HTML 内容 |
可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器 |
备注:“-”表示没有改解释。h5中的新属性了解即可,应用还不是很频繁
2、常用的块状元素
块状元素,占行,如div,p,h1~h6,每一个块状标签都独占一行
3、常见的行内元素
行内元素(内联元素),不占行,如input,span,a,将在同一行共同显示
4、常见的列表元素
4.1、概念
<ul>(unordered):无序列表,故元素所包含的列表项将以粗点的方式显示
<ol>(ordered):有序列表,故元素所包含的列表项将以顺序数字的方式显示
<li>(list item):列表项,<li>元素被包含在<ul>或<ol>元素中
4.2、demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <h2>一个无序列表</h2> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> <hr> <h2>一个有序列表</h2> <ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> </body> </html>
5、常用的表格元素
5.1、概念
表格由<table>标签来定义。每个表格均有若干行(由<tr>标签来定义),每行被分割为若干单元格(由<td>标签定义)
5.2、demo
<table border="1"> <tr> <th>海绵宝宝</th> <th>柯南</th> </tr> <tr> <td>good boy</td> <td>clever boy</td> </tr> </table>
标签:
原文地址:http://www.cnblogs.com/li-na/p/5517489.html