行级标签和块级标签

合集下载

HTML基础总结

1.
表单
Type的用法类型 Text Password Radio Chexkbox Reset File Submit Image Button Hidden 功能单行文本输入密码单选多选重置表单数据按钮文件上传提交表单数据按钮图形提交按钮普通按钮隐藏域
表单
注意点
文本框value及size 2. 单选按钮checked,name 3. 复选框的name要一致 4. 下拉列表selecked默认选中和 value值 5. 禁用disabled 6. 文本域具有name、cols和rows属性。cols和rows 属性分别用来设置文本框的列数和行数和只读 readonly
1.
常用标签注意
注意点如果把<br>加在<p></p>标志对的外边，将创建一个大的回车换行，即<br>前边和后边的文本的行与行之间的距离比较大。若放在<p></p> 的里边则<br>前边和后边的文本的行与行之间的距离将比较小。 <h1>字号最大<h6>字号最小 <hr>没有结束标记. size用来设置水平线的厚度，而width用来设定水平线的宽度，默认单位是像素。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线，不加入此属性水平线将有阴影。
CSS样式
CSS基本语法 <style type=“text/css”> 选择器{ 对象的属性 : 属性值; } </style> CSS优势
内容和样式的分离 2. 样式复用提高效率 3. 页面控制精确 4. 有利于搜索引擎搜索
HTML课程总结复习

HTML5 期中考试

HTML5 期中考试您的姓名： [填空题] *_________________________________您的班级： [单选题] *○软件2103 ○软件2104○软件2106○移动2101html5文档结构由<head>和（）两部分组成？ [单选题] *<body>(正确答案)<meta><h><title>html5文档的树状结构中，（）标签为文档的根节点，位于结构中的最顶层。

