用HTML写的HTML笔记大全✌

HTML笔记

大家好鸭，这次记笔记的时候我突发奇想，直接将每一节的笔记，都记成了单独的html文件，平时通过页面链接来进行查找，就像下面蓝字那样：

概念看不懂，
想看栗子怎么办？
直接查看网页源代码吖！
还有谁能有我们这么方便呢？

不过由于本人的技术和时间限制，没有进行更多的美化，观影体验可能会差一点点…

有什么不足的地方还希望大家多多指出

点击查看对应内容哟~

文本元素

分组元素

表格元素

文档元素

嵌入元素

表单元素【上】

表单元素【中】

表单元素【下】

全局属性和其他

第一节、文本元素

1、 加粗，同strong强制换行→
2、 加粗，同b强制换行→
3、安全换行（在不能同行显示的情况下打断点，优先从断点处切行）→i love you 4、 斜体字，同em
5、 斜体字，同i
6、 删除线，同del
7、 删除线，同s
8、 下划线，同ins
9、 下划线，同u
10、 将字体缩小一号
11、This is _下标
12、This is ^上标
13、代码，中文下无效果，英文下变小 HTML5
14、 倾斜（用作表示编程语言中的变量）
15、 表示程序或计算机的输出，中文下无效果，英文下变小
16、 表示用户的输入，中文下无效果
17、 无实际效果，表示缩写
18、 倾斜，表示术语
19、 加双引号，表示引用
20、 加粗，表示引用其他作品的标题 21、加拼音 饕(tao)
22、 设置文字方向 rtl→从右到左 ltr→从左到右
23、 黄色荧光标记
24、表示时间日期，无实际作用 2000-11-01
25、 无实际作用，表示文本

第二节、分组元素

p：段落

这是一个段落

这是另一个段落

div：通用分组，段与段的间隔和 br 无异

这是一个通用分组

这是另一个通用分组

blockquote：引用大段他出内容，与p相近，有段落间隙功能，包含首尾缩进功能（在中间显示）

这是一个大段引自他出内容

这是另一个大段引自他出内容

pre：理解空隙

####

####

####

####

####

hr：水平分割线

---

ul li:添加无序列表

• 张三
• 李四

ol li：添加有序列表

1. 张三
2. 李四

ol支持三种属性，分别是：

• start：从第几个序列开始统计：ol start="2"
• reversed：是否倒序排序：ol reversed，一半主流浏览器不支持
• type：表示列表的编号类型，值分别为：1、a、A、i、I

li元素属性：

• value：强行设置某个项目的编号li value="7"

dl dt dd生成说明列表

这是第一份文件

这里是这份文件的详细内容1

这里是这份文件的详细内容2

这是第二份文件

这里是这份文件的详细内容1

这里是这份文件的详细内容2

注： 这三个元素是一个整体，但 dt 和 dr 未必都必须出现

figure figcaption使用插图

这是一张图片

注 这两个元素一般用于图片的布局

第三节、表格元素

表格元素总汇

元素名称	说明
table	表示表格
thead	表示标题行
tbody	表示表格主体
tfoot	表示表脚
tr	表示一行单元格
th	表示标题行单元格
td	表示单元格
col	表示一列
colground	表示一组列
caption	表示表格标题

td属性：

• colspan:横向合并
• rowspan:纵向合并

第四节、文档元素

文档元素总汇

元素名称	说明
h1~h6	表示标题，数字越小，字号越大
header	表示首部，比如LOGO、标题、导航等内容
footer	表示尾部,比如版权声明、友情链接等内容
nav	表示有意集中在一起的导航元素
section	表示重要概念或主题内容
article	表示一段独立的内容，类似body
address	表示文档或article的联系信息，字体倾斜
aside	表示与周边内容少有牵扯的内容（注释栏）
hgroup	将一组标题组织在一起
details	生成一个区域，用户将其展开可以获得更多细节
summary	用在details元素中，表示该元素内容的标题或说明（大部分浏览器不支持，暂略）

文档元素的大部分标签，并没有任何效果，完全是为了配合语义使用，以强调它的结构性，和CSS搭配

第五节、嵌入元素

嵌入元素总汇

元素名称	说明
img	嵌入图片
map	定义客户端分区影响图
area	表示一个用户客户端分区响应图的区域
audio	表示一个音频资源
video	表示一个视频资源，有时我们需要兼容多个浏览器
iframe	嵌入一个文档
embed	用插件在HTML中嵌入内容
canvas	生成一个动态的图形画布
meter	嵌入数值在许可值范围背景中的图形表示
object	在HTML文档中嵌入内容（功能被弱化）
param	表示将通过object元素传递给插件的参数
progress	嵌入目标进展或任务完成情况的图形表示
source	表示媒体资源
svg	表示结构化矢量内容

