首页 > 代码库 > html的一些基本内容
html的一些基本内容
html基本语法
基本格式
<html>
<head>
<title></title>
<meta />
</head>
<body>
</body>
</html>
编码规范：
- 一个文件有且只有一个根标签。
- 每个标签都是以小写字母的形式存在。
- 标签要进行合理的嵌套
HTML标签
标签是以尖括号”<>”包裹的，在HTML里代表特殊的含义，比如<html>、<head>、<title>等都属于标签。标签是html语言的基础，一个html文件可以说是由无数个标签组成的。
基本注意事项：
（1）有且只能有一个根标签
（2）所有的标签字母都要小写
（3）标签必须要合理嵌套
1.h系列标签
作用：将文字以标题的形式（即加粗加大）显示给用户。
标签: <h1><h1/>、<h2></h2> ... ... <h6></h6>. h1标签的字体最大，颜色最深,h6标签的字体相对最小，颜色相对最浅。
注：
h系列标签的字号，和指定的字号存在一定的比例关系。
2.p标签
段落标签，用来定义段落。
注：
p标签在显示时，上下会存在一定的间距。
3.hr标签
显示一条横线，用法 <hr/>.
这种标签和其它标签不同，不是成对出现的，只有一个结束标识，我们称它为单标签（或者叫自闭合标签），可以直接写标签名，然后加斜杠。
注意，斜杠要加在标签名后面。
4.br标签
用来手动的进行换行，用法和hr标签一样。
5.文本标签
标签
含义
b/strong
加粗
u/ins
下划线
i/em
斜体
s/del
删除线
尽量不要使用buis标签，而使用storng,ins,em和del标签来替代。
6.img标签
img标签用来显示图片。它也是一个自闭合标签
<img src = http://www.mamicode.com/“baidu.png” alt = “哈哈” title = “你好” />
属性含义
src
需要显示的图片所在的路径
alt
如果根据指定路径，没有找到图片，此时的显示文字
title
当光标放到图片上时，出现的介绍文字。
注：title属性是一个全局属性，绝大部分的HTML标签都可以设置title属性。
6.1 路径的介绍
路径分为两种，一个叫相对路径，一个叫绝对路径。
绝对路径指的是相对电脑盘符所在的路径，例如：<img src = http://www.mamicode.com/“C:/Users/Chris/Desktop/新建文件夹\baidu.png.” />
相对路径指的是相对于当前文件所在文件夹的路径，例如：<img src = http://www.mamicode.com/“baidu.png” />. baidu.png图片相对于当前的.html文件在同一个文件夹下，所以可以直接通过文件名的形式找到相应的图片。
一般情况下，我们会使用相对路径，而不使用绝对路径。
相对路径的使用注意事项
./
表示当前路径，可以省略不写
../
表示相对于当前目录的上一级目录
7.a标签
超（级）链接标签，可以实现页面的跳转。
a标签属性
属性名
属性值
href
a标签要跳转到的目的地界面。可以是自己写的一个html界面，也可以是一个互联网界面，还可以是一个空链接（即跳转到自己本界面 #）
target
界面跳转时的样式
_self:表示在当前选项卡中加载目的界面。默认使用self
_blank:表示创建一个新选项卡，在新选项卡中加载目的界面
8.base标签
<base>标签一般放在<head>标签里，<title>标签的下面。
8.1 target属性的使用
<base>标签里的target属性可以给所有的<a>标签指定统一的跳转样式，它也有两个可选值。”_self” 表示在当前界面重新加载目标界面数据；”_blank”表示在新选项卡里加载目标界面数据。
如果在<base>标签和<a>标签里都设置了target属性，在点击对应的<a>标签实现跳转时，会选择<a>标签里的target值。
8.2 href属性的使用
在base标签里设置href属性，表示文档中所用的相对链接的基准链接。即：会在相对链接的前面再添加一段URL路径。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>title</title>
<base href="http://www.baidu.com" />
</head>
<body>
<a href="http://www.mamicode.com/index.html">跳转到百度首页</a>
</body>
9.列表标签
9.1无序列表<ul>
Unordered Lists:显示一段无序的数据。
<ul>
<li>咖啡<li>
<li>牛奶<li>
<li>橙汁<li>
<li>茶<li>
</ul>注意事项：
1.<ul>标签里每个元素是无序的
2.<ul>标签里最好不要放置空内容。
3.<ul>标签里可以直接放入其它标签，但是最好只放<li>标签
4.<li>标签里的元素可以进行合理的嵌套。
9.2有序列表<ol>
Ordered Lists:显示一段有序的列表。
<ol>
<li>咖啡</li>
</ol>一般情况下，使用无序列表比较多，较少使用有序列表。
9.3自定义列表<dl>
<dl>
<dt>饮料</dt><dd>咖啡</dd>
<dd>牛奶</dd>
<dd>橙汁</dd>
<dd>茶
<dl>
<dd>铁观音</dd>
<dd>龙井</dd>
<dd>大红袍</dd>
</dl>
</dd>
</dl>
10.表格标签<table>
以表格的形式显示数据。
标签
作用
特点
<tr>
表示表格里的一行数据
一个<tr>标签里可以有一个或多个<td><th>标签。
<td>
表示一个单元格数据
单元格里的文本默认左对齐
<th>
表头单元格
内部的文本通常会呈现为居中的粗体文本
<caption>
表格的标题
紧跟table标签之后，表格标题会居中放在表格之上
<thead>
表格的表头
很少被使用，但是一旦使用的话，这三个标签都必须要全部使用，出现的顺序是<thead>、<tfoot>、<tbody>.
<tbody>
表格的主体，浏览器在解析时会自动添加
<tfoot>
表格的页脚
11.form表单
表单里能够包含input、menus、textarea、button等元素。
<form>
<intput type=”text” /><button></button>
<textarea></textarea></form>
属性
属性名
值及含义
action
表示form表单向哪个地址提交。
method
get/post 表单的两种提交方式，默认使用get方式提交表单。
12.input标签
规定了用户可以在其中输入数据，一般在<form>标签里使用，用来声明允许用户输入数据。
属性名
取值
含义
type
text
允许用户输入普通文本
password
用户输入的内容将以密文的形式显示
checkbox
多选框，允许用户多选。
radio
单选框，允许用户只选择其中的某一项。
hidden
输入隐藏域
image
定义一张图片作为提交按钮。需要放置在<form>标签里才能实现提交功能。
reset
重置按钮，将所有的数据设置为默认值。需要放置在<form>标签里才能实现重置功能。
submit
提交按钮。需要放置在<form>标签里才能实现提交功能。
button
作为按钮使用。
name
任意文本
给<input>元素设置名称
value
任意文本
设置<input>元素里的显示文本
src
URL路径
指定<input>按钮图片的url. 当type=”image”时使用
checked
checked
指定界面加载时，默认选定的<input>元素。只针对tpye=”checkbox”或者type=”radio”
13.select标签
select 元素可创建单选或多选菜单。<option>标签定义列表中的可选项。
<select >
<option>选项1</option>
<option>选项2</option>
… … … …
</select>
属性名
属性值
含义
multiple
multiple
规定可以选择多个选项
size
number
规定下拉框里可以显示的项目个数
14.option标签
option标签用来定义select标签里的可选项。option标签需要放在select标签的内部，否则这个标签就没有意义。
属性名
属性值
含义
selected
selected
规定可选项为选中状态
15.textarea标签
用来定义一个可以输入多行文字的文本输入框。
属性名
属性值
含义
cols
number
规定文本区内的可见列数。
rows
number
规定文本区内的可见行数。
16.div标签
没有语义。用来定义界面上的一个块级元素，一个div独占一行。
17.span标签
没有语义。用来定义界面上的一个行内元素，大小由span里的内容来决定。
七、HTML结构标签
1.文档类型DOCTYPE
用来声明文档类型。必须要写在<html>标签之上！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在HTML4.0，常用的文档类型声明有三种，分别对应以下三种类型。
文档类型声明
对应的要求
HTML Strict
是一种相对严谨的文档声明，该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素，不允许框架集。
HTML Transitional
是一种相对宽松的文档声明，该DTD包含所有的HTML元素，包括展示性的和弃用的元素，不允许框架集。
HTML Frameset
等同于HTML Transitional，但是它允许框架集。
区别于HTML4有三种文档类型声明，HTML5只有一种文档类型声明，即，
<!DOCTYPE html>
附图为部分元素是否可以出现在对应的文档声明中:
(数据来源: http://www.w3school.com.cn/tags/html_ref_dtd.asp)
1.html标签
用来告诉浏览器其本身是一个HTML文件。<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
属性名
属性值
含义
xmlns
http://www.w3.org/1999/xhtml
用来定义ML的命名空间
xmls:由于xml允许定义自己的标记，但你定义的标记名和其他人定义的标记名有可能相同，但却表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生，xml采用名字空间声明，允许你通过一个网址来识别你的标记。
2.head标签
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
3.1 title标签
用来定义文档的标题。即，当HTML文件在浏览器里打开时，浏览器选项卡上显示的内容。
3.2 meta标签
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<head>
<meta charset=”UTF-8” /> <!-- 用来告诉浏览器文件的编码格式 -->
<meta name=”keywords” content=”” />
<meat name=”description” content=”” /></head>
4.body标签
用来定义文档的主体。body标签包含文档的所有内容。
5.标签的嵌套
html语言允许对标签进行嵌套，但是有两个需要注意的事项：
1.有且只能有一个<html>根标签
2.标签必须要进行合理的嵌套。
<!--下面这段代码进行了合理的嵌套 -->
<head>
<title>我是title,嵌套在head标签里</title>
</head>
<!-- title标签可以称作是head标签的子元素(节点、标签) -->下面这段代码的标签，未进行合理的嵌套。
<head>
<title>我是title,嵌套在head标签里
</head>
<title/>
<!-- title标签在head标签里开始，但是却在head标签外结束，嵌套不合理 -->八、特殊字符
结果
实体名称
实体编号
空格
>
>
>
<
<
<
&
&
&
?
?
?
数据来源：http://www.w3school.com.cn/tags/html_ref_entities.html
html的一些基本内容