HTML的使用
文件标签
<html>
标签: 代表当前书写的是一个HTML文档
<head>
标签:存储的本页面的一些重要的信息,它不会显示
<head>
标签:有一个子标签<title>
它是用于定义页面的标题的
<body>
标签:书写的内容会显示出来
<body>
标签的属性
- text 用于设置文字颜色
- bgcolor 用于设置页面的背景色
- background 用于设置页面的背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第一个网页</title>
</head>
<body text="red" bgcolor="pink">
我的第一个网页
</body>
</html>
排版标签
HTML注释
<!-- 我是注释,不会显示 -->
换行标签
<br/>
标签就是一个换行(回车)功能标签,标签中的 / 可有可无的。
有/是html语言的标准化,但是html语言是一门不那么严谨的语言
<body text="red" bgcolor="pink">
我的第一个网页<br/>
今天中午吃什么
</body>
段落标签
在<p>
标签中的内容,会在开始与结束之间产生一个空白行,并且它会自动换行.
常用属性 align 它的作用是设置段落中的内容对齐方式 可取值有 left right center
<p>第一段内容</p>
<p>第二段内容</p>
<p align="left">第三段内容</p>
<p align="center">第四段内容</p>
<p align="right">第五段内容</p>
水平线标签
<hr>
标签会在页面上产生一个水平线
对于hr标签它有常用属性:
- align:可取值有left right center 代表水平线位置
- size:代表水平线厚度(粗细)
- width:代表水平线宽度
- color:水平线的颜色
单位:size=“5”,5是默认的单位,为"像素"/“像素点”,像素就是构成计算机图片的最小单位!
也可以使用百分比,size=“50%”
水
<hr align="left" size="5" color="red">
平
<hr align="right" size="10" color="blue">
线
分区标签
div是一个块标签,用来进行布局的
普通的div并没有什么效果,肉眼也看不见,但div与CSS结合,就会更好对页面进行排版
div与span都是“容器”的作用,具体区别:
- div会自动换行,我们也叫这样的标签为块级元素
- span标签它不会自动换行,我们也叫它为行内元素
- div:整体划分区块
- span:局部划分
<div>1</div>
<div style="width:100px; height:100px; background:pink">2</div>
字体标签
字体标签
<font>
标签可以设置字体,字的大小及颜色,常用属性:
- face:用于设置字体,例如 宋体 隶书 楷体
- size:用于设置字的大小(大小默认设置1-7,7最大,想更大,往后学css即可)
- color:用于设置字的颜色
<font face="隶书" size="7" color="#abc">我爱中国</font>
- 注:
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。
每一种颜色的饱和度和透明度都是可以变化的,用0~255的数值来表示。如纯红色表示为(255,0, 0),十六进制表示为#FF0000。
按这种表达方式,理论上我们可以得到256 * 256 * 256 = 16777216种颜色。
- 使用十六进制方式,取值范围 #000000 ~ #FFFFFF (黑色到白色)。当颜色值为#cc3300 时,可
简化成 #c30 这种方式
<body bgcolor="#666">
- RGB颜色表示法:RGB(x,y,z)。x、y、z是0 ~ 255之间的整数。rgb字母大小写无所谓
<body bgcolor="rgb(11,11,11)">
标题标记
<h1>
----- <h6>
h1最大 h6最小,它们代表的是标题,
自动换行,字体加粗,标题与标题之间产生一定的距离
注意:在HTML中允许标签进行嵌套的,但是一般都包裹嵌套,而不可以进行交叉嵌套
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
格式化标签
<b>
:字体加粗<i>
:字体倾斜<del>
:删除线- <
u>
:下划线
<b>字体加粗</b>
<i>字体倾斜</i>
<del>删除线</del>
<u>下划线</u>
列表标签
- ol:有序列表
type=‘A’:字母排序
type=‘I’:罗马排序
start=“3” 序列从几开始 - ul:无序列表
type=“disc”:默认,实心圆
type=“square”:方块
type=“circle”:空心圆
<ol type="A">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<ul type="circle">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
图像标签
<img>
它可以让我们在网页引入一张图片,常用属性:
属性 | 说明 |
---|---|
src | 代表的图片的路径 |
width | 图片的宽度 |
height | 图片的高度 |
border | 用于设置图片的边框 |
alt | 如果图片不可以显示时,默认显示的文本信息 |
title | 鼠标悬停图片上,默认显示的文本信息 |
align | 图片附件文字的对齐方式,可取值有left:把图像对齐到左边;right:把图像对齐到右边;middle:把图像与中央对;top:把图像与顶部对齐;bottom:把图像与底部对齐(默认) |
<img
src="img/初音未来.jpg"
alt="图片加载失败"
title="初音未来"
width="50%"
height="50%"
border="1"
align="middle">
超连接标签
<a>
标签,可以实现跳转到其它页面操作.
超链接内容不仅可以是文本,也可以是图片等信息
属性 | 说明 |
---|---|
href | 代表的我们要跳转的路径 |
target | 这个属性规定在何处打开这个链接文档,可取值:_ blank 在新窗口中打开页面;_ self 默认。在本窗口打开页面 |
<a href="http://baidu.com" target="_blank">百度</a>
注意:href中必须加上协议。如http
功能性链接:
1.发邮件
<a href="mailto:sunguoan@163.com">联系站长</a>
2.QQ聊天窗口
<a href="tencent://message/?uin=19998539&Menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
</a>
表格
<table>
:定义一个表格
属性 | 说明 |
---|---|
border | 边框,取值是像素为单位 |
width | 代表的表格的宽度 |
align | 代表表格的对齐方式;left 左对齐表格;right 右对齐表格;center 居中对齐表格 |
cellspacing | 单元格间距(通常设置0表示单线表格) |
<tr>
:表格中的行 (Table Row)
align 代表表格的对齐方式;取值
left 左对齐内容(默认值)
right 右对齐内容
center 居中对齐内容(th 元素的默认值)<td>
:表格中的数据单元格 (Table DataCell)
colspan 指示列的合并
rowspan 指示行的合并
<table border="1" width="400px" align="center" cellspacing="0">
<tr align="center">
<td colspan="3">计划统计表</td>
</tr>
<tr>
<td rowspan="3">收入金额</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
表单标签
<form
>表单可以让我们将录入信息携带到服务器端。- 简单说,通过表单可以将要提交的数据提交到指定的位置。
- 但一个一个的提交,不方便。表单正好解决了这个问题,将所有的数据形成一个整体,一起提交给服务器。
- 常见的 登录页面、注册页面 都离不开表单的应用
form属性
属性 | 说明 |
---|---|
action | 整个表单提交的目的地 |
method | 表单提交的方式;get、post |
get:提交时,传输数据量少(传递普通文字信息,传递照片会失败),明文提交(在浏览器的url后面会显示提交的数据,不适合用于登录)
post:提交时,传输数据量大(传递文字和图片都行),密文提交(浏览器的url后面看不到提交的数据)
表单中的元素(控件)
<input>
元素的type属性
属性 | 说明 |
---|---|
text | 默认值,普通的文本输入框;placeholder属性:提示文本;maxlength属性:最多能输入字符数量 |
password | 密码输入框 |
checkbox | 多选框/复选框;checked被选中 |
radio | 单选按钮 |
file | 上传文件 |
reset | 重置按钮 |
submit | 提交按钮 |
button | 普通按钮 |
<select>
:下拉列表/下拉框<option>
:列表中的项;selected:被选中<textarea>
:文本域(多行文本框)
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的height和 width 属性。<button>
:按钮
在form表单中,作用和submit一样
不在form表单中,就是普通按钮(配合后期的javascript,可扩展性更高)
<form action="baidu" method="GET">
<p>帐号:<input name="a" type="text" placeholder="请输入帐号..." maxlength="5" ></p>
<p>密码:<input name="b" type="password"></p>
<p>爱好:
<input name="hobby" type="checkbox"> 抽烟
<input name="hobby" type="checkbox" checked="checked"> 喝酒
<input name="hobby" type="checkbox"> 烫头
<input name="hobby" type="checkbox"> 泡澡
</p>
<p>性别:
<input type="radio" name="sex"> 男
<input type="radio" name="sex" checked="checked"> 女
</p>
<p>身份:
<input type="radio" name="role"> ceo
<input type="radio" name="role"> cto
<input type="radio" name="role"> coo
<input type="radio" name="role" checked="checked"> ufo
</p>
<p>头像: <input type="file"> </p>
<p>血型:
<select>
<option>A型</option>
<option>B型</option>
<option>C型</option>
<option selected="selected">O型</option>
</select>
</p>
<p>个人简介: <textarea cols="10" rows="5"></textarea> </p>
<p>
<input type="reset" value="清空">
<input type="submit" value="提交">
<input type="button" value="取消">
<button>保存</button>
</p>
</form>
<button>测试</button>
注意事项:
- 所有表单中的元素都要具有名称(否则提交到服务器之后,服务器无法区识别多个元素之间的不同)
- 单选框要想可以一次只选择一个,要具有相同的name值
- 所有的复选框以组为单位,组内的每个复选框都应该具有相同的name值
框架标签
通过<frameset>
和<frame>
框架标签可以定制HTML页面布局。可以理解为:用多个页面拼装成一个页面。
注意,框架标签和body标签不共存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<frameset rows="10%,*,13%">
<frame src="top.html"></frame>
<frameset cols="15%,*">
<frame src="left.html"></frame>
<frame src="right.html"></frame>
</frameset>
<frame src="foot.html"></frame>
</frameset>
</html>
top.html、left.html、right.html、foot.html 四个页面内容一样,稍微改下文字而已,以top.html为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1>顶部导航区域</h1>
</body>
</html>
其它标签与特殊字符
<meta>
标签
<meta>
标签必须写在<head>
标签之间.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
- 当前页面的字符编码 UTF-8
- 这里 的 名字 是 viewport (显示窗口)
数据 是 文本 内容 content=“width=device-width, initial-scale=1.0”
也就是 显示窗口 宽度 是 客户端的 屏幕 宽度 (就是 满屏 !),显示的文字和图形的初始比例 是
1.0 - 每个电脑内置的IE版本是不一样的,为了兼容所有的版本以最高级模式渲染文档,也就是任何IE版
本都以当前版本所支持的最高级标准模式渲染
通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面
<meta http-equiv="refresh" content="5; url=http://www.baidu.com">
注意:在html中如果跳转的互联网上的网站资源,那么我们在书写路径时,一定要带协议的路径。
<link>
标签
导入css
注意:link标签也必须写在<head>
标签中
特殊字符
HTML5新特性
HTML4与HTML5的区别
H5包含h4
- 大小写不敏感
<inPUT tYPe="pasSWord"/>
- 引号可省略
<input type="password">
<input type=password>
- 省略了结尾标签
<p>哈哈哈哈哈哈哈
<p>哈哈哈哈哈哈哈
说是省略,其实运行起来,查看源代码,html是自动帮我们补全了
新增语义化标签
html4中,所有的容器标签95%都会使用div,div过多的话,很难区分彼此
新增许多语义化标签,让div“见名知意”
- section标签:表示页面中的内容区域,部分,页面的主体部分
- article标签:文章
- aside标签:文章内容之外的,标题
- header标签:头部,页眉,页面的顶部
- hgroup标签:内容与标题的组合
- nav标签:导航
- figure标签:图文并茂
- foot:页脚,页面的底部
媒体标签
想在网页上播放视频,就要使用<video>
属性 | 说明 |
---|---|
src | 媒体资源文件的位置 |
controls | 控制面板 |
autoplay | 自动播放(谷歌失效,360浏览器可以) |
loop | 循环播放 |
<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>
新增表单控件
- <
input>
color:调色板
date:日历
month:月历
week:周历
number:数值域;min:最小值(默认值是1);max:最大值(默认值无上限);step:递增量
range:滑块
search:搜索框(带×号,可一键删除框中内容) - 进度条
<progress/>
- 高亮
<mark>
- 联想输入框
<datalist>
选项<option>
<body>
<h2>H5 <mark>新增</mark>的表单元素</h2>
<input list="citys">
<datalist id="citys">
<option value="北京"></option>
<option value="南京"></option>
<option value="重庆"></option>
</datalist>
<form action="">
<input type="color">
<br>
<input type="date">
<br>
<input type="month">
<br>
<input type="week">
<br>
<input type="number" min="10" max="20" step="2">
<br>
<input type="range">
<br>
<input type="search">
<br>
<progress></progress>
</form>
</body>