html学习小结

 

一. 参考教程

菜鸟教程+阿西河前端教程（注意：两者的内容在基础知识的讲解上大同小异）

二. 知识点小结

1. 常用编辑器及浏览器

• 编辑器

编写前端脚本使用的编辑器为：VSCode、HBuilder X、Sublime。

注意：①以上编辑器与插件Emmet结合会提高工作效率（但个人目前还未涉及其的使用）；

           ② 对html文档进行注释的快捷键是：Ctrl+/。

• 浏览器

常见的浏览器包括：Google、Internet Explorer(IE)、Safari、Firefox。浏览器可以读取HTML文档，并将其正常显示在网页上。

注：查看知名网站的html脚本逻辑——打开网页，鼠标右键，选择“查看源文件”或“查看源代码”。

2. 基础概念解释

• HTML及HTML文档

HTML(HyperText Markup Language，超文本标记语言)，用于创建Web页面。其中，Web页面也叫作HTML文档。HTML文档的后缀名可以是.html，也可以是.htm（推荐使用.html），主要由HTML元素定义。

• HTML文档的基本构成

   
            
            
        内容
    
                  
    
        内容             
    

• HTML元素与HTML标签

通常情况下，HTML元素与HTML标签无区别的。如果要准确的划分，那么如下所示，元素里包含着标签。

                            
                  
  内容  
       

   

• HTML与XHTML

HTML(1991年)---->HTML+（1993年）---->HTML2.0---->HTML3.2---->HTML4.01---->XHTML1.0---->HTML5（2012年）----->XHTML5（2013年）

HTML4.01与XHTML几乎相同，但XHTML结合了XML与HTML的长处，是更严格的可拓展HTML，以XML格式编写。最早在2001年1月发布，并遵循W3C标准。

• 在HTML文档中引用CSS的三种方式

① 内联样式

② 内部样式

③ 外部样式

• 块级元素与内联元素

块级元素（block-level）: 通常会以新行来开始（或结束）。如：div。

内联元素（inline）：通常不会以新行来开始。如：span——为文档中的部分行内元素设置样式属性。

• html中的颜色的写法

①三位数：#RGB

②六位数：#RRGGBB

• URL的理解

URL(Uniform Resource Locators，统一资源定位器)。Web浏览器通过URL向Web服务器发送页面请求。

3. HTML标签的理解

HTML标签的理解（推荐小写），所有的属性都添加引号

序号	标签名称	个人理解	需要注意的地方
1	meta	对关键词、网站作者、修改内容等其他与网页相关的描述。	位于元素内； 属于单标签，没有结束标签； 虽然不会在网页上显示出来，但会被浏览器解析； 中文网页，使用charset="utf-8"或者charset="gbk"进行声明。
2	pre	预格式文本。即，在html文档上手动敲的怎样的格式，网页上便会保持其格式的不变	不会自动删除手动敲在HTML文档中的空格
3	p	定义一个段落，可以将文本变得模块化
4	h1到h6	类似于word中的一级标题到六级标题的标题样式	浏览器会自动的在标题的前后添加空行
5	b和strong	类似于word中文本的加粗	推荐使用文字，理由：更语义化。
6	i和em	类似于word中文本的倾斜	推荐使用文字，理由：上同。
7	sub	类似于word中文本的下标
8	sup	类似于word中文本的上标
9	big	类似于word中文本的放大
10	small	类似于word中文本的缩小
11	del	类似于word中文本的将文字删除	将需要删除的文字添加删除线
12	font	通过设置size属性等于具体的数字的方式，对文本进行放大或缩小，即，设置不同字号的文字。	双标签 在css中，可通过 font-size:具体的值 的方法对文字进行放大或缩小
13	ins	类似于word中文本的将文字插入	插入的文字会自带下划线
14	address	在HTML文档中，地址有特定的格式
15	a	类似于word中文本的插入超链接	配合属性href和属性target（共4个值）一起使用； 点击前文字的样式：蓝色+下划线——点击时文字的样式：红色+下划线——点击后文字的样式：紫色+下划线（注意：上面的样子后期可通过CSS更改。如：没有下划线的链接可以使用属性——style=“text-decoration:none;”进行实现。） 文档内的跳转效果，可通过id进行定位。
16	img	类似于word中文本的插入图片	配合属性src、border、width、height、alt、style的使用； 加载图片是需要耗费时间的，尽量不要加载太多的图片；
17	br	在同一个段落下进行换行，不产生新的段落	推荐写法：
18	hr	插入一条水平线	推荐写法：
19	abbr	缩写字母的全拼显示	缩写字母 缩写字母 当鼠标移动到缩写文本上时，会有该缩写字母的全称显示；当鼠标移出缩写文本时，缩写字母的全称消失。
20	ado	段落文字反方向输出	X3X2X1
21	q	短引用。	xxxxxxxx:xxxxx 在段落中，将部分文字添加双引号
22	blockquote	长引用。	xxxxxxxx: xxxxx 在段落中，不会为部分文字添加双引号，而是会将部分文字进行缩进
23	&		它的字符实体是——&
24	‘’		它的字符实体是——"
25	¥		它的字符实体是——¥
26	©	版权	它的字符实体是——© URL编码——%A9
27	®	注册商标	它的字符实体是——® URL编码——%AE
28	M	商标	它的字符实体是——™
29	x	乘号	它的字符实体是——×
30		除号	它的字符实体是——÷
31	table	表格	配合tr标签（行）、td标签（列）、th标签（表头）、caption标签（表题）使用 配合属性：cellpadding=“数字”——单元格的大小   配合属性：cellspacing="0"——表格边框变成一条实线 配合属性：border="1"——边框 colspan=“2”：跨2行 rowspan=“2”：跨2列
32	list	列表	有序列表。可以使用属性start=“当前序号”，使得序号从当前序号开始 无序列表 自定义列表 一旦列表进行嵌套，无序列表的形状便会自动不一样
33	div	类似于一个容器	对html文档进行布局 与CSS结合，对大的内容部分进行设置 由div包含的内容区域前后会有折行
34	form	表单	配合属性action、name、method 配合标签input。针对input，涉及到属性type的选项。如text——文本输入框——默认宽度20个字符；password——密码输入框；radio——单选；checkbox——多选；submit——提交按钮；reset——重置按钮；button——普通按钮； 下拉列表——select单标签和option双标签； 通过selected属性对初始化选框内容进行设定。 文本框——textarea标签，配合rows和cols的值。但不需要form标签。 将表单内容使用大框框起来——fieldset标签配合legend标签
35	iframe	框架	配合属性width、height、frameborder、name，可以将别的网页在提前设定好的iframe窗口处打开
36	script	定义客户端的脚本，如JS	如果浏览器不支持脚本的话，便会支持noscript中的脚本

三. 待解决问题

① VSCode/HBuilder X与Emmet插件的结合未使用。

②折行是什么意思？

③不熟悉的标签：

内容
内容
内容
内容
内容
内容

内容

  

xxxxx
 
XXXX 

标签button与type="button"间的关系与区别？