[单选题] *<html>(正确答案)<head><body><title>W3C 制定的web标准以下不包括（） [单选题] *结构化标准语言CSSDreamWeaver(正确答案)DOMHTML5中doctype标签的正确定义是（） [单选题] *<!DOCTYPE html PUBLIC "-//W3C//DTD// XHTML 1.0 Transitional//EN" "/TR/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD// XHTML 1.0 Transitional//EN" "/TR/xhtml4/loose.dtd"><!doctype html5><!doctype html>(正确答案)（）标签显示HTML5文档的标题 [单选题] *bodymetatoptitle(正确答案)链接显示的内容为pic1.gif图片的正确写法是（） [单选题] *<a href="链接地址"><img src="pic1.gif"></a>(正确答案)<a src="链接地址"><img href="pic1.gif"></a><a src="链接地址"><img alt="pic1.gif"></a><href a="链接地址"><img src="pic1.gif"></href>在html5标签中以下正确的注释声明是（） [单选题] */*这是–注释/(正确答案)/这是注释///这是注释下面标记中，（）表示在标记的位置添加一个换行 [单选题] *<h1><enter><br>(正确答案)<hr>在html5中使用（）标签设置网页标题. [单选题] *<head><title>(正确答案)<meta><body>在图片标签<img>中，使用（）属性设置显示图片的路径。

华师2014春《多媒体技术与网页制作》离线作业

华师《多媒体技术与网页制作》离线作业一、简答题：1.简述构成网页的基本元素是什么，网页制作的常用工具有哪些，Web标准的三个标准是什么？答：对于任何一个网页，组成它的最基本元素主要是文本、图像、动画、声音、视频、表格和表单。

网页制作的常用工具:DreamweaverMX、FrontPage、FLASHMX、Fireworks 、PHOTOSHOP。

Web标准分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

2.什么是超链接，超链接有哪几类，超链接3种路径的区别和适用场合是什么？答：超链接（hyperlink）是网页互相联系的桥梁，超链接可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet、本地硬盘或局域网上的其他文件，甚至跳转到声音、图像等多媒体文件。

根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。

在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。

（1）绝对路径为文件提供完全的路径，包括适应的协议，如http,Ftp,rtsp等。

当链接到其它网站中的文件时，必须使用绝对链接。

（2）相对链接最适合网站的内部链接。

只要是同一网站之下的，即使不在同一个目录下，相对链接也非常合适。

文件相对地址是书写内部链接的理想形式。

只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。

（3）根目录相对地址同样适应于创建内部链接，但大多数情况下，不建议使用此种地址形式。

它在下列情况下使用：1.当站点的规模非常大，防置于几个服务器上时；2.当一个服务器上同时放置几个站点时。

3.简述什么是HTML,它的标记、属性及基本结构。

答：HTML是超文本标记语言。

H5基础标签浅谈（一）

H5基础标签浅谈（⼀）嗯，这是本⼈的第⼀篇博客……⽐较稚嫩，望各位⼤神见谅。

以下是本⼈对H5前端基本标签学习的⼀些学习笔记，与诸君分享。

⽂档声明格式：<!DOCTYPE html>注意：⽂档声明必有，⽽且必须在⽂档页⾯的第⼀⾏！HTML5已经简化了，H4以前较为繁琐，本着便(tou)捷(lan)的⼼思，就不重复描述以前繁琐的格式。

meta标签：描述⽂档的类型和编码；描述搜索关键字的描述（charset; content; http-equiv; name ;）meta标签中的属性：1，charset:设置⽂档的字符集编码格式HTML5中设置字符集编码：<meta charset="UTF-8">>>>常见的字符集编码格式：a.GB2312：国标码，简体中⽂； b.GBK,扩展的国标码； c.UTF-8,万国码Unicode2，http-equiv:将我们的信息写给浏览器看，按照⾥⾯的要求去执⾏，需要配合content属性使⽤。

（http-equiv属性只是表明需要设置哪⼀部分，具体的设置内容放到content属性中）可选属性值：content-type(⽂档类型) ;refresh（⽹页定时刷新） ;set-cookie（设置浏览器cookie缓存）3，name属性：使⽤⽅法同http-equiv。

常⽤且需要掌握的属性值：author（作者） keyword（⽹页关键字） description（⽹页描述）。

keyword（⽹页关键字） description（⽹页描述）这两个属性设置，⽹页必不可少<meta name="author" content=""/><meta name="keywords" content="HTML5,⽹页,web前端开发,Day1"/><meta name="description" content="这是准备⼯作的第⼀天的学习内容，来⾃杰瑞教育"/>详细属性如下图（上⾯介绍的是主要常⽤属性）：使⽤link标签，链接⽹页图标（title前的⼩logo）rel属性：声明链接⽂件的类型，此处选icontype属性：可以省略href属性：表⽰图⽚的路径地址代码：<link rel="icon" type="imag/x-icon" href="img/day1标题图标.png" />标签的分类块级标签：显⽰为块，前后隔⾏（⾃动换⾏）；⾏级标签：从左往右按⾏逐⼀显⽰；常见的块级标签<h1>-<h6>：标题标签，⾃动加粗，h1最⼤，h6最⼩。

简述行内元素和块元素的区别

简述行内元素和块元素的区别
行内元素和块元素是HTML中两种基本的语义化标签。

行内元素被定位在文档流的同一块区域中,而块元素被定位在文档流的不同块级区域中。

这两种元素在排版和样式上都有所不同,具体区别如下:
1. 定位方式:行内元素直接在HTML文档中的同一块区域中定位,而块元素在文档流中按照一定的规则定位,可以在不同块级区域之间灵活移动。

2. 边框和内边距:行内元素没有边框和内边距,而块元素有边框和内边距。

3. 样式:行内元素不能使用CSS样式,而块元素可以使用CSS样式。

4. 响应式:行内元素是固定大小的,不能响应式设计,而块元素可以根据宽度自适应不同宽度。

5. 嵌套:行内元素不能嵌套,而块元素可以嵌套。

6. 兼容性:由于行内元素直接在文档流中定位,因此在兼容性方面比块元素更具挑战性。

需要注意的是,虽然行内元素和块元素在定位和样式上都有所不同,但它们也有一些共同点。

例如,它们都可以包含文本和链接,并且都可以使用JavaScript进行交互。

在设计和开发HTML页面时,需要根据具体需求选择适合的元素类型。

HTML学习资料

HTML基础HTML定义HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言（Hyper Text Markup Language）。

HTML使用标签来描述网页。

使用浏览器来“解析和执行”HTML。

HTML作用百度等浏览器的内容。

微信内部的商城等等。

淘宝手机客户端内部的产品等信息。

HTML的开发工具笔记本Notepad++Macromedia Dreamweaverecplise注：HTML在编写时，一定要注意编译的编码，通常使用UTF-8。

HTML的基本结构最外层是html，里面由head和body组成。

head显示在浏览器的导航栏，body显示在网页内部。

HTML标签概念和特点块级和行级标签HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行 (多个会换行显示)行级标签：按行逐一显示（多个显示在一行）基本块级标签h标签、p标签、hr标签标题标签（h标签）从h1到h6依次变小段落标签（p标签）换行，中间空一行水平线标签（hr标签）显示为一条横线布局块级标签有序列表标签、无序列表标签、定义描述标签、表格、表单、分区有序列表标签1. 挑选商品2. 提交订单3. 付款成功无序列表标签JavaScript DOM编程艺术价格：￥29.30购买定义描述标签常用于图文混编的布局场合郑玉巧育儿经·幼儿卷定价：￥49.80表格常用于图文布局或显示数据HTML CSS+JSJSP框架表单通常用于数据提交等操作，将需要提交的数据放到form标签内部。

分区标签（div）一般当作结构化块状元素使用，作为分块或容器来使用可以多次相互嵌套使用行级标签 ##img标签、范围标签、换行标签图像标签注：为了兼容不同浏览器，推荐使用title属性，确保能显示提示文字范围标签郑玉巧育儿经·幼儿卷定价：￥49.80换行标签这是换行1，br标签。

这是换行2，br标签。

HTML基本属性XHTMLXHTML:可扩展超文本标记语言，与HTML类似，不过语法上更加严格。

【前端HTML】常用标签及属性

【前端HTML 】常⽤标签及属性路径r相对路径绝对路径标签ⅡⅢⅢⅡ<small>small⼩号字<strong>strong加重语⽓<sub>SUBscript下标<sup>SUPerscript上标<u>Underline下划线列表标签<ul>Unorder List⽆序列表块标签<ol>Order List有序列表块标签<li>LIst列表项⽬块标签<dl>Define List定义列表块标签<dt>Define Title定义标题块标签<dd>Define Describtion定义描述块标签表格相关<table>表格块标签<tr>Table Row表⾏块标签<td>Table Data cell单元格<th>Table Head表头<caption>caption标题<thead>Table head表头部分<tbody>Table body主体部分<tfoot>Table foot底部业脚部分表单相关<form>form表单<input>input表单元素(输⼊框)空标签<select>select选择(下拉框)<option>option选项(下拉列表项)<textarea>text area⽂本域框架相关<frameset>frame set框架集<frame>frame框架空标签<iframe>iframe内嵌框架容器<div>division 分隔(容器标签(块))<span>span跨度(容器标签(⾏内))标签分类标签名英⽂英⽂含义标签类型备注属性属性名英⽂英⽂含义取值应⽤场景备注src SouRCe资源位置资源的路径border border边框数字(像素) size size尺⼨数字(像素) width width宽度数字(像素) height height⾼度数字(像素)bgcolor BackGroundCOLOR背景颜⾊颜⾊值：red或#ffffffbackground background背景图⽚图⽚路径list-style list-style设置列表的所有属性列表list-style-image list-style-image将图像设置为列表项标记Noneurl列表list-style-type list-style-type设置列表项标记的类型Disc(实⼼圆)Cirle(空⼼圆)Square(实⼼⽅块)列表line-height line-height⾏⾼(⾏间距)数字(像素)布局多⾏⽂本text-align text-align对齐⽅式Left、right、center各种元素对齐letter-spacing letter-spacing字符间距数字(像素)加⼤字符间间隔text-decoration text-decoration⽂本修饰Underline、none加下划线、中划线等margin-top(right、bottom、left)margin外边距数字(像素)padding-top(right、bottom、left)padding内边距数字(像素)Ⅱbottom 、left)displaydisplay改变块级元素与⾏内元素的默认显⽰⽅式block(⾏变块)inline(块变⾏)none(该元素不显⽰在⽹页中)position position 定位static(静态定位)relative(相对定位)absolute(绝对定位)fixed(固定定位)⽤于定位float float 浮动None 、left 、right clearclear处理浮动塌陷left(清除左边浮动)right(清除右边浮动)both(清除两边浮动)none(不清除浮动)type type 列表类型Disc(实⼼圆)Cirle(空⼼圆)Square(实⼼⽅块)⽤于列表alignalign对齐Left 、right 、center top 、middle 、bottom 段落内容⽔平对齐⽂字与图⽚垂直对齐type type 表单元素类型text(⽂本)checkbox(复选)radio(单选)password(密码)file(⽂件)submit(提交)reset(重置)button(按钮)image(图⽚按钮)hidden(隐藏)表单元素method method 表单数据的提交⽅式get postalt alter 改变、替换(图⽚不显⽰时提⽰信息)图⽚cellpadding cell padding 单元格内边距数字表格cellspacing cell spacing 单元格之间距离数字表格href Hypertext REFerence 超⽂本引⽤(跳转到⽂件位置)relRELationship关系(⽤于定义链接的⽂件和HTML ⽂档之间的关系)StyleSheet 样式表link 链接⼀个⽂件时target target ⽬标(⽹页打开的位置)_blank(新窗⼝打开)_self(⾃⾝窗⼝打开)_top(以整个浏览器作业作为窗⼝显⽰新页⾯)_parent(在⽗窗⼝中打开新的页⾯)colspan COLumn span 单元格跨列数字(跨的列数)表格rowspan row span 单元格跨⾏数字(跨的⾏数)表格readonly read only 只读value value 输⼊框的初始值maxlength max length 最⼤长度scrolldelay scroll delay 滚动延时<m arquee>directiondirection⽅向(滚动⽅向)<m arquee属性名英⽂英⽂含义取值应⽤场景备注块级标签<div>、<h1>~<h6>、<p>、<hr>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>、<table>⾏级标签<a>、<font>、<img>、<input>、<select>、<textarea>、<label>、<span>ⅡⅡ选择器简单选择器属性选择器复合选择器关系选择器伪类选择器ⅡⅢⅢⅢⅢⅢ伪类：（不存在的类，特殊的类）⼀般是使⽤:开头，⽤来描述⼀个标签元素的特殊状态（很像是类）。

一、HTML中常用标签及属性

⼀、HTML中常⽤标签及属性⼀、HTML基础语法 ---> 单标签、双标签、块级元素、⾏内元素单双标签其实就是HTML⽂档中标签书写的格式，页⾯中最常见的是双标签；单标签就是只有⼀个标签，也就是⼀个空元素：meta、img、hr、br 双标签有开始标签和结束标签块级元素：独占⼀⾏，对宽⾼的属性值⽣效，如果不给宽度，块级元素就默认浏览器的宽度，（即就是100%宽）例如：div p ul h1~h6 ..... ⾏内元素：对宽⾼属性值不⽣效，完全靠内容撑开宽⾼，可以跟其他标签存在⼀⾏例如：span b strong em a img input ...... ⾏内块元素：结合⾏内和块级元素的特点，不仅对宽⾼的属性值⽣效，还可以跟多个标签存在⼀⾏例如：input img⼆、HTML中常⽤标签 ---> ⽂档头部<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="shortcut icon" type="image/x-icon" href=""><link rel="stylesheet" type="text/css" href=""></head><body></body></html>三、HTML中常⽤标签 ---> ⽂本标签级属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p style="text-indent: 2em;font-size:15px;color: red;font-weight: bold;font-family: monospace;"></p><em></em><i></i><del></del><span></span><br><pre></pre><h1 style="text-align: center;"></h1><h2 style="background: pink;height: 50px;line-height: ;"></h2><h3></h3><h4></h4><h5></h5><h6></h6></body></html>四、HTML中常⽤标签 ---> 超链接<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 去掉a链接下划线 */a{text-decoration: none;}/* 伪属性，⿏标移上字体变红,下划线显⽰ */a:hover{color: red;text-decoration: underline;}div{height: 1000px;background: pink;width:400px;}</style></head><body><a href="#">我是⼀个链接</a><a href=""><img src="" alt=""></a><a href="top">页⾯顶部</a><div></div><a href="" id="top">回到顶部</a></body></html>五、HTML中常⽤标签 ---> 列表标签<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签</title><style type="text/css">/* 清空li样式；⽂化素质宽⾼；设置边框线 */ul li{list-style: none;height: 40px;width: 200px;border: 1px solid #ccc;margin: 5px 0px;text-align:center;line-height: 40px;} /* 设置前⾯样式为图⽚，但是⽆法调整图⽚与⽂字的间距 */ul li{list-style: url(图⽚地址);}/* 伪元素；在⽂字前⾯设置图⽚与⽂字的间距 */ul li::before{content: url(图⽚地址);margin-right: 30px;}/* 伪元素；在⽂字前⾯设置图⽚与⽂字的间距 */ul li::after{content: url(图⽚地址);}</style></head><body><ol><li>web前端</li><li>JavaScript</li><li>jQuery</li></ol><ul><li>西⽠<ul><li>有籽西⽠</li><li>⽆籽西⽠</li></ul></li><li>苹果</li><li>西柚</li></ul></body></html>六、HTML中常⽤标签 ---> form表单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title><style type="text/css">/* padding内边距 */input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 20px;padding: 20px;} /* border: none去掉按钮⾃带的边框线 */button{height: 50px;width: 300px;margin-top: 20px;background: #FF6A00;border: none;color: #fff;} </style></head><body><form method="" action=""><input type="text" name="username" placeholder="请输⼊⽤户名"><br><input type="password" name="pwd" placeholder="请输⼊⽤密码"><br><button>登陆</button></form></body></html>七、HTML中常⽤标签 ---> 表格（table）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title><style type="text/css">/* 清除默认样式 */*{margin: 0px;padding: 0px;}/* border-collapse: collapse;合并多余的边框线 */table{border: 1px solid #ccc;border-collapse: collapse;}tr th{height: 200px;border: 1px solid #ccc;width: 100px;}tr td{height: 200px;border: 1px solid #ccc;width: 100px;}</style></head><body><table><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr><tr><td colspan="5"></td></tr><tr><td rowspan="2"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body></html>。

常见的块级元素和行级元素

常见的块级元素和⾏级元素常见的块级元素有：div；p；form；ul；li；ol；dl；hr；table；h1~h6；常见的⾏内元素有：a；span；strong；em；br；img；input；label；button；select；textarea；i；注意点：1）块级元素会独占⼀⾏，其宽度⾃动填满其⽗元素宽度⾏内元素不会独占⼀⾏，相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排不下，才会换⾏，其宽度随元素的内容⽽变化2）块级元素可以设置 width, height属性，⾏内元素设置width, height⽆效。

【注意：块级元素即使设置了宽度，仍然是独占⼀⾏的】3) 块级元素可以设置margin 和 padding。

