目录
1 .简介HTML
2 .结构标签
3 .排版标签
4 .文本标签
5 .列表标签
6 .图像标签
7 .链接标签
8 .Link标签
9 .表格标签
10 .表单标签
11 .meta标签
12 .内嵌框架
内容 :
一 简介HTML
html网页是由html标签按一定的规则构成的文件。
谁制定的html标准？
w3c组织——一个非营利组织。
w3c组织制定了非常多的互联网技术标准（规范）。
谁领导w3c？
Tim Berners-Lee， 蒂姆·伯纳斯-李——互联网之父。
标签也叫元素,标记,具有某些特定的含义和作用以及外观表现
标签基本形式：
<标签名 属性名1=“属性值1” 属性名2=“属性值2” …> # 单标签
<标签名 属性名1=“属性值1” 属性名2=“属性值2” …>内容</标签名> # 双标签
说明：
1，标签名是一个“单词”（有的单词可能只有一个字母）。
2，属性名也是一个“单词”，表示对该标签的进一步“修饰”（设定）。
3，有的标签没有“内容部分”，则后面的结尾标签部分不用写——这种称为“单标签”。
——绝大多数标签都是“双标签”，只有很少几个是单标签。
4，不同的标签有不同的属性，不同的属性有不同的含义（或作用）。
5，有的属性可以出现在所有标签上——叫做通用属性。
注释格式:
<!-- 这是个注释 -->
标签的分类
形式分类:
按标签形式，html标签可以分为双标签和单标签。
单标签比较少，只有几个，比如：br，hr，input，img，link
功能分类:
文字标签：i, u, sub, sup, s, font
结构标签：html, head, title, body, div, span, br, hr, h1~h6, pre, blockquote
连接标签：a， link
图像标签：img
列表标签：ul， ol， li， dl， dt，dd
表格标签：table， tr， td， th， caption， thead， tbody， tfoot
表单标签：form， input， select， option， textarea，button，
其他： meta， style， script，
二 结构标签
嵌套关系：
就是一个标签内，再放其他标签。比如：
<p>
<a href=”http://www.baidu.com” > go to baidu </a>
</p>
并列关系：
<p>这是段落1</p>
<p>这是段落2</p>
三 排版标签
内容级结构标签在一个html文档中可以出现多次，而且都应该在body标签中。
内容级结构标签也常称为“排版标签”，主要包括：
h1~h6，br， hr， p， pre， blockquote， div， span， 表格标签等等
- h1～h6：
标题标签，用于设定一定级别的标题，h1是最大的标题，h6是最小的标题
属性 :align：left（左） | center（中） | right（右） - br：
换行标签，表示新的一行，能够让其后的内容放到下一行的开头开始显示。
单标签 - hr:
横线标签，就是输出一根横线，有几个常用属性，如下所示：
noshade:去除阴影<hr width=”宽度值” color=”颜色值” align=”对齐方式” size=”粗细” noshade /> - p:
段落标签，表示“一个段落”，此时文字前后自然会有一个空行。
有一个属性为：align，其值可以为：left（默认）， center，right。 - pre:
预格式化标签，表示其中的内容“原样输出”， 主要是其中的换行符，tab符以及空格能在网页上也直观显示出该有的效果。 - blockquote:
引用标签，表示其中的内容是“引用别人的话”，通常在学术著作中比较常见(不常用,就是加粗)
块标签和行内标签
- 块标签：
一个标签写出后，不管其是否有内容（是否单标签），或内容多少，都会“独占一行”。
比如：hr, p, h1, div等 - 行内标签：
一个标签跟另一个标签如果相继出现，则在页面表现上会在一行出现。
比如：b， strong， font等
块元素可以设置宽高，行内元素不可以设置宽高
四 文本标签
文本标签主要用于修饰文字内容，以实现一定的文字外观效果，或表达一定的含义，或二者兼具。
文本标签主要包括：
-
b：粗体
-
strong：加强，强调（也会表现为粗体）
-
i：斜体
-
em：强调（斜体）
-
s：删除线
-
del：删除线
-
u：下划线
-
ins：下划线
-
sub：下标
-
sup：上标
-
big：字体变大115%
-
small：字体变小85%
-
font：可以设置文字大小，颜色和字体的文本标签。
该标签有几个属性。<font size=”大小” color=”颜色” face=”字体” > 文本</font>
五 列表标签
列表标签是为了在网页中实现“列表效果”的版面布局效果。
列表标签包括三种：
- 无序列表：ul>li,
- 有序列表：ol>li,
- 定义列表：dl>dt,dd
1 无序列表ul>li:
形式为:
<ul type=”列表项目符号”>
<li>项目1。。。。</li>
<li>项目2。。。。</li>
。。。更多项目按照上述li形式写出。。。
</ul>
ul标签有一个属性type，可取值为：
- disc： 小圆点，默认值
- circle： 小圆圈
- square： 四方形块
2 有序列表ol>li :
形式为:
<ol type=”序号类型” start=”起始序号”>
<li>项目1.。。。。</li>
<li>项目2。。。。</li>
。。。更多项目
</ol>
属性说明：
- 序号类型：
表示有序列表的序号是什么字符或数字，有如下可用的值：
1： 阿拉伯数字
a： 小写字母
A： 大写字母
i： 小写罗马数字
I： 大写罗马数字 - 起始序号：
表示上述编号是从哪个开始，不管序号类型是什么，都只要用一个阿拉伯数字来表示。 - 序号类型和起始需要都可以省略（内部都有默认值）。
3定义列表dl>dt，dd:
形式:
<dl>
<dt>条目名称1</dt>
<dd>条目内容1。。。</dd>
<dt>条目名称2</dt>
<dd>条目内容2。。。</dd>
。。。更多条目。。。
</dl>
六 图像标签
图像标签就是为了显示图片。
图片标签就一个：img
形式:
<img src=”.....图片路径” width=”xxx” height=”xxx” alt=”xxx” align=”xxx” border=”xxx” />
属性说明：
- src：用于设定图片的路径。
图片格式有很多种，网页上主流的3种：png, jpg, gif - width，height：设定图片的宽高。通常只设定其中一项，另一项会自动按比例缩放。
- alt：设定图片的“替换文本”，主要用于搜索引擎作为搜索图片的关键字。
- align：设定图片的“对齐方式”。它可以让图片紧贴左边或右边展示，以使其周围文字可以“绕图展示”（但注意：align不能让图片“居中排列”）
- border：用于设定图片的边框线宽度；
七 链接标签
链接标签<A>主要是为了实现网页中的“链接”，以使用户可以点击并跳转。
链接分为两种：超链接 和 锚点链接
语法：<a href=”URL”>内容</a>
假链接：<a href=”#”>内容</a>
超链接
实现从当前页面跳转到目标页面
例如:
<a href="1/3/02.html">跳转</a>
<a href="https://www.baidu.com/">点击我跳转到百度首页</a>
<a href="baidu.com">
<img src="1.jpg">
</a>
属性：
- target: _self(默认在当前窗口中打开新页面) | _blank (在新窗口中打开新页面)
修改所有链接的target默认值在 head标签中设置 base标签
<base target="_blank"> - title： 设置鼠标悬停到超链接上的文字提示。
锚链接
锚链接实现的是在当前页面中跳转
<p id="id名">内容</p>
<a href="#id名">内容</a>
八 Link标签
通过link标签可以设置网页图标
<link rel="icon" href="favicon.ico">
注意 :
- 要将link标签放到head标签中
- link标签中的属性rel=“icon”。
- href=“图标路径”
- 一般将网页图标放到网站的根目录下。
九 表格标签
Table>tr>td，th
<table 属性.... >
<tr >
<td 属性.... > 内容 </td>
。。。若干个单元格。。。
</tr>
。。。若干个行。。。
</table>
属性 :
- table： 表示表格（整体），有多个常用属性。
- tr： 表示行，基本上没有什么属性。
- td： 表示单元格（列），有多个常用属性。
注意：这里，table，tr， td是严格的嵌套关系，即只能按此层次关系出现。
table常用属性
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框宽度 | 像素值(默认为0) |
| cellspacing | 设置单元格与单元格边框之间的空白间距宽度 | 像素值(默认为2像素) |
| cellpadding | 设置单元格内容与边框线之间的空白间距宽度 | 像素值(默认为1像素) |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
| bgcolor | 设置表格的整体背景颜色 | |
| background | 设置表格的整体背景图 | |
| bordercolor | 格的边框线颜色 | |
td标签常用属性:
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| width | 设置单元格的宽度 | 像素值 |
| height | 设置单元格的高度 | 像素值 |
| align | 设置单元格中的内容的水平对齐方式 | left、center、right |
| valign | 设置单元格中的内容的垂直对齐方式 | top、middle、bottom |
| rowspan | 设置要跨行（纵向）合并的单元格数 | 要合并的数量 |
| colspan | 设置要跨列（横向）合并的单元格数 | 要合并的数量 |
| bgcolor | 设置单元格的背景颜色 | |
| background | 设置单元格的背景图 | |
td标签可以使用th进行替换，表示“标题单元格”，其本质也是单元格。
表格高级 :
thead，tbody，tfoot 三个标签 , 写不写效果一样.可以忽略这块
就是table标签里,分为thead标题部,tdboy内容部,和底部tfoof,在这三个部分里在写tr ,因为不写也会自动给补上的
十 表单标签
表单有很多种，比如：
单行文本框，多行文本框，密码框，单选项，多选项，下拉选项等等。
表单标签主要包括：
form, input, select>option, textarea, button,
其中:
- form标签是“盒子标签”（或称为容器标签），需要用它将其他表单标签包含起来。
- input标签虽然只是一个标签，但其有很多个形式（根据type属性的不同）。
表单标签的常见形式类似这样
详解:
form标签 :
form标签的作用是用于将其他表单标签“包”起来，以便作为一个整体，可以提交数据到服务器。
形式：
<form name=”表单名称” action=”目标地址” method=”数据提交方式” >
。。。这里写其他具体的一个一个表单标签。。。
。。。还可以出现几乎所有其他各种标签（除了html，body，head等少数几个）。。。
</form>
作用:通过表单控制实现收集用户信息
使用场景:注册页面,登录页面
表单域:
- method:设置表单提交方式 get|post
- action : 用来处理表单提交数据信息的一个后台文件
输入框:
<input type = "text">
属性:
- maxlength : 设置当前控件最多能输入多少个字符
- readonly : 设置让当前控件为只读模式(不能输入)(无值属性)
- disabled : 设置当前控件不能输入(无值属性)
- value : 设置当前控件的默认值
- name : 设置当前控件名称
- id : 唯一标识符
密码文本框 :
<input type = "password">
与文本框中的属性一样
隐藏文本框 :
<input type ="hidden" name = "pswd" value="数据">
隐藏文本框在网页上不可见，但其中的数据可用
单选项 :
<input type="radio">
注意: 想要让单选控件实现单选效果,我们需要给控件设置相同的name值
<input type="radio" name="a" >男
<input type="radio" name="a" >女
属性:
- checked : 设置默认选中项 (无值属性)
多选项 :
<input type = "checkbox">
属性:
- checked : 设置默认选中项 (无值属性)
文件域
<input type="file">
提交按钮
<input type="submit" value="提交">
提交表单数据
图片按钮
<input type="image" scg="图片.jpg">
提交表单数据
重置按钮
<input type="reset">
将表单控件中的值恢复到默认值,重置是恢复到刚开始的样子,不是清空
普通按钮
<input type="button" name="" value="按钮">
不能实现提交表单,配合js使用
表单框
<fieldset>
<legend>人员注册信息</legend>
邮箱地址:<input type"txt" value = "请输入地址" name="" id="" readonly disabled maxlength="6">
</fieldset>
下拉列表 , Select，option
这两个标签是联合使用的，用于实现网页上的“列表选项”，通常就是下拉列表。
<select name=”名称” size=”行数”>
<option value=”值1”>文字1<option>
<option value=”值2” selected=”selected” >文字2<option>
。。。更多选项照上述格式写出。。。
</select>
属性:
-
size属性：表示该列表选项展示出的项数（行数），如果为1（默认值），就是下拉列表。
-
select属性：表示该option选项默认被选中。只应该出现在一个option上。
<select name=”名称” size=”行数”> <optgroup label="文字1"> <option value=”值1”>文字2<option> <option value=”值2” selected=”selected” >文字3<option> 。。。更多选项照上述格式写出。。。 </select>
textarea 标签
textarea标签用于实现“多行文本输入框
<textarea name=”名称” cols=”列数” rows=”行数”>这里可以放内容，通常留空</textarea>
button标签
button标签就是“按钮标签”，其作用是在网页上展示一个“按钮”而已。
<button name=”名称” >按钮文字</button>
一般不需要用这个标签，而是直接使用<input type=”button” >来实现更为常见，效果一样。
十一 meta标签(元信息标签)
meta标签用于定义有关网页（文档）的相关信息（不作为网页的内容表现信息）。
meta标签常用的网页（文档）的相关信息如下所示：
-
设定针对搜索引擎的关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> -
设定对页面的描述：
<meta name="description" content="传智播客是一家全国性的IT技能综合培训学校" /> -
设定网页的作者或制作组
<meta name="Author" content="传智播客网页前端技术教研组"> -
设定网页每隔多少秒数自动刷新一次：
<meta http-equiv="refresh" content="5" /> -
设定网页在一定时间后自动跳转到另一个页面：
<Meta http-equiv="Refresh" Content="等待的秒数; url=要跳转到的网页地址">
十二 内嵌框架
就是在这个页面里面 ,显示另一个页面的内容
<iframe src=”要嵌入进来的网页地址” name=”框架名称” width=”宽度” height=”高度” frameborder=”1或0” scrolling=”yes或no”></iframe>
说明：
- iframe是双标签，但标签中通常不放任何内容。
- frameborder：用于设定框架窗口是否显示“边框线”，1表示显示，0表示不显示。
- scrolling：用于设定框架窗口是否显示滚动条（类似浏览器的滚动条）。
特殊字符
4015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
