HTML
1.什么是HTML?
- HTML(Hyper Text Markup Language 超文本标记(标签)语言)
- 本质是文本
2.HTML语法组成结构
第一步:HTML声明
第二步:HTML组成内容
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>这是第一个页面</title>
头标签:存储需要加载资源,比如配置文件等等
</HEAD>
<BODY>
体标签:存储页面组成内容
<BODY>
</HTML>
注意:
1.标签是由起始标签和结束标签来组成—< html>< /html>
2.如果标签里没有内容可以使用自闭标签来表示—< br/>
3.不区分大小写
4.当页面中出现多个空格、制表符空格以及换行在页面展示中都是一个空格
5.转义字符
空格 |   |
---|---|
" | " ; |
’ | &apos ; |
& | & ; |
< | < ; |
> | > ; |
6.标签身上可以通过 属性名="属性值"这种形式来给标签设置属性,在页面当中可以展示标签特点
属性值的双引号和单引号都可以设置属性
3.HTML常用标签
1) 字体标签
< font>< /font>
属性
Color:字体颜色
Size:字体大小
<!--给定颜色属性的属性值(三种方式:1.颜色名称、2.十六进制值、3.三原色值)-->
<font color="red" size=5>我是一个字体标签</font>
2)标题标签
< h1>< /h1> ~ < h6>< /h6>
属性:
align:对齐方式
left:左对齐
right:右对齐
center:居中
justify:自适应
<h1 align="left">一级标题</h1>
<h2 align="right">二级标题</h2>
<h3 align="center">三级标题</h3>
<h4 align="justify">四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3)列表标签
< ul>定义一个列表,< li>定义列表的每一项
无序列表:
< ul>
< li>< /li>
~
< li>< /li>
< /ul>
属性:
type:定义图标形式(disc:实心圆、square:实心正方形、circle:空心圆)
<ul type="square">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
有序列表:
<ol>
<li></li>
</ol>
4)图片标签
< img src="" alt="" />
属性
src:图片的路径
绝对路径:以盘符开始的路径
相对路径:以当前文件所在目录为起点的路径,…/表示上级目录,./表示当前目录
alt:图片无法显示时的代替文本
width:图片的宽度
height:图片的高度(加px表示图片大小,加%表示屏占比)
<img src="image/1.jpg" alt="这是一个帅哥" width="200px" height="200px"/>
5)超链接标签
< a>
- 跳转到其他页面
属性
href:跳转目标地址
target:打开目标页面的方式(_self:在当前页面打开、_target:在新页面打开 - 在当前页面跳转
第一步设置隐藏的书签< a name=“tag”/>,可以在a标签里给定name属性以及id属性
第二步给绑定超链接来跳转到设置书签< a href="#tag">返回顶部< /a>
注意:当href属性给定的属性值是# 后面跟上属性值就是在当前页面进行跳转
6)表格标签< table>
< table>:定义一个表格
< tr>:表格中的行标签
< td>:行中单元格标签
< th>:行中的标题单元格
table的重要属性:
border 边框宽度
cellspacing 单元格之间的空白距离
cellpadding 边框与单元格内容之间的距离
bgcolor 背景颜色
bordercolor 边框颜色
width 宽度
align 对齐方式
○ table的重要属性:
align 对齐方式
bgcolor 背景颜色
○ tr重要属性:
align 对齐方式
bgcolor 背景颜色
width 宽度
height 高度
colspan 可横跨的列数
rowspan 可竖跨的行数
○ th/td重要属性:
<caption> 定义表格的标题
7)表单标签
提交数据到服务器的方式有两种
a.超链接形式:在地址栏中来拼接参数值发送给服务器。缺点:如果要发送的数据复杂且量多,那么在拼接的时候会导致拼接效率降低,以及和服务器进行交互的效率也会降低。
b.form表单形式:把要发送给服务器的参数值放到表单里通过表单进行集中的拼接,发送给服务器,效率比较高。
-
< form>< /form>只是单独使用form表单标签没有效果需要使用input子标签来输入参数值
-
< form action=“指定数据发送的地址” method=“提交方式”>
提交方式一共有七种,常用的有get和post(默认提交方式是get) -
GET提交和POST提交的区别:
主要区别体现在数据传输方式的不相同
GET提交: 在地址栏拼接参数值 不安全 地址栏拼接参数值大小一般不要大于1KB POST提交: 在底层提交数据 相对安全 底层根据流来传输数据,不限制传输大小
-
表单中的项
表单中可以有多个输入项,输入项必须有name属性才可以被提交,如果输入项没有name属性,则表单在提交时会忽略它
< input> 输入框
重要属性:
type属性
文本框text:输入的文本信息直接显示在框中
密码框password:输入的文本以圆点或者星号的形式显示
单选框 radio:进行单项的选择 如性别选择 多个radio的name属性相同会被当作一组来使用必须用value为选项指定提交的值
复选框checkbox:进行多项选择,爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用 必须用value为选项指定提交的值
隐藏字段hidden:如果有一些信息,不希望用户看见,又希望表单能够提交,就可以用隐藏字段隐含在表单中
提交按钮submit:实现表单提交操作的按钮 可以通过value属性指定按钮显示的文字
重置按钮reset:重置表单到初始状态
按钮button:普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。
文件上传项file:提供选择文件进行上传的功能。
图像image:利用一张图片替代提交按钮的功能, 不常用
name属性:有name属性的input框才能被提交到服务器
value属性:可以给input输入框设置一个初始值
<textarea>文本域
rows:指定文本域的行数(高度)
cols:指定文本域的列数(宽度)
readonly属性:只读
disabled属性:不可用
8)下拉框
在页面展示一个可以有多个选项来进行选择
属性
select:提供下拉选择功能
option:下拉选框中的选项可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
name: 下拉列表的名称
disabled 禁用下拉选框
size: 设置下拉选项中可见选项的个数
multiple 是否支持多选