HTML

标签
块和内联
- 块
- 内联
表格
表单
框架集

使用img标签来向网页中引入一个外部图片，img标签也是一个自结束标签
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述，搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width：可以用来修改图片的宽度,一般使用px作为单位
- height：可以用来修改图片的高度，一般使用px作为单位
宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小
JPEG(JPG)：JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
GIF：支持的颜色少，只支持简单的透明，支持动态图
PNG：支持的颜色多，并且支持复杂的透明

meta标签

<!-- 
			使用meta标签还可以用来设置网页的关键字
		-->
		<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
		
		<!-- 
			还可以用来指定网页的描述
			搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名
		-->
		<meta name="description" content="发布h5、js等前端相关的信息" />
		
		
		<!-- 
			使用meta可以用来做请求的重定向
			<meta http-equiv="refresh" content="秒数;url=目标路径" />
		-->
		<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />

iframe标签

使用iframe来创建一个内联框架，使用内联框架可以引入一个外部的页面
src ：指向一个外部页面的路径，可以使用相对路径
width：
height：
name ：可以为内联框架指定一个name属性

超链接a标签

使用a标签来创建一个超链接
使用超链接可以让我们从一个页面跳转到另一个页面
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
target：可以用来指定打开链接的位置。_self，表示在当前窗口中打开（默认值）。_blank，在新的窗口中打开链接。可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开

<a href="demo03.html" target="tom">我是一个超链接</a>
<br /> <br />
<iframe src="demo02.html" name="tom"></iframe>

跳转到id为bottom的元素所在的位置，直接在href中写 #id属性值
如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部

<a href="#bottom">去底部</a>
<a id="bottom" href="#">回到顶部</a>

发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端href=”mailto:邮件地址”

<a href="mailto:abc@atguigu.com">联系我们</a>

center标签

center标签中的内容，会默认在页面中居中显示
我们可以将要居中的元素，全都放到center中

文本标签

em和strong：这两个标签都表示一个强调的内容，em主要表示语气上的强调,em在浏览器中默认使用斜体显示，strong表示强调的内容，比em更强烈，默认使用粗体显示

<p>
	今天天气<em>真不错</em>！
</p>
<p>
	<strong>
		注意：如果你不认真上课，你就找不到好工作！
	</strong>
</p>

i标签中的内容会以斜体显示

b标签中的内容会以加粗显示
small标签中的内容会比他的父元素中的文字要小一些,比如：合同中小字，网站的版权声明都可以放到small
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，比如：书名歌名话剧名电影名。。。
q标签表示一个短的引用（行内引用）,q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
使用sup标签来设置一个上标,sub标签用来表示一个下标

<p>2<sup>2</sup></p>
<p>赵薇<sup><a href="#">[1]</a></sup></p>

<p>H<sub>2</sub>O</p>

使用del标签来表示一个删除的内容,del标签中的内容，会自动添加删除线

<p>
    <del>17.75</del> <br />
    15.54 <br />
</p>

ins表示一个插入的内容,ins中的的内容，会自动添加下划线

<p>
	我们的老师真<ins>好啊</ins>！
</p>

pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格

code专门用来表示代码

我们一般结合使用pre和code来表示一段代码

<pre>
    <code>
        window.onload = function(){
        	alert("Hello World");
        };
    </code>
</pre>

列表标签

无序列表

使用ul标签来创建一个无序列表

使用li在ul中创建一个一个的列表项，一个li就是一个列表项

通过type属性可以修改无序列表的项目符号：disc，默认值，实心的圆点；square，实心的方块；circle，空心的圆
有序列表

使用ol标签来创建一个无序列表

type属性，可以指定序号的类型：1，默认值，使用阿拉伯数字；a/A 采用小写或大写字母作为序号；i/I 采用小写或大写的罗马数字作为序号
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表
去掉项目符号：设置css格式：ul {list-style: none;}
使用dl来创建一个定义列表

dt ：被定义的内容

dd ：对定义内容的描述

块和内联

块

所谓的块元素就是会独占一行的的元素,无论他的内容有多少他都会独占一整行。
div，p， h1， h2， h3
p元素不可以包含任何块元素
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来对页面进行布局的

内联

所谓的行内元素（内联元素），指的是只占自身大小的元素，不会占用一行
常见的内联元素：a， img， iframe， span
a元素可以包含任意元素，除了他本身
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式

表格

在HTML中，使用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
rowspan用来设置纵向的合并单元格
colspan横向的合并单元格
table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-collapse可以用来设置表格的边框合并，如果设置了边框合并，则border-spacing自动失效
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部

thead 表头：thead中的内容，永远会显示在表格的头部

tbody 表格主体：tbody中的内容，永远都会显示表格的中间

tfoot 表格底部：tfoot中的内容，永远都会显示表格的底部

这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中

需要通过tbody > tr 选中行

表单

使用form标签创建一个表单，form标签中必须指定一个action属性，该属性指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址

输入框

使用input来创建一个文本框，它的type属性是text，如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
使用input创建一个密码框，它的type属性值是password

按钮

使用input来创建一个单选按钮，它的type属性使用radio，单选按钮通过name属性进行分组，name属性相同是一组按钮
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked=”checked”属性
使用input创建一个多选框，它的type属性使用checkbox
使用select来创建一个下拉列表，下拉列表的name属性需要指定给select，而value属性需要指定给option，可以通过在option中添加selected=”selected”来将选项设置为默认选中，当为select添加一个multiple=”multiple”，则下拉列表变为一个多选的下拉列表

文本域

使用textarea创建一个文本域

提交与重置

使用input创建一个提交按钮,它的type属性值是submit，在提交按钮中可以通过value属性来指定按钮上的文字
使用input创建一个提交按钮,它的type属性值是reset，可以创建一个重置按钮，点击重置按钮以后表单中内容将会恢复为默认值

框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中，所以要使用框架集，页面中就不可以使用body标签
rows，指定框架集中的所有的框架，一行一行的排列

cols，指定框架集中的所有的页面，一列一列的排列

这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小

frameset中也可以再嵌套frameset
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索
建议使用frameset而不使用iframe

HTML

标签

标题标签

段落标签

换行

水平线

转义字符串

图片标签

meta标签

iframe标签

超链接a标签

center标签

文本标签

列表标签

块和内联

块

内联

表格

表单

输入框

按钮

文本域

提交与重置

框架集

Comments