这篇博客全面总结了HTML的基本概念和核心元素，包括HTML的定义、特点、标签分类，深入讲解了文档结构、文本标记、图像和链接、表格、列表、结构标记以及表单控件，特别是HTML5新增的表单元素。通过本文，读者可以快速掌握HTML的基础知识。
HTML自我总结
前言
自我总结笔记
一.HTML 快速入门
1.什么是html
HTML是超文本标记语言,使用带标记的语法,让超文本拥有功能
2.HTML的特点
①以.html或.htm为后缀
②由浏览器解析执行
③用带有尖括号的"标记"来识别
④html中可以执行js脚本
3.标签的分类
①双标签(封闭类型标记)
<关键字>内容区域 </关键字>
标记必须成对出现,有开有关,中间位置称为内容区域
②单标记(非封闭类型)
<关键字>或者<关键字/>③嵌套
可以在双标记的内容区域的部分,添加其他标签,形成嵌套关系
作用:1.形成功能的叠加
2.划分结构
写嵌套要注意缩进,目的是提升代码的可读性
④.属性和值
属性和值是用来修饰元素的
语法: 1.属性必须声明在开始标签中
<关键字 属性=“值”></关键字> 值习惯上放在双引号中
2.多个属性.使用空格分割
<关键字 属性1=“值 1” 属性2=“值 2” …></关键字>
属性的分类
1.标准属性,所有元素都可以使用的属性
id:元素在当前页面中的唯一标识符,结对不能重复
title:鼠标悬停在元素上,显示的文本
class:css中,引用类型选择器
style:css中,声明行内/内联样式
2.专有属性,某个元素生效的属性
⑤注释
注释中的文本,不会被浏览器解析,一般用作代码提示和说明
< !-- 注释内容 -->
二.HTML的文档结构
1.HTML文档的构成
①文档类型的声明
< !DOCTYPE HTML > 当前文档是h5类型
②网页结构
一个页面有且只有一对< html>< /html>在最外层代表页面的开始和结束
<html>
<head></head> 网页的头部,定义页面的全局信息
<body><body> 网页的主体,展示的内容
</html>
③head标签
<title>页面名称</title>
<meta charest="utf-8">设置中文编码
<meta name="description" content="">网页描述
<meta name="Keywords" content=""> 关键字设置
④body标签
网页的主体
属性 bgcolor=“pink” 背景颜色
text=“purple” 字体颜色
三.文本标记
1.标题标签
语法:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
特点:字体加粗,字号有变化,h1最大,h6最小
单独成行
上下有垂直距离
属性:align 取值:left默认缺省值/center/right
2.段落标记
<p></p>
特点:独占一行,上下有垂直间距
属性:align 取值:left默认缺省值/center/right
3.换行
html的文本被浏览器解析时,会把回车(不管多少个)当做一个空格来处理
<br> 或者 <br/>
4.分割线
<hr> 或者 <hr/>
特点:单独成行,上下有垂直距离
属性:
size=" " 设置粗细
width="" 设置宽度
color=" " 设置颜色
align="" 设置水平对齐方式,默认缺省值 center
5.预格式化标签
<pre></pre>
保留代码中的所有空格和回车
6.特殊字符(实体)
空格
< 小于号
> 大于号
® ®
© ©
× ×
¥ ¥
7.文本样式标签
<strong></strong> <b></b> 字体加粗
<em></em> <i></i> 斜体
<del></del> <s></s> 删除线
有语义的标签,在网络上被搜索时,能被更快检索到(有语义的排名靠前)
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标
8.分区元素
①块分区
<div></div>
是用来给页面进行布局的
特点,单独成行
属性:align=" " left/center/right
②行分区
<span><span>
同一行文本,设置不同的样式
9.块级元素和行内元素
| 块级元素 | 行内元素 | 行内块元素 |
|---|---|---|
| div h1~h6 hr pre p | span sub sup i em strong … | input |
| 单独成行 默认从上往下排列 | 与其他行内元素,行内块共用一行 默认从左往右排列 | 与其他行内元素,行内块共用一行 默认从左往右排列 |
四.图像和链接
1.图像
<img> 或者 <img/>
属性:src="图片资源的路径"
alt="图片加载失败时显示的文本"
width="" 设置图片的宽度
height="" 设置图片的高度
如果宽高设置的尺寸和原始宽高比不同,图片会发生失真现象
解决方案,width/height 只设置一个,另外一个自动匹配
注意,img标签是行内元素,可以设置宽高的行内元素
2.URL
Uniform Resource Locator 统一资源定位符,路径
①绝对路径
完整的路径
1.使用网络资源的,用绝对路径
使用网络资源的优点:节省本服务器的磁盘空间
缺点:资源不稳定,不受控制
2.本地资源,可以使用绝对路径调用,但是项目中千万不能使用绝对路径
②相对路径
相对,相对当前html的路径
1.兄弟关系,直接写文件名调用 如 src=“09.png”
2.兄弟的儿子,写兄弟文件夹名称,找到兄弟
使用/进入兄弟文件夹,再写儿子的名称 如: src=“img/09.png”
3.父亲的兄弟,使用…/找到父亲,父亲的兄弟直接写文件名 如 src="…/09.png"
3.链接
①语法
<a></a>需要添加href属性,才会出现链接功能,不然就是一个普通文本
属性:href:链接的路径,需要添加协议
target:设置链接的打开方式
_self 默认缺省值,在当前标签页打开
_blank 在新的标签页打开
②a标签的其他功能
1.跳转页面
2.下载资源< a href=“1.zip”>下载,项目中基本不用
3.链接到的电子邮箱的发送(需要电脑中,安装了邮件的软件)
< a href=“cxza@163.com”>发邮件
4.使用a标签调用js脚本
< a href=“javascript:show()”>调用js
5.回到顶部
< a href="#">回到页面顶部
如果开发的时候,不知道要跳转到哪里,可以使用#来占位,不让href没有值
③锚点
1.定义锚点
1.使用a标签定义锚点<a name="锚点名称"></a>
2.直接使用元素的id值当做锚点 <div id="id当做锚点"></div>
2.激活锚点
使用a标签激活锚点(跳转到锚点)
<a href="#锚点名称"></a>
地址栏会显示当前激活的锚点名称
五.表格
1.表格的语法
标签
<table> 表格的开始
<tr> 行开始 table row
<td></td> 列 table data
</tr> 行结束
</table> 表格结束
多数情况下,每一行的列数是相同的
2.表格的属性
①table
border="" 边框
width="" 宽
height="" 高
align="" 设置table本身水平对齐方式
bgcolor="" 背景颜色
bordercolor="" 边框颜色
cellpadding="" 设置单元格内边距,边框到内容之间的距离
cellspacing="" 设置单元格外边距,边框到边框之间的距离
②tr
align="right" 设置当前行内容的水平对齐方式
valign="middle" 设置当前行内容的垂直对齐方式
top/middle/bottom
bgcolor=""
③td/th
width=""
height=""
align="right" 内容的水平对齐方式
valign="bottom" 内容的垂直对齐方式
bgcolor="coral" 当前单元格的背景色
colsapn
rowspan
3.表格的特点
①.每一行,对应的列,宽度相同
②每一行,所有的列,高度相同
③如果内容少,设置的宽高大,表格按照设置宽高显示
如果内容多,设置的宽高小,表格按照内容宽高显示
④表格在渲染时候,是先把所有内容保存在内存中,
以后一次渲染到页面,导致渲染效率低
ps:浏览器解析html文本的时候,没有空格,就认为是一个单词不会换行,
有空格,认为是多个单词,放不下会自动换行
4.不规则的表格
colspan="n" 跨列
从指定的单元格的位置处开始
向右合并n个单元格(n包含自己)
被合并的单元格要删除
rowspan="n" 跨行
从指定的单元格位置处开始
向下合并n个单元格(n包含自己)
被合并的单元格要删除
5.表格的可选标记(可用可不用)
①表格标题
<caption>表格标题</caption> 必须紧紧挨着table
②th 表头和列表
替代td <th></th> 内容加粗并居中
6.表格的复杂应用
1. 表头
2. 表主体,注意,不写表结构,浏览器会自动添加tbody
3. 表脚
表结构标签,在页面中,不可见
4.表格嵌套,所有嵌套内容,必须放在td中
六.列表
本意也是做数据展示的,有条理的展示数据
但是,所有人都习惯使用列表来做布局
1.列表的组成
列表都是有"列表类型"和"列表项"组成
1.列表类型
有序列表 <ol></ol> order list
无序列表 <ul><ul> unorder list
2.列表项
<li></li> list item
2.列表的属性
①有序列表的属性
type 设置标题项的类型
取值 1 默认缺省值
a A 字母
i I 罗马数字
start 设置标题项的起始编号
②无序列表
type 设置标识项的类型
取值 disc 实心圆 默认缺省值
circle 空心圆
square 实心方块
none 无标识
3.列表的嵌套
语义上的硬性规定,被嵌套的内容.必须放在li中
1.嵌套 a img
2.在列表中嵌套其他列表
4.定义列表
对一个名词,进行解释说明的时候,实用定义列表
<dl>
<dt>名词</dt>
<dd>对这个名词的解释</dd>
</dl>
7.结构标记
结构标签跟div功能一样
提供语义,读起来更轻松
百度搜索的时候,比div更容易被找到
1.常用结构标记
<header></header> 定义网页的头部,或者某个区域的头部
<footer></footer> 定义网页的底部,后者某个区域的底部
<nav></nav> 定义导航栏
<section></section>定义网页的主体
<aside></aside> 定义网页的侧边栏
<article></article>定义与文字相关的内容,论坛回帖评论
8.表单
1.作用
form标签是不可见
1.提供可视化的输入控件
2.收集整理用户输入的信息
3.把信息交给服务器
注意,提交数据给服务器的方式有两种
1.form提交
2.ajax提交,使用ajax提交,就不写form
2.表单的组成
①前端部分
提供可视化的输入控件
并自动收集数据
提交请求
②后端部分
后台接口,接收数据,对请求进行处理,发送响应
3.表单
①语法<form></form>
②属性
1.action="" 定义表单提交时发生的动作,填写提交的接口
默认缺省,提交给当前的html本页
2.method="" 定义表单提交的方式,提交的方法
默认缺省,get特点:明文提交,提交的内容提交的内容会显示在地址栏
提交的数据有大小限制,最大2KB
post特点:隐式提交,提交的内容不在地址栏显示
提交的内容在form data 请求主体中
3.enctype="" 设置表单可以提交什么类型的数据
默认缺省值, appplication/x-www-form-urlencoded 记住
允许提交任意字符,不能提交文件
text/plain 允许提交普通字符(不能有&=等特殊字符)
multipart/form-data 允许提交文件给服务器
4.表单的控件
①分类
input元素,基础9种,h5新出10种
texttarea 多行文本框
selext+option 下拉选择框
其他控件
②input元素
input默认是行内块
<input type=""> 单标签,通过type属性设置控件类型
如果type不写,或者值写错,默认是text类型
所有input都有的通用属性
1.name 为控件定义名称,如果使用form表单提交,name属性是必须写的
2.value 控件的值,传递给服务器的数据
注意,按钮的value不是提交的数据,而是按钮显示的文本
3.disabled 禁用,无属性值
不能选中行,不能修改,不能提交
③ input元素详解
1.文本框和密码框
type="text" 默认缺省值 文本框
type="password" 密码框
属性: maxlength="" 设置输入的最大长度
readonly 无值属性 不能选中,不能修改 但可以提交
placeholder 占位提示符
2.按钮
提示按钮 type="submit" 将表单中的我数据自动的收集整理,并发送给服务器
普通按钮 type="button" 没有能力,配合事件可以调用js代码
重置按钮 type="reset" 恢复初始状态
<buuton>btn</button> h5 新标签,效果等同于submit
3.单选按钮和多选按钮
type="radio" 单选按钮
type="checkbox" 多选按钮
注意事项 1.必须写name属性,name在这里,name在这里除了作为控件使用,还分组
2.必须设置value ,不然永远是on
属性,设置默认选中,checked 无值属性
4.隐藏域
type="hidden"
想把数据提交给服务器,又不想让用户看到,使用隐藏域
用户看不到,又能提交
5.文件选择框(上传文件)
type="file"
注意,想上传文件,需要把form标签的两个属性进行修改
method="post" post没有上传数据的大小限制
enctype="multipart/form-data" 可以上传文件
属性 multiple 无值属性,可以一次选择多个文件提交
④textatea 多行文本域
<textarea></textarea>
属性 : clos="5" 设置宽度
rows="3" 设置高度
⑤下拉选择框 select
<select>
<option></option>
</select>
提交的时候,提交的value是select的value,select的value是什么?
1.当option没有value属性时,select的value,是选中的那个option的内容区域
2.当option有value时,select的value,是选中的那个option的value值
select属性
size="6" 默认值为1,再为1的时候,效果是下拉选择框
>1时,效果为滚动选择框
multiple 在滚动选择框下,进行多选
option属性, 默认选中 selected 无值属性
⑥其他元素
1.label
作用1.可以选择使用label代替span
2.可以关联控件,使用过label的for属性,引用要关联的控件的id值
2.为控件分组
<fieldset> 分组的框
<legend></legend> 分组的名称
</fieldset>
⑦浮动框架(不属于表单的内容)
在一个html文件中,引入其他的html文件
<iframe><i/frame>
属性 1.src 要被引入的html文件的路径
2.width/height 框架的宽高
3.frameborder="0" 去除框架的边框
4.scrolling="no" 去除滚动条
5.h5 新表单元素
①.邮箱
<input type="email" name="email">
表单提交时,对邮箱格式做了简单的验证(验证有没有@,@前有没有内容)
②.搜索类型
<input type="search" name="search">
控件提供了一个快速删除的小叉 ×
③.网址类型
<input type="url" name="url">
验证输入的内容,是不是以http:开头
④.电话号码类型
<input type="tel" name="tel">
移动端弹出虚拟键盘
⑤.数字类型
<input type="number" name="number">
max="" 设置可以提交的最大值
min="" 设置可以提交的最小值
step="" 设置步长
⑥.范围类型
<input type="dd" name="dd max="20>
提供了一个数字滑块,但是看不到数字
⑦.颜色类型
<input type="color" name="color">
⑧.日期类型,提供一个日期选择控件
<input type="date" name="date>
⑨.月份类型
<input type="month" name="month">
⑩.周类型
<input type="week" name="week">
扫一扫
5981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
