1. HTML概述
-
超文本标记语言(超文本:功能更强大;标记语言:由标记显示网页各部分)
-
网页文件是通过添加标记符告知浏览器显示其中内容的文本文件。
-
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程。
-
网页存放在服务器上,运行在浏览器上,运行之前先从服务器上下载到本地,在本地浏览器上解析
2. HTML的基本使用
2.1 HTML的基本结构
html
:根元素,所有其他的元素都应该放在html内;head
:网页头部;body
:网页的主体;<!--注释-->
:注释不可以嵌套
<!--这是一个HTML5-->
<!DOCTYPE html>
<!--根元素,lang表示语言-->
<html lang="zh-CN">
<!--网页头部-->
<head>
<!--保存html页面时使用的码表,以及浏览器解析网页时使用的码表-->
<meta charset="UTF-8">
<title>标题</title>
</head>
<!--网页主体-->
<body body的属性>
啦啦啦啦啦~啦
</body>
</html>
2.2 HTML的标签
2.2.1 HTML标签分类
-
按是否含主体分
- 有主体的标签,即标签含开头和结尾
- 无主体的标签,即在结尾处直接加标签
有主体的意思是标签内部有封装数据
-
按是否换行分
- 块标签:每个标签独占一行,会自动换行
- 内联标签:标签本省不会自动换行,所有内联标签都在同一行。
2.2.2 文本标签
常用标签如下:
常用标签名 | 标签描述 | 常用属性 |
---|---|---|
h1~h6 | 六级不同大小的标题(块标签) | align:标题对齐方式(center居中、right 右对齐、left 左对齐);color:颜色 |
hr | 水平线 | align、width(长度)、size(粗细) |
font(已过时) | 设置字体 | color、size、face(字体)等 |
b | 加粗,与strong标签功能相同 | / |
I | 斜体 | / |
br | 换行,无主体标签 | / |
p | 段落,无首段缩进,段落之间有间距 | title:鼠标指着时显示一些提示信息 |
2.2.3 块标签与内联标签
div
:块标签,分割页面,可用于文档布局;span
:内联标签,可用作文本的容器,以及为部分文本设置样式属性
2.2.4 列表标签
-
有序列表(ol-li)
<ol type = "type属性值"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ol>
其中type可以是1、A、I
-
无序列表(ul-li)
<ul type = "type属性值"> <li>内容1</li> <li>内容2</li> <li>内容3</li> </ul>
其中type可以是disc、circle、square
2.2.5 实体字符
-
使用对应的实体字符,用来显示特殊符号
-
实体字符的格式:以&开头,以分号结尾
常用特殊字符 | 对应的实体字符 |
---|---|
< | < |
> | > |
空格 | |
¥ | ``¥` |
2.2.6 图像标签
-
用来显示图片
-
基本语法
<img src="文件地址"/>
其中,src为图片地址
注意,idea工具浏览html时,如果src使用非该模块的图片时会被禁用访问
除此以外还有其他属性:
**width**:图片宽度; **height**:图片高度; **alt**:图片丢失后替代图片的文字说明; **title**:鼠标指向时显示的提示信息
2.2.7 链接标签
-
作用:跳转页面、锚点链接、激活程序
-
常用属性
href 指定要跳转到的页面地址;
title 鼠标指向后显示的文字;
target
_self
默认值,在当前的窗体中打开页面,_blank
在新的窗体中打开页面;
2.2.7.1 跳转页面
-
基本语法
<a href="链接地址">文字内容</a>
2.2.7.2 锚点链接
-
设置锚点
<a name="锚点名">文字内容</a>
-
跳转到锚点位置
<a name="#锚点名">文字内容</a>
2.2.7.3 激活程序
-
基本语法
<a href="mailto:邮件地址">文字内容</a>
2.2.8 表格标签
-
作用:
- 用于显示大量的数据;
- 可以进行网页布局
-
常用标签名:
标签名 作用 table 表格容器,不可见 tr 表示一行 th 列头,文字加粗和居中 td 普通的单元格,默认是左对齐 caption 表格的标题,出现表格的上面 thead 表格头部,不可见 tbody 表格的主体部分,浏览器解析会自动生成 tfoot 表格的脚步,不可见 -
常用的表格属性
- width:表格宽度
- border:表格的边框粗细
- align:对齐方式
- rowspan:单元跨行
- colspan:单元跨列
- cellspacing:控制单元格间的间隔
- cellpadding:控制单元格边框与内容之间的间隔
对于不规则的列数有两种解决思路
- 使用rowspan colspan 指定某一个单元格占指定的行数或者列数。
- 每一行都是一有一个单元格,单元格再嵌套table标签。
2.2.9 注意事项
width属性如果是写成”width=100%“,意味着该标签的宽度跟随其父标签的宽度
3. HTML表单
3.1 表单标签
-
作用:将浏览器的数据发送给服务器。
-
标签:
<form>
-
可见性:表单标签在网页上不可见,是用来包含其他表单控件的容器。
3.1.1 form常用属性
常用属性 | 作用 |
---|---|
action | 提交给服务器的地址URL |
method | 提交的方式,两种提交方式:GET或POST |
其中:GET与POST在格式上的区别
GET:默认提交方式,提交的数据会在浏览器的地址栏上显示。?
分隔地址栏与参数,参数格式键=值
,多参数用&
分开。提交的数据大小有限制;
POST:提交的数据不会显示在地址栏上,安全性更高。提交的数据没有大小限制。
3.1.2 表单中的控件
-
<input>
元素,包含以下几种常用type类型表单项 控件代码 属性 备注 text,文本框(默认) <input type="text" name="名字">
type:指定控件的类型
name:传递参数的名字
value:文本框中默认值
readonly:只读
disabled:不可用的
placeholder:用于文本框中的提示文字password,密码框 <input type="password">
同上 输入的字符不可见 radio,单选框 <input type="radio" name="gender" value="男" checked="checked">
checked:默认选中一个
value:选中这一项的值名字相同的单选框是同一组(所以必须有name属性),一组中只能选中一个 ckeckbox,复选框 <input type="checkbox" name="hobby" value="摔♂跤" checked="checked">
checked:默认选中一个
value:选中这一项的值需要有name属性分组 hidden,隐藏表单域 <input type="hidden" name="id" value="值">
name:这一项的名字
value:选中这一项的值表单不可见,一般用于一些不需要用户看到的数据 file,文件域 <input type="file" name="photo" accept="image/*">
accept:接收的文件类型 submit,提交按钮 <input type="submit" value="提交">
value:按钮上显示的文字 将个表单提交给服务器 reset,重置按钮 <input type="reset" value="重置">
还原到开始的状态 button,可点击按钮 <input type="button" value="按钮">
或者:看button元素介绍onclick:点击后会执行的内容 主要用于后期程序开发,为该按钮添加具体功能 image,图片按钮 <input type="image" src="图片地址">
与submit功能相同 -
元素
<select>
:下拉列表;<option>
元素:定义待选择的选项;
JoJo dio哒 GioGio 花京院<select name="character"> <option value="JoJo">JoJo</option> <option value="dio哒" selected="selected">dio哒</option> <option value="GioGio">GioGio</option> <option value="花京院">花京院</option> </select>
其中,列表通常会把首选项默认显示,可用selected属性定义预定义选项。
-
元素
<textarea>
:文本域,用于多行输入字段<textarea name="message" row="10",col="30"> 文本字段 </textarea>
其中:row:指定行数;col:指定列数
-
元素
<button>
:可点击按钮,用于后期程序开发,为该按钮添加具体事件<button type = "button" onclick="alert('hello')"> 按钮 </button>
其中:onclick:点击后会执行的内容
-
元素
<datalist>
:为<input>
规定预定义选项列表(HTML5新特性)- 用户会在输入数据时看到预定义选项下拉列表
- 元素
<input>
的list属性必须引用<datalist>
的id属性
<form> <input list ="browsers"> <datalist id = "browsers"></option> <option value = "IE"></option> <option value = "safari"></option> <option value = "chrome"></option> </datalist> </form>
3.1.3 表单的常用属性
-
action
属性:定义在提交表格时执行的动作。(指定表单提交的服务器地址)- 向服务器提交表单通常用submit,且通常会被提交到web服务器上的网页;
- 可以用action属性指定服务器脚本来处理被提交的表单。eg:
<form action ="acttton_page.php">
-
method
属性:规定提交表单时所用的HTTP方法(GET或者POST) -
name
属性:**每个输入的字段必须设置一个name属性才能正确提交。**去除name属性后仍能正常显示,但不能被提交 -
元素
<fieldset>
:组合表单中的数据,可将表单中的内容封装在一起<legend>
作为<fieldset>
定义标题;<fieldset>
使用style
属性可改变整个圈内的文字等属性,而在<legend>
使用style
属性,仅修改<legend>
元素内部的内容
注意事项(重要)
- 每个输入的表单项必须设置一个name属性才能正确提交!
- 提交的是表单中每个表单项的value值!
- 所以分为下面两种情况:
- 表单项可以输入数据时,必须有name属性,但可以没有value属性,此时提交的就是输入的数据;value属性可以设置,那么value的值就是默认值;
- 表单项不可输入数据时(如单选框),必须有value属性,此时提交的就是value属性值;可以没有name属性,不过可根据需求或标签要求增加name属性
- checked属性:选上时checked=“checked”。如果通过其他方法给checked属性赋值,则:true是勾选,false是没勾选
3.1.4 HTML5中新增的type类型
值 | 描述 |
---|---|
color | 定义拾色器 |
date | 定义日期字段(带有calendar 控件) |
datetime-local | 定义日期字段(带有calendar 和time 控件) |
month | 定义日期字段的月(带有calendar 控件) |
week | 定义日期字段的周(带有calendar 控件) |
time | 定义日期字段的时、分、秒(带有time 控件) |
定义用于e-mail 地址的文本字段,如果输入不正确的邮箱地址有验证的功能 | |
number | 定义带有spinner 控件的数字字段 |
range | 定义带有slider 控件的数字字段 |
search | 定义用于搜索的文本字段,当输入内容的时候,搜索框后边会自动出现一个小×,点击这个小×,可以清除输入的内容。 |
tel | 定义用于电话号码的文本字段,在手机上操作会出现输入数字的键盘。 |
url | 定义用于URL 的文本字段,在手机上操作会出现输入网址的键盘。 |