⾏内元素的⽔平⽅向的padding-left,padding-right,margin-left,margin-right 都产⽣边距效果但是竖直⽅向的padding-top,padding-bottom,margin-top,margin-bottom都不会产⽣边距效果。

（⽔平⽅向有效，竖直⽅向⽆效）4)p元素虽然是块级元素，但⾥⾯不可以再嵌套块级元素；a元素虽然是⾏内元素，但⾥⾯可以嵌套块级元素，但a标签⾥⾯不可以再嵌套a标签；img、button和input既是⾏内元素，也是替换元素，有内在的宽度和⾼度，所以可以直接设置宽度和⾼度，⽤js也可以直接读取到相应的⾼度和宽度；5)⾏内元素中间有间隙：产⽣原因：换⾏符、tab（制表符）、空格产⽣间隙；解决⽅法：1、元素写成⼀⾏；2、设置font-size：0；采⽤⽅法1代码会⽐较乱，⼀般不使⽤；采⽤⽅法2：直接给⾏内元素的⽗元素设置font-size：0，然后针对具体的⾏内元素设置相应的字体⼤⼩。

1 Html基本标签

常用于布局的块级标签7-2
无序列表标签
<ul> <li>列表项1</li> …… </ul>
<body> <h3>新人上路指南 </h3> <ul> <li>如何激活会员名？</li> <li>如何注册贵美会员？</li> <li>注册时密码设置有什么要求？</li> <li>贵美认证</li> </ul> </body>
操作演示10：分区标签
小结请说出实际开发常用的4种块状结构是什么？ 1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单
练习——常用于布局的块级标签需求说明：
<h1>标题</h1> …… <h6>标题</h6>
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
操作演示2：标题标签 h1最大 h6最小前后隔行
操作演示13：换行标签
为什么需要W3C标准 W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准：

