1.认识html
html(超文本标签语言)主要在用于网页的显示,可以链接文字、图形、表格、声音等多媒体格式。html文件以.html为后缀
2.html基本的代码结构
<!DOCTYPE html> <!--声明了一个html的文档 -->
<html lang="en"> <!-- 网页开始的部分-->
<head> <!-- 网页头部的开始-->
<meta charset="UTF-8"> <!-- UTF-8 字符编码格式 GB2312 简体中文字符集 BIG5繁体中文字符集 GBK GB2312延用 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!-- 网页的标题最上面的网页显示文字内容部分-->
</head>
<body>
</body>
</html> <!-- 网页结束标记-->
3.html常用标签
注释 <!-- -->
双标签
<strong> </strong> <b></b> ——加粗字体标签,须显示的文字位于两个括号中间
<i></i> <em></em> —— 都是倾斜字体标签
<u></u> ——为文字添加下滑线
<del></del> ——为文字添加删除线
<p></p> ——段落标签,自动生成前后一行间距 algin属性可设置它位置的属性(left center right)默认left
<font></font> ——关于文本的属性设置 color(颜色)属性 表示法:单词法(red black pink)、#rrggbb 三原色(red,green,blue),rgba(x,x,x,x)a代表透明度
<sub></sub>——下标
<sup></sup> ——上标 2 例子<sup>3</sup> 表示2的三次方
<pre> </pre>——内容是什么格式及排版,则显示效果都为该效果
<span></span>——修饰文本标签 字体颜色属性都可以设置
<hn></hn>—— n需要取值,取值范围为1-6,字体变粗1最大字体6最小,固定了高度
<div></div> ——标准的块级标签(独占一行并且文本结束自动换行)---盒子布局
<a href=""></a>——链接标签,href值为地址,可以是网址
a标签的target属性
_blank 新窗口下打开链接
_parent 当前窗口覆盖
_top 在整个窗口被打开的链接
锚点地址为标签id,需用#开始
<img src="" alt="">——显示图片
常用属性
src属性:只的是图片的路径
alt属性:代替图片的文本内容(当图片无法显示时,alt的值描述这张图片的内容)
width:设置图片宽度
height:设置图片高度
border:设置边框
align:位置(图片和文字位置)
值:
top(上对齐)
middle(居中对齐)
bottom(下对齐)
left(左对齐)
right(右对齐)
title:图片的标题,用来显示描述图片的文字(鼠标移动到图片时候,描述图片)
位图
usemap属性 链接map标签(值为#+map的name)
map标签的name属性,一般会和area标签进行连用
area属性:
shape——鼠标点击的形状
default,整个区域,
rect定义矩形区域,
circle定义圆形区域,
poly,定义多边形区域
coords——鼠标点击形状的大小
值:x,y,z(分别代表x轴,y轴,z表示大小)qq截图x,y轴分别/2
href——跳转的路径
多媒体标签
<audio src=""></audio>——音频标签
<video src=""></video>——视频标签
添加属性
controls——表示播放组件
autoplay——自动播放(一般不可用浏览器禁止)
loop——循环播放
单标签
<br> 换行标签
<hr>水平分割线 可以设置width,size调整设置水平分割线的长度,宽度
4.特殊字符显示
 ; 空格
&it; <
> >
¥ ¥
" "
© ©
® ®
± ±
‰ ‰
÷ ÷
5.表单标签 <form action=""></form>常与input标签连用
<form action=""></form> action跳转的路径
基本格式
<form action="" >
<input type="text">
</form>
action跳转的路径
相对路径:(无盘符) 以 ..\文件夹 文件(指定文件在当前路径下可省略..\ 只保留文件名称)
绝对路径:从盘符开始的完整路径(仅在本机可用)
注:常用相对路径提交作业
method:表单提交的方式 get,post,默认是get
get会把input标签输入的内容显示出来(不安全)
post则只会显示跳转到的地址
name:表单名称
表单的元素:一般由input,textarea,select标签构成,需要放在from里面
input标签
type的取值
text——文本框
password——密码框
radio——单选按钮
CheckBox——多选按钮
submit——提交按钮 更改提交框的文本可用value属性
reset——重置(清除表单已填写的内容)
button——普通按钮显示或更改按钮文本可用value属性
image——图形按钮 引用 路径用src=""
file——文件域
hidden——隐藏域(隐藏表单用户没有输入的信息,用value来取值)
email——邮箱(提交需邮箱格式)
color——颜色域,可控制主题颜色
data——日期
time——时间
datatime-local——日期时间
input常用属性
checked——默认选择
readonly——只读不可被更改
disabled——禁用不可被点击
autofocus——默认光标的位置
required——必须填写必须填写内容
select标签——下拉列表框(一般会和option标签进行连用)
一般格式:
<select name="" id="">
<option value="">北京</option>
<option value="">重庆</option>
</select>
select常用属性
selected——默认下拉列表的值 使用方法<option value="" selected>重庆</option>
multiple——以列表的方式显示 <select name="" id="" multiple>
textarea标签——用来实现文本域
cols——多少列,用于显示文本的宽度
rows——多少行,用于显示文本的高度
6.常用属性
vlink——访问过超链接的颜色
alink——激活超链接的文本的颜色
link——超链接文本的颜色
text——添加文本的颜色
bgcolor——背景颜色
background——设置背景图片,值为地址
7.表格 table标签
主要结构:(可省略thead,tfoot)
<table>
<thead></thead> <!--表头 -->
<tbody> <!--表格主干 -->
<tr> <!-- 行-->
<td></td> <!-- 列-->
</tr>
</tbody>
<tfoot></tfoot>
</table>
表格属性
border——表格边框
width——表宽
height——表高度
align——对齐方式,值(right,left,center)
bgcolor——背景色
background——背景图片
cellpadding——表格边距(单元格内容距离边框的距离默认为2px)
cellspcing——单元格与单元格之间的距离(默认2px)
rowspan——合并行,合并的数量超过其他tr的总数
colspan——合并列,合并的数量+当前tr中td的条数不超过其他tr的td的总数
表格套表格
<table>
<tr>
<table>
<tr>
<td>一天</td>
</tr>
</table>
</tr>
</table>
8.列表标签
有序列表ol常与li标签连用
<ol type="">
<li>内容</li>
<li>内容</li>
</ol>
type的取值
1——表示数字排序
A——表示ABC顺序
a——表示abc顺序
I——罗马数顺序大写字母
i——罗马数顺序小写字母
start属性——值表示重第几个开始排序
reversed——降序排
无序列表ul标签(word项目符号)
<ul>
<li>内容</li>
<li>内容</li>
</ul>
type属性(无序列表的样式)取值
disc(默认实心圆)
circle(空心圆)
square(实心方框)
数据列表标签dl常与dt标签为内容序(一个dl里面可以有多个dt)
<dl>
<dt>内容标题</dt> <!--下列两行数据的标题-->
<dd>内容</dd>
<dd>内容</dd>
</dl>
9.多窗口框架——frameset(一个页面显示多个窗口)(不能和body标签连用iframe可同功能)
cols属性——定义页面列方向的尺寸或则数目,值(25%,40%,*(剩下的全部))
rows属性——定义页面行方向的尺寸或则数目