本文介绍了HTML的基础知识，包括HTML的定义、与浏览器的关系、书写规范、基本结构及各种标签的使用方法，适合初学者入门。
Html介绍
1. 什么是html？
全称：HyperText MarkupLanguage
译名：超文本标记语言
Html是用来描述网页的一种标记语言。
2. Html和浏览器的关系
Web浏览器的作用是读取html文档，并以网页的形式显示它们。浏览器不会显示html中的标签，而是使用标签来解释页面上的内容。简单点说，浏览器是html的解释器，解释html文件，然后再浏览器窗口中展示解析后的页面。
3. Html书写规范
1) HTML标记标签通常被称为HTML标签（HTML tag）。
2) HTML标签是由尖括号包围的关键词，例如<html>
3) HTML标签通常是成对出现的，例如<html> </html>
4) 成对出现的标签中第一个是开始标签，第二个是结束标签
5) 绝大多数的标签都具有属性，属性值一般用引号引起。例如<body text=”red”>
6) 大多数标签是可以嵌套的
7) HTML标签对大小写不敏感：<P>等同于<p>。（推荐使用小写标签，因为万维网联盟（W3C）在HTML4中推荐小写。）
4. HTML的创建
Html文件可以直接使用文本编辑器来创建，保存时，后缀名为html或htm。
HTML文件的基本架构
|
<html> <head> <title>网页的标题</title> </head> <body> 网页的内容，很多标签都作用在这里 </body> </html> |
5. 文件标签
1） html标签
整份文件处于标签<html>与</html>之间。
<html>用于声明这是html文件，让浏览器认出并正确处理此html文件。
html文件分文两部分，由<head>至</head>称为开头，<body>至</body>称为本文。
2） head标签
<head>用来加载一些重要的资讯，它的内容不会被显示，只有<body>的内容才会显示
3） title标签
<title>只能出现在<head>中，它代表的是标题。
4） body标签
<body>中的内容会被显示。
常用属性：
|
text |
用于设定文字颜色 |
|
backgroung |
用于设定背景图片 |
|
bgcolor |
用于设定背景颜色 |
html中颜色取值有三种方式：
1. rgb(0,0,0)值在0 – 255之间
2. #000000 – #ffffff
3. 颜色单词：red blue green等
|
<html> <head> <title>my first page</title> </head> <body text="red" bgcolor="black"> my first html page! </body> </html> |
6. 排版标签
1. 注释
在html中注释的写法：<!--注释的内容-->
2. p标签
<p>标签是段落标签。作用：为字、画、表格等之间留一空白行。
<p>标签本来成对使用，标于段落的头尾，但从html2.0开始已不需要</p>做结尾。
常用属性
|
align |
用于设定对齐方式，可选值 left right center默认值是left |
3. br标签
br标签是换行标签。作用：令字、画、表格等显示于下一行。浏览器会自动忽略空白与换行，因此<br>标签称为我们最常用的标签。
4. hr标签
<hr>标签会生成一条水平线。
常用属性
|
align |
设置水平对齐方式可选值left right center |
|
size |
设置水平厚度以像素为单位。默认为2 |
|
width |
设置水平线长度，可以是绝对值或相对值。默认为100% |
|
color |
设置水平线的颜色，默认为黑色。 |
5. 关于html中数值单位
html中的数值默认单位为像素（px）
在有些位置可以使用百分比来设置
例如：
<hrsize=”3”>这个就代表水平线厚度为3px
<hrwidth=”30%”>这个就代表水平线长度为总长度的30%
7. 块标签
1. div标签
用于在文档中设定一个块区域。
2. span标签
用于在行内设定一个块区域。
html中绝大多数元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始。例如div p等。
内联元素在浏览器显示时，通常不会以新行来开始。例如 span
8. 字体标签
1. font标签
<font>标签用来规定文本的字体，大小，颜色。
常用属性：
|
face |
规定文本的字体 |
|
size |
规定文本的大小 |
|
color |
规定稳定的颜色 |
2. h1 – h6标签
<h1> –<h6> 标签用来定义标题
<h1> 最大标题
<h6> 最小标题
9. 清单标签
1. ul标签
<ul>标签表示的是一个无序清单
常用属性
|
type |
规定清单的项目符号类型，可选值disc，square，circle。默认值为disc |
2. li标签
<li>标签表示的是一个清单项。<lu>创建清单，<li>表示清单中的每一项。
常用属性
|
type |
只是用<ul>，用于设定项目符号，默认值为disc |
|
value |
只是用<ol>，用于设定列表的项目数字 |
3. ol标签
<ol>标签表示的是一个有序清单。
常用属性
|
type |
规定清单中使用的标记类型。可选值1 A a I i |
|
start |
规定列表是的起始值 |
10. 图形标签
1. img
<img>是一个图形标签，用于在页面上引入图片。
常用属性
|
scr |
用于设定要引入的图片的url |
|
alt |
用于设定图片代替文字 |
|
width |
用于设定图片的宽度 |
|
height |
用于设定图片的高度 |
|
border |
用于设定图片边框厚度 |
|
align |
用于设定图片的文字对齐方式 |
11. 链接标签
1. a标签
<a>标签用于定义超链接，用于从一个页面跳转到另一个页面
常用属性
|
href |
用于设定链接指向页面的url |
|
name |
用于设定锚的名称 |
|
target |
用于设定在何处打开链接页面 |
12. 表格标签
1. table标签
<table>标签用于定义表格
常用属性
|
align |
用于设定表格的对齐方式 |
|
bgcolor |
用于设定表格的背景颜色 |
|
border |
用于设定表格变框的宽度 |
|
width |
用于设定表格的宽度 |
2. tr标签
<tr>标签用于定于表格的行。
常用属性
|
align |
用于设定表格中行的内容对齐方式 |
|
bgcolor |
用于设定表格中行的背景颜色 |
3. td标签
<td>标签用于定义表格单元，该标签中的文本一般显示为正常字体且左对齐。
常用属性
|
algin |
用于设定单元格内容的对齐方式 |
|
bgcolor |
用于设定单元格背景颜色 |
|
height |
用于设定单元格的高度 |
|
width |
用于设定单元格的宽度 |
|
colspan |
用于设定列合并 |
|
rowspan |
用于设定行合并 |
4. caption标签
<caption>用于定义表格标题,该标签必须紧跟随<table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。
13. 表单标签(重要)
1. form标签
<form>标签代表一个表单，表单用于项服务器传输数据。
<form>标签能够包含<input>，可以是文本字段，复选框，单选框或是提交按钮等。
常用属性
|
name |
用于定义表单的名字 |
|
action |
用于规定提交表单时向何处发送表单数据 |
|
method |
用于规定表单的提交方式。一般取值POST或GET |
POST和GET的区别
1. get方式只能提交少量数据，而post可以提交大量数据。
2. get方式提交时，数据会在地址栏上显示，安全性差。post方式提交不会在地址栏上显示数据。
2. input标签
<input>标签用于手机用户信息，根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段，复选框，单选框，掩码后的文本框，按钮等。<input type=”text”name=”work” value=”username”>
|
input取值 |
取值后属性 |
作用 |
|
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20个字符。 |
name |
定义标签名 |
|
value |
定义标签值 | |
|
size |
定义输入字段的长度 | |
|
maxlength |
定义可输入最大字符个数 | |
|
password 定义密码字段。该字段中的字符被掩码. |
name |
定义标签名 |
|
value |
定义标签值 | |
|
size |
定义输入字段的长度 | |
|
maxlength |
定义可输入最大字符个数 | |
|
radio 定义单选按钮。 |
name |
定义标签名 |
|
value |
定义标签值 | |
|
checked |
定义该标签默认被选中 | |
|
checkbox 定义复 选框。 |
name |
定义标签名称，一组的checkbox应该一样 |
|
value |
定义标签值 | |
|
checked |
定义该标签默认被选中 | |
|
button 定义可点击按钮（多数情况下，用于通过 JavaScript启动脚本） |
name |
定义标签名 |
|
value |
按钮显示名称 | |
|
hidden 定义隐藏的输入字段。 |
name |
定义标签名 |
|
value |
定义标签值 | |
|
file 定义输入字段和 "浏览"按钮，供文件上传。 |
name |
定义标签名 |
|
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
name |
定义标签名 |
|
value |
定义标签值 | |
|
reset 定义重置按钮。重置按钮会清除表单中的所有数据。 |
name |
定义标签名 |
|
value |
按钮显示名称 | |
|
image 定义图像形式的提交按钮。 |
name |
定义标签名 |
|
src |
定义作为提交按钮显示的图像的url | |
|
alt |
定义作用图像的替代文本 |
3. select与option标签
<select>标签用于定义一个下拉列表
常用属性
|
name |
定义下拉列表的名称 |
|
size |
定义下拉列表中可见选项的数目 |
|
multiple |
定义可选择多个选项 |
<option>标签用于定义下拉列表中的选项<option>需要位于<select>标签内部
常用属性
|
value |
定义往服务器发送的选项值 |
|
selected |
定义选项为被选中的状态 |
4. textarea标签
<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)
常用属性
|
name |
定义多行文本框名称 |
|
cols |
定义多行文本框可见宽度 |
|
rows |
定义多行文本框可见行数 |
|
wrap |
规定多行文本框中文字如何换行 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