知识串讲

2.锚链接：在本页中连接到指定位置。需要设置锚点，连接地址为锚点名称。例：<a href=“#锚点名”>连接内容</a>.注意锚点名称前面 #不可省略。
3.功能性链接：在网页中调用其他程序功能。例如调用电子邮件发送程序：
<a href=“mailto:邮件接受地址(例如：123@)”>连接内容</a>
<img/>
<span>
用于标识行内的某个范围。语法： <apan (可设置属性)>需要特殊显示的内容 </span>
<br/>
行内标签不会自动换行。需要对行内标签内容换行时可以借助<br/>完成。
XHTML1.0的基本规范
1.标签名和属性名称必须小写。 2.HTML标签必须关闭。 3.属性值必须用引导号引起来。 4.标签ຫໍສະໝຸດ 须正确嵌套。注释及特殊符号
语法：<!—注释内容-->
往网页中输入特殊字符，需在html代码中加入以& 开头的字母组合或以&#开头的数字。
表单
基本语法：<form action=“表单提交地址”method=“表单提交方式”>
表单元素内容
</form>
规定提交表单时，发送表单数据的地址
input 标签的属性和功能
基本块级标签：
1.<h1>~<h6> ：表示一段文字的标题。依次 <h1></h1> 为一级标题、<h6>为6级标题。
基本语法：<h1>一级标题</h1>
<h6>六级标题</h6>

