1000字范文 > 【前端基础篇】快速学习HTML常用标签和属性

【前端基础篇】快速学习HTML常用标签和属性

时间：2022-06-04 14:47:14

一、前奏

学习方法：

整体原则：复习、学习、练习、预习

网上找资料找练习作业、整理笔记、反复加强代码训练

HTML5+CSS3系列课程

携程网首页-移动端

响应式布局实战之微加建站

校园官网考试实战项目

常用开发工具：

Notepad++、Editplus、Hbuilder、IntelliJ IDEA、WebStorm

常用的浏览器

IE: trident内核

IE浏览器是世界上使用最广泛的浏览器，它由微软公公司开发，预装在windows操作系统中。所以我们装完windows系统之后就会有IE浏览器。目前最新的IE浏览器的版本是IE 11.Firefox：gecko内核

火狐浏览器是一个开源的浏览器，由Mozilla资金会和开源开发者一起开发。由于是开源的，所以它集成了很多小插件，开源拓展很多功能。发布于2002年，它也是世界上使用率前五的浏览器。Safari:webkit内核

Safari浏览器由苹果公司开发，它也是使用的比较广泛的浏览器之一。Safari预装在苹果操作系统当中，从首发测试以来到现在已经11个年头。是苹果系统的专属浏览器，当然现在其他的操作系统也能装Safari。Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

opera浏览器是由挪威一家软件公司开发，该浏览器创始于1995。目前其最新版本是opera 20.他有着快速小巧的特点，还有绿色版的，属于轻灵的浏览器。Chrome:基于webkit

Chrome浏览器由谷歌公司开发，测试版本在发布。

虽说是比较年轻的浏览器，但是却以良好的稳定性，快速，安全性获得使用者的亲睐。号称全世界用户体验最好的浏览器

二、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——10月28日，W3C推荐标准

2.4 什么是Html?

Hyper Text Markup Language,超文本标记型语言，是一种标记语言，它是制作网页的基础语言，主要用于超文本中内容的显示方式。它不需要编译，可以直接由浏览器执行。

超文本：标记：“标记”是一些符号，用来区分文档中的不同部分。也被称作“标签” 单标记只有结束标记，如<br > <br />强制换行<hr> <hr />水平线双标记分为开始标记和结束标记，如<p>...</p>（虽然不是所有的开始标签都必须有结束标签，但是建议最好有，使得网页更易于阅读和修改）HTML标记不区分大小写，建议使用小写所有标签都是放在<>里标签可以互相合理嵌套语言：

2.5 文件和文件夹的命名规范

由字母、数字、下划线构成、且不以数字开头

不建议使用中文

2.6 Html标签的属性和属性值

属性：标签的特征

属性值：为标签的特征所赋的值

语法：<标记属性名 = “属性值”> 内容</标记>

三、Html的嵌套原则

3.1 Html中元素的分类

块状元素block

内联元素(行内元素)inline

内联块状元素inline-block

3.2 块元素的三级分类

一级元素

body、head二级元素

a.子一级元素必须是指定元素的二级元素 ul、ol子一级元素必须是lidl：子一级元素必须是dt和ddtable：子一级元素必须是caption、thead、tbody、tfoot，再子一级是tr，最后是td、th。b.完全可以自由嵌套的元素 div、li、dd、form、td 三级元素

不可以自由嵌套的元素，该元素内部只能嵌套行内元素 h1-h6、p、dt

3.3 元素的嵌套原则

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：块级元素不能放在<p>里面：有几个特殊的块级元素只能包含内联元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p、dtli 内可以包含 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标签scriptbody主体标签背景属性 bgcolormeta元信息标签设置编码、文档描述、关键字、重定向等等(详见w3c)

4.2 标题标签及属性 h1-h6

语法：标题标签 n代表1-6

属性： align 属性值： left center right

特点：h1-h6字体逐渐变大，默认加粗效果，独立占有一行（块状元素特点）

4.3 段落标签及属性 p

语法：<p>段落</p>

属性： align 属性值： left center right justify(分散对齐)

特点：元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定

4.4 图像标记及属性 img

语法：<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 规定被下载的超链接目标

<a download="filename">filename规定作为文件名来使用的文本,可以省略

超链接对象：文本、图像、空连接、锚点链接

链接到不同页面：

链接到同一个页面的不同部分：设置锚点

4.6 水平线标记以及属性 hr

语法：<hr />

属性：\

size 水平线的厚度width 水平线的宽度color 水平线的颜色align 水平线对齐方式，属性值 left center right

4.7 其它常用标签的介绍(了解)

<br />强制换行（Shift+Enter）

<sup></sup>上标

<sub></sub>下标

<b></b>标签(加粗)

<strong></strong>标签（加强调，效果加粗）

<i></i>标签（斜体）

<em></em>标签（作用强调，效果斜体）

<u></u>标签（下划线）

4.8 HTML里面常用的特殊符号（详见附件）

&nbsp 空格

&copy 版权符号

&gt 大于号

&lt 小于号

&trade 商标

&reg 已注册

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)

<dl><dt>定义项1</dt><dd>描述项11</dd><dd>描述项12</dd><dd>描述项1n</dd><dt>定义项m</dt><dd>描述项m1</dd><dd>描述项m2</dd><dd>描述项2n</dd></dl>

数字化管理平台

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、widthbgcolor、backgroundcellspacing 设置表格边框与边框之间的距离cellpadding 设置表格内容与边框的距离summary 设置描述信息，便于搜索引擎的准确快速的搜索到此表格align 设置表格的整体水平对齐方式

6.1 caption

表格自带的标题标签，标准规定只能添加一个标题，且caption标签只能写在table起始标签的后面；但是谷歌浏览器写多个caption标签也可以显示

6.2 分割区域

theadtfoottbody

注意使用顺序

thead标签定义表格的表头。该标签用于组合HTML表格的表头内容;thead元素应该与tbody和tfoot元素结合起来使用。tbody元素用于对 HTML表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素,它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签