【前端基础篇】快速学习HTML常用标签和属性
一、前奏
- 学习方法：
整体原则：复习、学习、练习、预习
网上找资料找练习作业、整理笔记、反复加强代码训练 - 常用开发工具：
Notepad++、Editplus、Hbuilder、IntelliJ IDEA、WebStorm - 常用的浏览器
- IE: trident内核
IE浏览器是世界上使用最广泛的浏览器，它由微软公公司开发，预装在windows操作系统中。所以我们装完windows系统之后就会有IE浏览器。目前最新的IE浏览器的版本是IE 11. - Firefox：gecko内核
火狐浏览器是一个开源的浏览器，由Mozilla资金会和开源开发者一起开发。由于是开源的，所以它集成了很多小插件，开源拓展很多功能。发布于2002年，它也是世界上使用率前五的浏览器。 - Safari:webkit内核
Safari浏览器由苹果公司开发，它也是使用的比较广泛的浏览器之一。Safari预装在苹果操作系统当中，从2003年首发测试以来到现在已经11个年头。是苹果系统的专属浏览器，当然现在其他的操作系统也能装Safari。 - Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
opera浏览器是由挪威一家软件公司开发，该浏览器创始于1995。目前其最新版本是opera 20.他有着快速小巧的特点，还有绿色版的，属于轻灵的浏览器。 - Chrome:基于webkit
Chrome浏览器由谷歌公司开发，测试版本在2008年发布。
虽说是比较年轻的浏览器，但是却以良好的稳定性，快速，安全性获得使用者的亲睐。号称全世界用户体验最好的浏览器
- IE: trident内核
二、html基础知识
2.1 对网页和网站的理解：
- 什么是网页？
网页就是在网站中的任何一页面，通常网页文件的扩展名为.html或.htm；(静态网页) - 网页的构成要素
文字、图片、超链接、音频、视频等； - 什么是网站？
网站是用于展示相关内容的网页的集合；访问网站时，默认打开的第一个页面就是主页，也叫首页。默认的文件名是index.html或default.html
2.2 web标准的介绍
- WEB标准不是某一个标准，而是一系列标准的集合。
- 网页主要由三部分组成：结构（Structure-html）、表现（Presentation-css）和行为（Behavior-javascript）。
- 对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（world wide web coalition，缩写：W3C）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
W3C 就是出 web 规范的组织机构。html、css、js的规范都是W3C定义发布的。
2.3 Html的发展历史
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
- HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日，W3C推荐标准
- HTML 4.0——1997年12月18日，W3C推荐标准
- HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
- HTML 5——2014年10月28日，W3C推荐标准
2.4 什么是Html?
Hyper Text Markup Language,超文本标记型语言，是一种标记语言，它是制作网页的基础语言，主要用于超文本中内容的显示方式。它不需要编译，可以直接由浏览器执行。
- 超文本：
- 标记：“标记”是一些符号，用来区分文档中的不同部分。也被称作“标签”
- 单标记只有结束标记，如
- 双标记分为开始标记和结束标记，如
...
- HTML标记不区分大小写，建议使用小写
- 所有标签都是放在<>里
- 标签可以互相合理嵌套
- 单标记只有结束标记，如
- 语言：
2.5 文件和文件夹的命名规范
由字母、数字、下划线构成、且不以数字开头
不建议使用中文
2.6 Html标签的属性和属性值
属性：标签的特征
属性值：为标签的特征所赋的值
语法：<标记 属性名 = “属性值”> 内容
三、Html的嵌套原则
3.1 Html中元素的分类
块状元素block
内联元素(行内元素)inline
内联块状元素inline-block
3.2 块元素的三级分类
- 一级元素
body、head - 二级元素
a.子一级元素必须是指定元素的二级元素- ul、ol子一级元素必须是li
- dl：子一级元素必须是dt和dd
- table：子一级元素必须是caption、thead、tbody、tfoot，再子一 级是tr，最后是td、th。
- b.完全可以自由嵌套的元素 div、li、dd、form、td
- 三级元素
不可以自由嵌套的元素，该元素内部只能嵌套行内元素 h1-h6、p、dt
3.3 元素的嵌套原则
- 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：
- 块级元素不能放在
里面： - 有几个特殊的块级元素只能包含内联元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p、dt - li 内可以包含 div 标签 —— 这一条其实不必单独列出来的，但是网上许多人对此有些疑惑，就在这里略加说明：
- li 和 div 标 签都是装载内容的容器，地位平等，没有级别之分（例如：h1、h2 这样森严的等级制度_），要知道，li 标签连它的父级 ul 或者是 ol 都 可以容纳的，为什么有人会觉得 li 偏偏容纳不下一个 div 呢？别把 li 看得那么小气嘛，别看 li 长得挺瘦小，其实 li 的胸襟很大 滴……
- 块级元素不能放在
- 块级元素与块级元素并列、内联元素与内联元素并列
四、Html基本元素及属性的介绍
4.1 Html基本结构的介绍
html head body
- html 网页标签
- head头部标签中可以嵌套网页标题标签 title 元信息标签 meta 样式标签style 链接外部样式标签link js标签script
- body主体标签背景属性 bgcolor
- meta元信息标签设置编码、文档描述、关键字、重定向等等(详见w3c)
4.2 标题标签及属性 h1-h6
语法： 标题标签 n代表1-6
属性： align 属性值： left center right
特点：h1-h6字体逐渐变大，默认加粗效果，独立占有一行（块状元素特点）
4.3 段落标签及属性 p
语法： 段落
属性： align 属性值： left center right justify(分散对齐)
特点：元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定
4.4 图像标记及属性 img
语法：
属性：
- src 设置图片的路径（规定显示图像的 URL）
- alt 图片加载失败的文字描述（规定图像的替代文本）
- title 图片的描述信息（鼠标放在上面，增加用户体验）
- width、height 设置图片的宽高
- border 设置图片的边框
注意：可插入的图片类型 :jpg、gif、png 不能插入的类型：psd、ai、bmp
路径：指定文件或文件夹所在的位置，路径分为绝对路径和相对路径；
绝对路径：完整的描述文件位置的路径就是绝对路径（带盘符），例如：F:\厦门\素材\其他\1.jpg
相对路径：文件本身相对于目标所在位置
- 网页文件和图片位于同一个文件夹下：直接写图片名，如src=“1.png”
- 网页文件和图片不在同一个文件夹下，图片位于另外一个文件夹里面：先写图片文件夹的名，再写文件名，如src=“img/1.png"
- 网页文件和图片不在同一个文件夹下，网页文件位于另外一个文件夹里面：先使网页文件跳出文件夹，再写文件名，如src=“…/img/1.png”
4.5 超链接标签 a
属性
- href 超链接地址（规定链接指向的页面的 URL）
- title 超链接的描述信息（增加用户体验）
- target 超链接打开的方式（规定在何处打开链接文档）
- download 规定被下载的超链接目标
filename规定作为文件名来使用的文本,可以省略
超链接对象：文本、图像、空连接、锚点链接
链接到不同页面：
链接到同一个页面的不同部分：设置锚点
4.6 水平线标记以及属性 hr
语法：
属性：\
- size 水平线的厚度
- width 水平线的宽度
- color 水平线的颜色
- align 水平线对齐方式，属性值 left center right
4.7 其它常用标签的介绍(了解)
强制换行（Shift+Enter）
上标
下标
标签(加粗)
标签（加强调，效果加粗）
标签（斜体）
标签（作用强调，效果斜体）
标签（下划线）
4.8 HTML里面常用的特殊符号（详见附件）
空格
© 版权符号
> 大于号
< 小于号
&trade 商标
® 已注册
4.9 颜色的表示方式
- 英文单词表示法（详见资料）：red green blue black orange yellow pink brown purple white gray gold
- 十六进制表示法：#6位16进制数（0-9，a-f）
#ff0000 红色 #00ff00 绿 #ffff00 黄 #000000 黑色 #ffffff白色 - RGB表示法:
- 0-255之间的值 rgb(255,120,0)
- 所占百分比设置 rgb(10%,0%,100%)
- 带有透明度的颜色设置(rgba表示法):a表示不透明度 , 取值范围是0-1之间（在IE上测试浏览器兼容性）,0代表完全透明 rgba(255,0,0,0.5)
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址
五、列表
5.1 无序列表 ul(unordered list)-li(list item)
属性：type 属性值：disc circle square
<ul>
<li></li>
<li></li>
<li></li>
</ul>
5.2 有序列表ol(ordered list)-li(list item)
type = 1 | a | A | i | I 列表类型
reversed 倒序
start = 数字 从第几个开始
<ol>
<li></li>
<li></li>
<li></li>
</ol>
5.3 自定义列表dl(definition list)
- 定义项1
- 描述项11
- 描述项12
- 描述项1n
- 定义项m
- 描述项m1
- 描述项m2
- 描述项2n
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址
六、表格 table
<table>
<caption></caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<th span="4"></th>
</tfoot>
</table>
6.1 table 属性
- border 设置表格的边框
- bordercolor 设置表格边框的颜色
- height、width
- bgcolor、background
- cellspacing 设置表格边框与边框之间的距离
- cellpadding 设置表格内容与边框的距离
- summary 设置描述信息，便于搜索引擎的准确快速的搜索到此表格
- align 设置表格的整体水平对齐方式
6.1 caption
表格自带的标题标签，标准规定只能添加一个标题，且caption标签只能写在table起始标签的后面；但是谷歌浏览器写多个caption标签也可以显示
6.2 分割区域
- thead
- tfoot
- tbody
注意使用顺序
thead标签定义表格的表头。该标签用于组合HTML表格的表头内容;thead元素应该与tbody和tfoot元素结合起来使用。tbody元素用于对 HTML表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素,它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签
6.3 tr
每个表格中有几对tr标签，就代表这个表格有几行
- height、bgcolor、background
- align 设置文本的水平对齐方式
- valign 设置文本的垂直对齐方式
6.4 td(th)
每一行中有几对td就代表这一行有几个单元格
- height、width、bgcolor、background、align、valign
- colspan 列合并，左右单元格进行合并，属性值是数字
- rowspan 行合并，上下单元格进行合并，属性值是数字
6.5 添加标题的方式
- 使用标题标签
- 使用caption标签
七、表单form
表单是用来收集用户数据并将其提交到相应的地址
7.1 form 属性
- action 数据提交地址
- method 数据提交方式 get 和 post提交两种
get和post区别：
get提交地址栏：file:///F:/P1阶段课件/H1805A班/20180628/表单/think.php?username=张三&password=12345&sex=male&com-lan=C%2B%2B&com-lan=Js
post提交地址栏:file:///F:/P1阶段课件/H1805A班/20180628/表单/think.php
get提交安全性比较低，传输数据比较小，效率高，链接可分享
post提交与之相反 - target 页面打开方式
7.2 控件input中元素(type属性值)
- text 文本输入框
- password 密码输入框
- placeholder 设置文本提示信息
- autofocus 自动获取焦点
- disabled 禁用
- readonly 只读
- radio 单选框
- checkbox 复选框
- checked 设置默认被选中
注意：name值要一致，这样才能保证选项是同一个题干下面的
- checked 设置默认被选中
- 日期和时间 date month week time datetime-local
- color 颜色域
- number 数字
- step
- file 文件域
- image 图像域
- src 添加图片路径
提示：图像域具有和submit相同的提交功能
- src 添加图片路径
- range 进度条
- max
- value
- tel 电话
- maxlength 设置最大长度
- email 邮箱
这里，email具有自动验证的功能，包含@ - url 网址
这里，url具有自动验证的功能，符合http:// 或者 https:// 这两种协议 - search 搜索
- button 普通按钮
- submit 提交按钮
- reset 重置按钮
7.3 控件textarea 文本域，多行文本框
- cols 列宽（文本域的宽度）
- rows 行高（文本域的高度）
7.4 控件select 下拉菜单
- select-option语法：
<select name="" multiple size="2">
<option value="">菜单项1</option>
<option selected value="">菜单项2</option>
...
<option value="">菜单项n</option>
</select>
- selected 默认被选中的菜单项
- multiple 设置可以被多选
- size 设置显示的项数
7.5 控件与表单进行关联的方式
- 控件在表单内
- 控件在表单外 控件的form属性与表单form标签的属性id值一致
7.6 label标签
向控件定义标注（标记）。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
7.7 label标签与控件的关联方式
- 控件在label标签内
- 控件在label标签外 label标签的for属性需要和所关联控件的id属性值一致
7.8 拓展
- fieldset 元素可将表单内的相关元素分组。
- legend 元素为 fieldset 元素定义标题（同：caption）