HTML基本标签及结构详解

HTML基本标签及结构详解1.HTML概述1.HTML：超⽂本标记语⾔。

是⼀种标识性语⾔，⾮编程语⾔，不能使⽤逻辑运算。

通过标签将⽹络上的⽂档格式进⾏统⼀，使分散的⽹络资源链接为⼀个逻辑整体。

超⽂本是⼀种组织信息的⽅式，通过超级链接将多种媒介链接起来标记:标签。

⽤<>包裹的具有⼀定含义的内容，⽐如:…静态⽹页:不变动态⽹页：跟后台同时改变2.HTML标签结构1.⽂档结构：<!doctype html><!--!表⽰声明的意思。

这⼀⾏代码意思：下⾯的⽂档标签将以html5进⾏解析--><html><!-头部.⽤来完成⼀个⽹页的相关设置-><head><meta charset="utf-8"><meta name="keywords" content=""><meta name="description" content=""><title>我的第⼀个html⽹页</title><link rel="shortcut icon" href="" type="image/png"><style>/*书写样式的地⽅*/</style><link rel="stylesheet" href="style.css"></head><body><p>这是⼀个段落</p></body><script>//放脚本代码的地⽅</script></html>2.常⽤标签：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><!--1.div标签，⽤于布局，没有具体含义,分层。

HTML标签部分（块级行级）

HTML标签部分（块级⾏级）⼀.基本块级标签1.HTML标签的分类：a.块级标签：显⽰为块状，独占⼀⾏，⾃动换⾏。

