首页 > > 网页制作 > css >

HTML

2018-09-10 01:12:51来源：博客园阅读 ()

1. HTML是什么
超文本标记语言最基础的网页语言 W3C
HTML不是一门编程语言而是一门标记语言
HTML是用标记(标签/元素)来描述网页内容的
HTML是文档的一种

2. HTML的结构
<!DOCTYPE HTML>
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
<!DOCTYPE HTML>用来指定当前页面所遵循的html的版本,不写默认是html5.0
<HEAD>头部分用来存放html页面的基本属性信息,优先被加载
<title></title>指定网页的标题
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用来指定浏览器用什么编码解析当前页面
<BODY>体部分用来存放页面数据,是可见的页面内容

3. HTML语法
html标签分为开始标签和结束标签,如果标签内没有修饰的内容, 开始标签和结束标签可以合并为一个自闭标签
如: <br/> <hr/> <meat/>

标签通常都可以具有属性, 属性与属性值用"="连接, 属性的值可以用双引号、单引号引起来或者不用引号, 一般会用双引号引起来



html中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示
如果非要输入空格,可以用转义字符来替代  
如果非要输入换行,可以用 <br/> 来代替
<hr/>分隔符

***转义字符
< <
> >
" "
' '
空格  

1. font标签
用来指定文本的字体/大小/颜色
color:指定字体颜色
值可以指定为颜色名如:red
或十六进制的颜色值如:#000000
或 rgb三原色值如:rgb(255,255,255)

2. 标题标签
指定特定样式字体的一组标签 (掌握)
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
属性:
align:指定文本的排列
left
center
right
justify

3. 列表标签
定义列表
<dl> 包裹定义列表
<dt> 列表的标题项
<dd> 列表的内容项
有序列表
<ol> 开启有序列表
<li> 定义列表中的项
属性：
start:规定列表从第几项开始
type:定义列表数字的格式
1,a,A,i,I
无序列表
<ul> 定义一个无序列表
<li> 定义列表中的项
属性:
type:定义项目符号的类型
disc square circle

4. img标签 -- 图像标签
<img src="图片的路径" alt="代替图像显示的文本"/>
必选属性:
src:图片的路径
alt:代替图像显示的文本
可选属性:
width:宽度 px %
height:高度 px %
border:边框的宽度 px

5. 超链接 -- <a> 锚
用于指向当前位置以外的资源
(1) 用于创建指向另外一个文档的超链接
(2) 用于在当前页面的不同位置之间进行跳转
重要属性:
href: 所指向资源的URL
name: 指定锚的名字（回顶部）
target: 指定浏览器打开目标URL的方式。
_blank：在新窗口中打开目标url
_self ：在当前窗口中打开目标url

6. 表格标签 -- <table>
<table> 定义一个HTML表格
<tr> 定义表格中的行
<td>定义表格中的单元格
<th>定义表格中的表头
table的重要属性:
border 边框宽度
cellspacing 单元格之间的空白
cellpadding 边框与单元格内容之间的距离
bgcolor 背景颜色
bordercolor 边框颜色
width 宽度
align 对齐方式
tr重要属性:
align 对齐方式
bgcolor 背景颜色
th/td重要属性:
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨的列数
rowspan 可竖跨的行数
<caption> 定义表格的标题

7. 表单
(1)浏览器向服务器发送数据的方式, 有两种
a)利用超链接向服务器发送数据 -- 请求参数
在超链接的后面拼接上要发送的请求参数, 链接和请求参数之间用?分割, 参数名和参数值用 = 连接, 多个参数之间用 & 分割, 可以存在多个同名的参数

b)利用表单向服务器发送数据
利用HTML中的<form>标签以及一些表单项标签, 用户可以输入数据, 通过提交表单发送数据给服务器

(2)form标签
必须存在的属性:
action: 指定表单发送的目标URL地址
可选的属性:
method: 指定以何种方式发送表单

**http协议指定了7种提交方式, 其中5种不用, 只用GET提交和POST提交
只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST")才是POST提交，其他提交都是GET提交．
GET提交和POST提交的区别：
主要区别体现在数据传输方式的不相同
a)GET提交: 请求参数会赋在地址栏后进行传输
这种方式发送的数据量有限, 最大不超过1kb(或4kb)
数据显示在地址栏, 安全性差

b)POST提交: 请求参数在底层流中传输
这种方式发送的数据量无限制
地址栏上看不到数据, 比较安全

8. 表单中的项
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它
(1)<input> 输入框
重要属性:
type属性
文本框 text 输入的文本信息直接显示在框中

密码框 password 输入的文本以圆点或者星号的形式显示

单选框 radio 进行单项的选择如性别选择多个radio的name属性相同会被当作一组来使用必须用value为选项指定提交的值

复选框 checkbox 进行多项选择，爱好的选择。多个checkbox具有相同的name属性时会被当作一组来使用必须用value为选项指定提交的值

隐藏字段 hidden 如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中

提交按钮 submit 实现表单提交操作的按钮可以通过value属性指定按钮显示的文字

重置按钮 reset 重置表单到初始状态可以通过value属性指定显示按钮文字（默认为重置）

按钮 button 普通按钮, 没有任何功能需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。

文件上传项 file 提供选择文件进行上传的功能。

图像 image 利用一张图片替代提交按钮的功能, 不常用

name属性
表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它. 另外name属性的值是可以重复的

value属性
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释：value 属性无法与 <input type="file"> 一同使用。

readonly属性
使当前输入项变为只读,不能修改,但是提交时仍会被提交

disabled
使当前输入项不可用,不能修改值,也不会被提交

size属性
指定当前输入框的宽度

checked属性
指定单选框/复选框被选中

(2) <textarea> 文本域
属性:
rows 指定文本域的行数(高度)
cols 指定文本域的列数(宽度)
readonly 只读
disabled 禁用

(3) <select> <option>
select 提供下拉选择功能
重要属性:
name: 下拉列表的名称
size: 设置下拉选项中可见选项的个数
disabled 禁用下拉选框
multiple 是否支持多选
option 下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
selected 默认指定的下拉菜单