img的私有属性

• src：嵌入图像的URL
• alt：当图片不加载时显示的备用内容
• width：定义图片的长度（单位是像素）
• height：定义图片的高度（单位是像素）
• ismp：创建服务器端分区响应图(获取区域坐标）
• usemap：关联map元素

除尺寸外，与 video相似，点击参考即可
格式为mp3、m4a、wab

• sec：视频资源的URL
• width：视频宽度
• height：视频高度
• autoplay：设置后，表示立刻开始播放视频
• preload：设置后，表示显示播放控件

• 		<li><i>preload:"none"：点击播放后开始加载</i></li>
  		<li><i>preload:"metadata"：只加载元数据（宽高、第一帧）</i></li>
  		<li><i>preload:"auto"：请求浏览器尽快下载整个视频</i></li>
  
  		<li>control：设置后，表示显示播放控件</li>
  		<li>loop：设置后，表示反复播放视频</li>
  		<li>muted：设置后，表示视频处于静音状态</li>
  		<li>poster：指定视频数据载入时显示的图片</li>
  	</ul>
  

index 百度


↑这就是内嵌文档 视频嵌入
IE浏览器不支持此元素。
optimum属性表示最佳值，但不产生效果

这里引入flash播放器实现I9以下，但没必要了


通过source引入多种格式的视频，让更多的浏览器保持兼容

第六节、表单元素【上】

表格元素总汇

表单元素总汇	说明
form	表示HTML表单
input	表示用来收集用户输入数据的控件
textarea	表示可以输入多行文本的控件
select	表示用来提供一组固定的选项
option	表示提供一个选项
optgroup	表示一组相关的option
button	表示可用来提交或重置的表单按钮（或一般按钮）
detalist	定义一组提供给用户的建议值
fieldset	将一些表单元素组织在一起，形成一个整体
legend	表示fieldset元素的说明性标签
label	表示表单元素的说明标签(两种方案）
output	表示计算结果

注册表单 用户名： 电子邮件：
提交
重置
按钮
form属性：

• action：表示表单提交的页面
• method：表示表单的请求方式：有POST和GET两种，默认是GET
• enctype：表示浏览器对发送给服务器的数据所采用的编码格式（一般不写）
• name：设置表单名称，以便程序调用
• target：设置提交时的目标位置：_blank、_parent、_self、_top
• autocomplete：设置浏览器记住用户输入的数据，实现自动完成表单。默认为on自动完成，如果不想自动完成则设置off。不写则默认开启。
• novalidate：设置是否执行客户端数据有效性检查，后面课程讲解

input属性

• 
  
• autofocus：让光标聚焦在某个input元素上，让用户直接输入
• 
  
• disabled：禁用input元素
• 
  
• autocomplete：单独设置input元素的自动完成功能
• 
  
• form：让表单外的元素和指定的表单挂钩提交
• 
  
• type：input元素类型，内容较多，下节课展开讲解
• 
  
• name：定义input元素的名称，以便接收到相应的值
• 
  
• value：默认起始值
• 
  

button&submit的type属性的子属性

• 
  
• form：指定按钮关联的表单
• 
  
• formaction：覆盖form元素的action属性
• 
  
• formenctype：覆盖form元素的enctype属性
• 
  
• formmethod：覆盖form元素的method属性
• 
  
• formtarget：覆盖form元素的target属性
• 
  
• formnovalidate：覆盖form元素的novalidate属性
• 
  

第七节、表单元素【中】

• 1. type为text值时的子属性

• list：指定为文本框提供建议值的datalist元素，其值为datalist元素的id值
• maxlength：设置文本框最大字符长度
• pattern：用于输入验证的正则表达式
• placeholder：输入字符的提示
• readonly：文本框处于只读模式
• disabled：文本框处于禁用状态
• size：设置文本框宽度
• value：设置文本框初始值
• required：表明用户必须输入一个值，否则无法通过输入验证
• 
  
  2. type为password值时的子属性
• 除正则和验证需要放在下一节，其余和文本框一致。
• 
  
  3. type为search值时的子属性
• 和文本框一致，在除firefox浏览器的其他现代浏览器中，会显示一个叉来取消搜索内容，额外属性也和text一致
• 
  
  4. type为number或range时
• 只限输入数字的文本框，不同浏览器可能显示方式不同，生成一个数值范围文本框，只是样式是拖动式。额外属性如下：
• 
  
  5. type为date系列时
  type= "date"/"month"/"time"/"week"/"datetime"/"datetime-local"
• 实现文本框可以获取日期和时间的值，但支持的浏览器不完整。推荐使用jQuery等前端库来实现日历功能。额外属性和number一致
• 
  
  6. type为color时
• 实现文本框获取颜色的功能
• 
  
  7. type为checkbox或radio时
• 生成一个获取布尔值的复选框（name必须一致）或固定选项的单选框。额外属性如下：
• e.g. input type="radio" name="sex" value="男"
  
  8. type为submit或reset或button时
• 参见上节内容
• 
  
  9. type为image时
  e.g. input type:"image" src="img.png"
• 生成一个图片按钮，点击图片就能实现提交功能，并且传送了分区响应数据。图片按钮也提供了一些额外属性：
• 
  
  10. type为email或tel或url时
• emil为电子邮件格式、tel为电话格式、url为网址格式，格外属性和text一致。但tel浏览器支持不太好。
• 
  
  11. type为hidden时
• 生成一个隐藏控件，一般用于表单提交时关联主键ID提交，而这个数据作为隐藏存在
• 
  
  12. type为file时
• 生成一个文件上传控件，用于文件的上传，额外提供了一些属性：
• 
  提交 apple banana
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  第八节、表单元素【下】

  • 1. 生成下拉表单
    e.g.select name="fruit"
    option value="1"苹果/option
    option value="2"橘子/option
    option value="3">香蕉/option
    /select
    
    2. 一些额外属性：
    
    
    
  • optgroup分组示例：
  • 
    
    
    
  3. 生成多行文本框
• 生成一个可变更大小的多行文本框，属性如下：
• 
  
  输入验证（前面讲过，就放个截图叭）：
  
  

  第九节、全局属性和其他

  一、实体(字符编码表)
  
  

  二、元数据
  
  meta元素可以定义文档中的各种元数据，而且一个HTML页面可以包含多个meta元素
  

  • 1. 指定名/值元数据对
    2. 
       
    
    
  2. 声明字符编码
  3. 
     
• e.g. meta charset="utf-8"
• 
  
  3. 模拟HTTP标头字段
  4. 
     
  
  

  三、全局属性
  
  

  1. id属性
  
  
• e.g. < p id=“abc” >段落< /p>
• 
  
  
• 解释：id属性给元素分配一个惟一标识符。这种标识符常用来给CSS和JS调用选择元素，一个页面只能出现一次同一个id名称
• 
  
  2. class属性
• e.g. < p class="abc" >段落< /p>
• 
  
• e.g. < p class="abc" >段落< /p>
• 
  
• e.g. < p class="abc" >段落< /p>
• 
  
• 解释：class属性用来给元素归类。通过其使文档中某一个或多个元素同时设置CSS样式。
• 
  
  3. accesskey属性
• e.g. < input type="text" name="user" accesskey="n" >
• 
  
• 解释：定位光标快捷键操作，Windows下alt+指定键，前提是浏览器alt并不冲突。
• 
  
  4. contenteditable属性
• e.g. < contenteditable="true" >我可以被修改< /p >
• 
  
• 解释：让文本处于可编辑状态，设置true则可以编辑，false则不可编辑，或者直接设置属性。
• 
  
  5. dir属性
• e.g. < p dir="rtl" >文字到右边了< /p >
• 
  
• 解释：让文本从左到右（ltr），还是从右到左（rtl）
• 
  
  6. hidden属性
• e.g. < p hidden >你看不到我！< /p >
• 
  
• 解释：隐藏元素。
• 
  
  7. lang属性
• e.g. < p lang="en" >HTML5< /p >
• 
  
• 解释：可以局部设置语言。
• 
  
  8. title属性
• e.g. < p title="HTML5教程" >HTML5< /p >
• 
  
• 解释：对元素的内容进行额外的提示。
• 
  
  9. tabindex属性
• e.g. < input type="text" name="user2" tabindex="2" >
• 
  
• e.g. < input type="text" name="user1" tabindex="1" >
• 
  
• 解释：在表单中按下tab键，实现获取焦点的顺序。如果是-1，则不会被选中。
• 
  
  10. style属性
• e.g. < p style="color:red;" >CSS样式< /p >
• 
  
• 解释：设置元素行内CSS样式。
•