b.⾏级标签：在⼀⾏中，从左往右依次排列，不会⾃动换⾏。

2.h标签（标题标签）h标签：标题标签，显⽰为⿊体加粗标题标签，共分六种：h1~h6:h1最⼤，h6最⼩！<h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4><h5>这是h5标签</h5><h6>这是h6标签</h6>2.hr标签<hr />⾃闭和标签3.p标签（段落标签）p标签：表⽰段落标签。

相当于我们⽂章中的⼀段⽂字！！4.<br />换⾏符注意：在代码中，直接回车换⾏，浏览器不认识。

必须使⽤换⾏符<br />告诉浏览器这⾥要换⾏。

5.pre标签（预格式标签）pre标签会保留代码中的空格，回车等符号，直接在浏览器中显⽰。

pre标签常⽤于在⽹页中显⽰代码，保留代码格式6.blockquote（块引⽤标签）blockquote:块引⽤标签。

表明⼀段话是从其他⽹站引⽤的。

有⼀个重要属性：cite=""表⽰这段话的引⽤来源，常放⼀个⽹站地址。

但是浏览器显⽰并没有任何区别。

⼆.基于布局的块级标签1.⽆序列表有多个列表项组成，每个列表前⾯带⼩⿊点，称为⽆序列表。

⽤<ui>表⽰。

列表中的每⼀个⼩项⽤<li>表⽰。

<ul><li>这是⽆序列表第⼀项</li><li>这是⽆序列表第⼆项</li><li>这是⽆序列表第三项</li><li>这是⽆序列表第四项</li></ul>2.有序列表有序列表⽤<ol>标签，列表中的每⼀个⼩项⽤<li>表⽰。

块级元素和行内元素的区别

(3)、table-tr-td:常用于规整数据的显示场合
(4)、form-table-tr-td:常用于表单布局的场合
行级元素
行级标签也称为内联标签、行内标签。使用块级标签为页面“搭建完成组织结构”之后，往每个小区块添加内容时，就需要使用到行级标签.
行级标签:类似文本的显示方式，按“行”逐一显示，常用的行级标签有：
5).表单<form>:表示用于描述需要用户输入的页面内容。
6).分区<div>:表示用于组织小区块的内容。为了方便管理，数目众多的小区块还需要放到一个大区块中进行布局。分区标签<div>常用于页面布局时对区块的划分，它相当于一个大的容器，可以容纳无序列表、有序列表、定义列表等块级标签。同时也可以容纳段落、标题、文字、图片等内容。
标准文档流: 是指在不使用其它的排版和定位相关的特殊CSS规则时,各种元素的排列规则,换语话说CSS规定的网页元素默认的排列方式.
块级元素
从页面布局和显示外观的角度看,一个页面的布局就类似一篇报纸的排版,需要分为多个区块,大的区块再细分为小区块,块内为多行逐一排列的文字、图片、超链接等内容。这些区块一般称为块级元素，而区块内的文字、图片或超链接等一般称为行级元素。页面这种布局结构，其本质上是由各种HTML标签组织完成的。
与行级元素相比，块级元素具有如下特点：
(1)、前后换行显示，块级元素比较“霸道”，默认状态下独占一整行。
(2)、块级元素常用作容器，即可以再“容纳”其它块级元素和行级元素，而行级元素一般用于组织内容，即只能用于“容纳”文字、图片、超链接等其他行级元素。
(3)、块级元素具有一定的高度和宽度，可以通过设置块级元素的width、height属性来控制。

html5的行标签与列标签

html5的⾏标签与列标签html5的标签很多，这⾥不⼀⼀列举。

下⾯只将常⽤的⼀些html5的⾏标签和列标签进⾏了分类总结，⽅便⼤家学习借鉴。

