本文详细介绍了HTML的基本结构，包括doctype声明、常用标签如strong、br、p、form表单及其元素、多媒体标签、表格布局和列表的使用，以及多窗口框架等内容，为初学者提供了全面的HTML基础知识。
一.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 ---- 行
扫一扫
1656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
