一.HTML的基本结构
1常用标签
html(超文本标记语言)是网页制作的基础,其文档通常包括以下基本结构:
<!DOCTYPE html>------ 声明了一个html的文档
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
01 编码格式:
1、GB2312 ------ 简体中文字符集
2、 UTF-8 ------ 通用字符集
3、 BIG5 ------ 繁体中文字符集
4、GBK ------ GB2312延申,增加了一些更多的汉字和特殊符号
02 strong、b标签:
作用:加粗字体
03 br和hr标签:
br标签是用来换行------- 单标签
hr:水平分割线 ,单标签,可以设置width属性表示的水平分割线的长度,size属性设置的粗 细
04 p标签:
段落标签 ,两个相邻的p标签中间会空一行
align属性 ------ 位置 left center right,默认值是left
font标签 ------ 这是字体
color属性:颜色 ;颜色的表示法:英文单词 red black pink
#rrggbb 三原色 red green blue
05 sub、sup、pre、span标签:
sub ----- 下标标签
sup ---- 上标标签
pre ------ 用来原样输出内容
span ---- 修饰文本的标签 ----- 标准的行内标签
06 hn和div标签:
hn指的是h1,h2,h3,h4,h5,h6 ----- 标题标签 n取值只能是1-6 字体越来越小 有加粗的效果
div标签 ---- 标准的块级标签 ------ 盒子布局
块级标签:独占一行,自动换行 div hn p hr
行内标签:不能自动换行,除非这一行的文本内容铺满了整个页面才会换行 span
07 特殊字符:
2 表单标签
01 form 标签 一般会和input标签连用
action: 跳转的路径
绝对路径:从盘符开始到文件名称的全部路径
相对路径:当前源文件和目标文件的相对路径
method: 表单提交的方式 get post 默认是get
name : 表单的名称
get:会把用户请求的内容暴露在地址栏上 ; post: 相较于get会安全一点
02 表单元素:
表单元素(文本框、密码框、下拉列表、单选、多选)
一般由input、textarea、select标签构成,需要放到form里面
001 input标签:
语法格式
type的取值:
text ------ 文本框;password ---- 密码框;radio ---- 单选按钮; checkbox ---多选按钮 ;submit ---- 提交按钮;reset ----- 重置按钮;
button ----- 普通的按钮;image ---- 图像按钮;file ---- 文件域;
hidden ----- 隐藏域;email ------ 邮箱;color ----- 颜色域;
date ----- 日期;time ------ 时间;datetime-local ------ 日期+时间;
range ---- 进度条
input标签常用的属性:
checked ---- 默认选择;readonly ------ 只读 字段只可以读不能修改;
disabled ----- 禁用 不可以点击;autofocus ------ 默认光标的位置;
required---- 不能为空白提交
002 textarea标签:
用来实现文本域 ; cols ------- 多少列,用于显示文本的宽度 ;
rows ------- 多少行,用来显示文本的高度
003 select标签:
下拉列表框 ------ 一般和option标签进行连用;selected属性 ---- 默认被选中的选项;
multiple属性 ------- 以列表的形式显示
3 常见的属性
a标签 ----- 超链接
vlink ----- 访问过超链接文本的颜色;Alink ------ 激活超链接文本的颜色;
link ------ 超链接文本的颜色;text ---- 文本的颜色;bgcolor ----- 背景颜色;
background ------ 背景图片
颜色表示法:
英文单词;#rrggbb;rgba() a表示透明度
4 a标签
a标签 ----- 超文本链接标签 ----- 用来进行页面跳转 herf = "url" 跳转页面的路径
target 属性
5 img标签
常见的图片的格式:GIF JPG PNG BMP等
01 常见的属性:
src 属性 ---- 指的是图片的路径(绝对路径和相对路径);alt属性 ------ 代替图片的文本内容 (因为路径的问他或者因为浏览器的问题显示不出来这个张图片的 时候,alt属性值就是去描 述这张图片的一个内容);width ------ 宽度;height ---- 高度;border ------ 边框,默认值0 ;
align ----- 位置 (图片和文字的位置) top (上对齐) middle(居中对齐) bottom(下对齐 默认值) left(左对齐) right(右对齐) ;title ------ 图片的标题 ,用来显示描述图片的文字
02 位图:
usemap属性 ; map标签的name属性,一般会和area标签进行连用
属性:shape ------- 鼠标点击的形状;coords ----- 鼠标点击形状的大小;href ------ 表示跳转的 路径
6 多媒体标签
audio 标签 ---- 音频; video 标签 ---- 视频; controls属性 ---- 表示播放器的组件;
autoplay属性 ----- 自动播放(浏览器不支持这个属性值); loop 属性 ---- 循环播放
7 表格布局
table标签
包含thead tbodt tr td tfood
01 表格的边框
border ----- 表格的边框
02 表格的宽度和高度
width ----- 宽度;height ---- 高度
03 表格的对齐方式
align ----- 对齐方式 left right center
04 表格的背景
bgcolor ----- 背景颜色;background ---- 背景图片
05 表格的间距和边距
cellpadding ------ 表格边距(表示的是单元格内元素距离单元格边缘的距离)
cellspacing----- 表格的间距(单元格和单元格之间的距离)
06 表格的嵌套
表格里面可以嵌套表格
07 表格的合并
rowspan ------- 表示在单元格上垂直方向上去跨行(合并行)
colspan ------ 表示单元格上水平方向跨列(合并列)
8 列表标签
主要有三种:有序列表、无序列表、数据列表
01 有序列表 ---- ol
type属性 ---- 设置序号的种类,默认的是数字;start属性 ----- 控制序号开始的位置;
reversed属性 ----- 降序(反序)
02 无序列表---- dl
type属性 ------ 无序列表的样式 disc(默认取值 实心圆) circle(空心圆) square(实心方框)
03 数据列表 ----- dl
9 多窗口框架
一个页面可以显示多个窗口 ----- frameset (不能和body标签连用)
cols ------ 定义页面列方向的尺寸或则数目;rows ---- 行