注意：⼀些标签可在css样式中进⾏⾏标签与列标签的互相转换，这⾥所列举的标签没有进⾏任何样式的设置，所有列标签和⾏标块标签：<h1>⼀级标题<h2>⼆级标题<h3>三级标题<h4>四级标题<h5>五级标题<h6>六级标题<ul>⽆序列表<ol>有序列表<dl> ⾃定义列表<dt><dd><p>段落<pre>格式化⽂本<blockquote>块引⽤<div>常⽤块<figure><figcaption><video>视频<nav><address>地址<option>选择<fieldset>⾃定义字段<legend>说明<form>表单<table>表格⾏标签：<strong>加粗<em>倾斜<i>倾斜<b>加粗<a>超链接<small>⼩字体⽂本<sub>下标<sup>上标<iframe>内联框架<img>图⽚<abbr>缩写<bdo>⽂字顺序<time>时间<tr><td><th><caption>标题<colgroup>表格列合集<button>按钮<input>输⼊框<select>选择框<textarea>⽂本内容<mark>标记<audio>⾳频<u>下划线<label>表格标签<span>定义⽂本内区块<var>定义变量块标签H标签<h1>我是字体最⼤的标签</h1><h2>我是字体第⼆⼤的标签</h2>⽆序列表<ul><li>⽆序列表第⼀段</li><li>⽆序列表第⼆段</li><li>⽆序列表第三段</li></ul>有序列表<ol><li>我是有序列表</li><li>有序列表第⼆段</li><li>有序列表第三段</li></ol>⾃定义列表<dl><dt>我是⾃定义列表类似于段落</dt><dd>⾃定义列表</dd></dl>P标签<p>段落标签我是⼀个段落标签 <span class="color:red">a</span></p>Pre标签<pre>定义编排⽂本保留⽂件原有格式例如空格和列标签</pre>Blockquote标签<blockquote>定义引⽤⽂本，⾸⾏会空两格</blockquote>Div标签<div><a href="">asdf </a></div>Figure标签<figure><figcaption>这是⼀个logo</figcaption><img src="QQ截图20160405205734.png" width="200" height="100"/></figure>Video标签视频<video width="200" height="100" controls autoplay loop muted><source src="视频.MP4" type="video/MP4" ></video>Nav标签⼀般是页码<nav><a href="#">1</a><a href="#">2</a><a href="#">3</a></nav>Address标签<address>这是⼀个地址标签，倾斜显⽰</address>Datalist标签与optioon标签放在表单内<input type="text" list="ilist"><datalist id="ilist"><option value="男装" label="男装" >男装</option><option value="男裤" label="男裤">男裤</option><option value="⼥装" label="⼥装">⼥装</option><option value="⼥鞋" label="⼥鞋">⼥鞋</option></datalist>Fieldset标签放在表单内<fieldset><legend>F26名单</legend>班长：<input type="checkbox"/>学委：<input type="checkbox"/></fieldset>Form表单<form action="外部链接路径" method="get" name="myForm"><input type="text" value="username"/>请输⼊您的⽤户名称： <input type="text" placeholder="username" maxlength="10"/>请输⼊您的密码：<input type="password" /><br/><input type="button" value="按钮" /><br/><input type="submit" value="提交"/><br/><input type="reset" value="重置"/><br/><input type="file" value="请选择你的⽂件"/><br/><p>请选择你想要的⽔果</p> //复选框苹果 <input type="checkbox"/>⾹蕉<input type="checkbox"/>梨⼦ <input type="checkbox"/><p>请选择你的性别</p> //单选框男 <input type="radio" name="sex"/>⼥ <input type="radio" name="sex"/><br/></form>Table标签<table border="1" style="border-collapse: collapse" cellpadding="5"><caption>这是⼀个表格</caption><tr><th>第⼀列</th><th>第⼆列</th><th>第三列</th><th>第四列</th></tr><tr><td colspan="2">1-1</td>//横向合并单元格<td>1-3</td><td>1-4</td></tr><tr><td rowspan="2">2-1</td>//纵向合并单元格<td>2-2</td><td>2-2</td><td>2-3</td></tr><tr><td>3-2</td><td>3-3</td><td>3-4</td></tr></table>⾏标签Strong标签<strong>我是strong标签，起强调作⽤。

块级元素和行内元素的区别，常见的块级元素和行内元素有哪些

块级元素和⾏内元素的区别，常见的块级元素和⾏内元素有哪些⼀般来说，html的元素分为两种，即块级元素和⾏内元素。

块级元素：块状元素排斥其他元素与其位于同⼀⾏，可以设定元素的宽（width）和⾼（height），块级元素⼀般是其他元素的容器，可容纳块级元素和⾏内元素。

⾏内元素：⾏内元素不可以设置宽（width）和⾼（height），但可以与其他⾏内元素位于同⼀⾏，⾏内元素内⼀般不可以包含块级元素。

⾏内元素的⾼度⼀般由元素内部的字体⼤⼩决定，宽度由内容的长度控制。

常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th；常见内联元素有：em,strong,span,button,input,label,code,select,img,textarea两者之间的区别：区别：1.块级元素占据⼀整⾏，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同⼀⾏⾥除⾮放不下，才会挤到新的⼀⾏2.块级元素可以设置宽度width和⾼度height，⽽内联元素设置widht和height是⽆效的3.块级元素可以包含块级元素和内联元素，⽽内联元素只能包含⽂本4.块级元素可以设置margin和padding属性，⾏内元素只有margin-left、margin-right、padding-left、padding-right起作⽤⽐如：我们可以给div和p元素应⽤以下的样式，但是span标签不能应⽤下⾯的样式。

.test{width:100px;height:100px;}当然我们还可以通过样式display属性来改变元素的显⽰⽅式。

当display的值设为block时，元素将以块级⽅式呈现；当display值设为inline 时，元素将以⾏内形式呈现。

