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 | 规定多行文本框中文字如何换行 |