所以我们可以给span标签应⽤以下样式：.test{width:100px;height:100px;display:block;}。

解析HTML

解析HTML解析HTML⼀、什么是HTMLHTML是超⽂本标签语⾔，即⽹页的源码。

⽽浏览器就是翻译解释HTML源码的⼯具。

⼆.HTML的基本结构<!DOCTYPE html> 声明⽂档类型HTML5⽂档声明在HTML⽂档必不可少，且必须放在⽂档的第⼀⾏；<html><head> head标签内的信息⽤于描述⽹页，即元数据<meta charset="UTF-8"><title>⽹页的标题</title></head><body></body></html>标签：最基本的单位和最重要的组成部分；1.1 HTML标签：使⽤<>括起来；标签都是闭合的；标签属性：是标签的⼀部分，⽤于包含额外的信息;1.2 HTML标签属性：可以有多个属性；属性和属性值成对出现;语法；【link标签】 : 1.作⽤：⽤于为⽹页链接各种⽂件;2.常⽤属性:rel：⽤于表明被连接⽂件与当前⽂件的关系。

此处选icon，表明被连接图⽚是当前⽹页的icon图标;type：表明被连接⽂件是什么类型。

type=" image/x-icon"可以省略;href：表明被连接⽂件的地址;【meta标签】【重点】1.charset属性：单独使⽤，设置⽂档字符集编码格式。

写法：<meta charset="UTF-8">常见的中⽂编码按格式：GB-2312：国标码，简体中⽂；GBK：扩展的国标码：简体中⽂；UTF-8：万国码unicode码，基本兼容各国语⾔；（常⽤）属性：需配合content属性使⽤，主要声明浏览器如何解释编译⽂件；2.http-equiv属性：写法：<meta http—equiv=“属性值” content=“属性值详细内容”>常⽤属性值：content-type 4.0之前版本的编码声明；set-cookie设置浏览器cookie缓存；refresh⽹页刷新；属性：需配合content属性使⽤，主要⽤于给搜索引擎提供必要信息。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<b>
字体加粗
<bdo>
可覆盖默认的文本方向
<big>
大号字体加粗
<br>
换行
<cite>
引用进行定义
<code>
定义计算机代码文本
<dfn>
定义一个定义项目
<em>
定义为强调的内容
<i>
斜体文本效果
<img>
向网页中嵌入一幅图像
<input>
输入框
<kbd>
定义键盘文本
<label>
标签为input元素定义标注（标记）
定义地址
<caption>
定义表格标题
<dd>
定义列表中定义条目
<div>
定义文档中的分区或节
<dl>
定义列表
<dt>
定义列表中的项目
<fieldset>
定义一个框架集
<form>
创建HTML表单
<h1>
定义最大的标题
<h2>
定义副标题
<h3>
定义标题
<h4>
ห้องสมุดไป่ตู้定义标题
<h5>
定义标题
<h6>
定义最小的标题
可见行标签与块标签的区别：
行标签：内容撑开宽度，不可以通过样式控制宽和高，它的宽和高随标签里的内容而改变:
行级标签的宽度和高度是有标签内的内容来控制的。
不能通过width; height;属性修改标签的宽度和高度。
块标签：宽度撑满行(默认)，可以用样式控制其宽和高
块级标签的宽度默认是占整个页面的宽度。
<q>
定义短的引用
<samp>
定义样本文本
<select>
创建单选或多选菜单
<small>
呈现小号字体效果
<span>
组合文档中的行内元素
<strong>
语气更强的强调的内容
<sub>
定义下标文本
<sup>
定义上标文本
<textarea>
多行的文本输入控件
<tt>
打字机或者等宽的文本效果
<var>
定义变量
<hr>
创建一条水平线
<legend>
元素为fieldset元素定义标题
<li>
标签定义列表项目
<noframes>
为那些不支持框架的浏览器显示文本，于frameset元素内部
<noscript>
定义在脚本未被执行时的替代内容
<ol>
定义有序列表
<ul>
定义无序列表
<p>
标签定义段落
<pre>
定义预格式化的文本
<table>
标签定义HTML表格
<tbody>
标签表格主体（正文）
<td>
表格中的标准单元格
<tfoot>
定义表格的页脚（脚注或表注）
<th>
定义表头单元格
<thead>
标签定义表格的表头
<tr>
定义表格中的行
行内元素列表
<a>
标签可定义锚
<abbr>
表示一个缩写形式
<acronym>
定义只取首字母缩写
能通过width; height;属性修改标签的宽度和高度。
但行标签img，textarea，select，input是可以设置宽和高并且有效的
转换：
如果要将行内元素转换成块级元素，只需要在该标签内设置样式display:block。
所有行内元素和块级元素标签，红色为常见的：
块级元素列表
<address>