HTML入门到进阶
- 1、网页的基本概念
- 2、常用浏览器以及内核
- 3、web标准
- 4、HTML标签(上)
- 5、HTML语法规范
- 6、HTML基本结构标签
- 7、DOCTYPE和lang以及字符集的作用
- 8、标签语义
- 9、标题标签
- 10、段落标签和换行标签
- 11、文本格式化标签
- 12、div和span标签
- 13、图像标签(上)
- 14、图像标签(下)
- 15、图像标签注意点
- 16、目录文件夹和根目录
- 17、相对路径(上)
- 18、相对路径(下)
- 19、绝对路径
- 20、链接标签(上)
- 21、链接标签(下)
- 22、锚点链接
- 23、注释标签和特殊字符
- 24、HTML标签(下)导读
- 25、有序列表
- 26、自定义列表
- 27、列表总结
- 28、表格标签基本使用
- 29、表头单元格标签
- 30、表格相关属性(了解)
- 31、表格结构标签
- 32、合并单元格
- 33、表格总结
- 34、无序列表
- 35、表单使用场景及分类
- 36、label标签
- 37、select下拉表单
- 38、textarea文本域标签
- 39、表单元素几点总结
- 40、表单域
- 41、input之type属性文本框和密码框
- 42、input之type属性单选按钮和复选框
- 43、input之name和value属性
- 44、学会查阅文档
1、网页的基本概念
网页 : 网页是构成网站的基本元素,它通常是由图片、链接、声音、文字、视频等元素组成。通常我们看到的网页,常以.htm或.html后缀结尾的文件,因此俗称HTML文件。
什么是HTML?
超文本标记语言,用来制作网页的一门语言,有标签组成的,比如:图片标签、链接标签、视频标签等
案例演示:记事本放图片
- 1)新建记事本
- 2)编写代码
- 3)修改后缀为html
- 4)展示效果,浏览器打开
2、常用浏览器以及内核
浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐、谷歌、Safari和Opera等。平时称为五大浏览器。
课外拓展:
查看浏览器的市场份额:http://tongji.baidu.com/data/broser
浏览器内核(渲染引擎):负责读取网页内容,整理信息,计算网页的显示方式并显示页面。
3、web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准集合。W3C(万联网联盟)是国际著名的标准化组织。
为什么需要Web标准?
浏览器不同,它们显示页面或者排版就有些差异。
Web标准的构成?(面试常考点)
答:主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
标准 | 说明 |
---|---|
结构 | 结构用于对网页元素进行整理和分类,现阶段主要学的是HTML |
表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS |
行为 | 行为是指网页模型的定义及交互的编写,现阶段主要学的是JavaScript |
4、HTML标签(上)
目标:
- 1)能够说出标签的书写注意事项;
- 2)能够写出HTML骨架标签;
- 3)能够写出超链接标签;
- 4)能够写出图片标签并说出alt和title的区别;
- 5)能够说出相对路径的三种形式
目录:
- 1、HTML语法规范
- 2、HTML基本结构标签
- 3、开发工具
- 4、HTML常用标签
- 5、HTML中的注释和特殊字符
5、HTML语法规范
- 1)HTML标签是由尖括号包围的关键词。
- 2)HTML标签通常是成对出现的,我们称为双标签。
- 3)有些特殊的标签必须是单个标签,例如:<br />,我们称为单标签。
标签关系:
双标签可以分为两类:包含关系和并列关系。
6、HTML基本结构标签
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 页面中最大的标签,我们称之为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容,页面内容,基本都是放到body里 |
案例:02-HTML.html
<html>
<head>
<title>第一个页面</title>
</head>
<body>
主体内容:加油学习
</body>
</html>
7、DOCTYPE和lang以及字符集的作用
<!DOCTYPE>:作用就是告诉浏览器使用那种HTML版本来显示网页的。
<!DOCTYPE html>
这句代码的意思是:当前页面采取的是HTML5版本来显示网页。
注意:
- 1)<!DOCTYPE>声明位于文档中的最前面的位置,处于标签之前;
- 2)<!DOCTYPE>不是一个HTML标签,他就是文档类型声明标签。
<html lang=“en”>:用来定义当前文档的显示的语言。
- 1)en定义语言为英语;
- 2)zh-CN定义语言为中文
<meta charset=“UTF-8”>:字符集是多个字符的集合,以便计算机能够识别和存储各种文字。
其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。
如果不写,可能出现乱码!
8、标签语义
标签语义:简单的来说就是标签的含义。
根据标签语义,在合适的地方给一个合理的标签,可以让页面结构更清晰。
9、标题标签
标题标签:<h1>-<h6>(重要)
标签语义:作为标题使用,并且依据重要性递减。
特点:
- 1)加了标题的文字会变的加粗,字号也会依次变大;
- 2)一个标题独占一行;
案例:03-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,
nav,
section {
/* 使各个浏览器支持 */
display: block;
width: 100%;
height: 120%;
background-color: red;
}
</style>
</head>
<body>
<header>测试header</header>
<nav>测试nav</nav>
<section>测试section</section>
</body>
</html>
10、段落标签和换行标签
段落标签:<p></p>
换行标签:<br />
11、文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或下划线等,这时需要用到HTML中的文本格式化标签,使得文字以特殊的方式显示。
标签语义:突出重点,比普通文字更重要。
<strong>加粗方式一</strong>
<b>加粗方式二</b>
<em>倾斜的文字方式一</em>
<i>倾斜的文字方式二</i>
<del>删除线方式一</del>
<s>删除线方式二</s>
<u>下划线方式一</u>
<ins>下划线方式二</ins>
12、div和span标签
<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。
div是division的缩写,表示分割、分区。sapn意为跨度、跨距。
特点:
- 1)div标签用来布局,一行只能放一个div。大盒子
- 2)span标签用来布局,一行可以放多个。小盒子
13、图像标签(上)
在HTML中,<img>标签用于定义HTML页面中的图像。
单词image的缩写,意为图像。
<img src="图像URL“ />
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
所谓属性:简单理解就是这个图像标签的特性。
<h4>图像标签的使用:</h4>
<img src=“1.jpg” />
<h4>alt替换文本 图像显示不出来的时候用文字替换</h4>
<img src=“11.jpg” alt=“图片” />
<h4>title提示文本 鼠标放到图像上,提示的文字:</h4>
<img src=“1.jpg” alt=“图片” title=“提示” />
14、图像标签(下)
<h4>width 给图像设置宽度:</h4>
<img src=“1.jpg” alt=“图片” title=“提示” width=“500” />
<h4>height 给图像设置高度:</h4>
<img src=“1.jpg” alt=“图片” title=“提示” height=“100” />
<h4>border 给图像设置边框:</h4>
<img src=“1.jpg” alt=“图片” title=“提示” width=“500” border=“15” />
15、图像标签注意点
图像标签注意点:
- 1)图像标签可以有多个属性,必须写在标签名的后面;
- 2)属性之间不分先后顺序,标签名与属性、属性与属性之间以空格分开;
- 3)属性采取键值对的格式,即key="value"的格式,属性=“属性值”;
考点:
1、请说出图像标签那个属性是必须要写的?
2、请说出图像标签中alt和title的区别?
16、目录文件夹和根目录
目录文件夹:就是普通文件夹,里面只不过存放了我们作页面所需要的相关素材,比如html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录,最外面的一层。
应用:Vscode中文件选择打开文件夹
17、相对路径(上)
相对路径: 以引用文件所在位置为参考基础,而建立的目录路径。
这里简单的来说,图片相对于HTML页面的位置。
<h4>同一级路径:</h4>
<img src=“2.jpg” />
<h4>下一级路径:</h4>
<img src=“images/1.jpg” />
18、相对路径(下)
<h4>上一级路径:</h4>
<img src="…/2.jpg " />
19、绝对路径
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
<img src="F:\HTML学习\入门课程\2.jpg" />
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
20、链接标签(上)
<a href="跳转目标“ target=“目标窗口的弹出方式”>文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其中_self为默认值,_blank在新窗口中打开 |
链接分类:外部链接、
<h4>1、外部链接</h4>
<a href=“http://www.baidu.com” target="_blank">百度</a>
百度
21、链接标签(下)
1、外部链接,如 百度
2、内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可。
3、空连接:如果当时没有确定的链接目标时。
4、下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
5、网页元素链接:在网页中的各种网页元素,如文本。图像。音频、视频等都可以添加超链接。
<h4>2、内部链接</h4>
<a href=“02-HTML.html”>内部链接</a>
<h4>3、空连接</h4>
<a href="#">空连接</a>
<h4>4、下载链接</h4>
<a href=“2.rar”>下载链接</a>
<h4>5、网页元素链接</h4>
<a href=“http://www.baidu.com”><img src=“2.jpg” /></a>
22、锚点链接
6、锚点链接:点击链接,可以快速定位到页面中的某个位置
- 1)在链接文本的href属性中,设置属性值为#名字的形式,如:<a href="#two">第2集</a>
- 2)找到目标位置标签后,里面添加一个id属性=刚才的名字,如:<h3 id=“two”>第2集介绍</h3>
23、注释标签和特殊字符
注释:<!-- 我想喝奶茶 --> 快捷键:ctrl+/
特殊字符:
1、空格符:
2、小于号:<
3、大于号:>
重点记住:空格、大于号、小于号就行,其余的查文档即可。
24、HTML标签(下)导读
目标:
1、能够书写表格
2、能够写出无序列表
3、能够写出3~4个常用input表单类型
4、能够写出下拉列表表单
5、能够使用表单单元实现注册页面
6、能够独立查阅W3C文档
目录:
1)表格标签
2)列表标签
3)表单标签
4)综合案例
5)查阅文档
25、有序列表
在HTML中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用<li>标签来定义列表项。
基本语法格式:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
.....
</ol>
要点:
- 1)<ol> </ol>中只能嵌套<li></li>,直接在<ol> </ol>标签中输入其他标签或文字的做法是不被允许的;
- 2)<li>与</li>之间相当于一个容器,可以容纳所有的元素;
- 3)有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。
26、自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
在HTML标签中,
-
标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
语法格式:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
要点:
1) <dl> </dl>里面只能包含 <dt>和<dd>;
2)<dt>和 <dd>个数没有限制,经常是一个<dt>对应多个<dd>;属于并列关系。
27、列表总结
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序标签 | 里面只能包含li,没有顺序,使用较多,li里面可以包含任何标签 |
<ol></ol> | 有序标签 | 里面只能包含li,有顺序,使用相对较少,li里面可以包含任何标签 |
<dl></dl> | 自定义列表 | 里面只能包含dt和dd,dd和dt里面可以放任何标签 |
1、学会什么时候用无序列表,什么时候用自定义列表?
2、无序列表和自定义列表代码怎么写?
3、列表布局在学习CSS后再来完成。
28、表格标签基本使用
表格的作用:用于显示、展示数据的,可读性好。
表格的基本语法:
<table>
<tr>
<td>单元格内的文字</td>
....
</tr>
...
</table>
1、<table></table>是用于定义表格的标签;
2、<tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中;
3、<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>中;
4、字母td是指表格数据(table data),即数据单元格的内容。
29、表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)
基本格式:
<table>
<tr>
<th>姓名</th>
....
</tr>
...
</table>
30、表格相关属性(了解)
表格标签这部分属性我们实际开发我们不常用,后面通过CSS来设置。
属性名 | 属性值 | 描述 |
---|---|---|
align | left。right、center | 规定表格相对周围元素的对其方式 |
border | 1或“” | 规定表格单元是否拥有边框,默认为“”,表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认为1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
注意:这些属性名都放在table里!
31、表格结构标签
在表格标签中,分别用:<thead>标签表示表格的头部区域,<tbody>标签表示表格的主体区域。这样就可以更好的分清表格结构。
小结:
1、<thead></thead>:用于定义表格的头部,<thead>内部必须拥有标签,一般位于第一行。
2、<tbody></tbody>:用于定义表格的主体,主要用于放数据。
3、以上标签都是放在<table></table>标签中。
32、合并单元格
合并单元格方式:
跨行合并:rowspan=”合并单元格的个数“
跨列合并:colspan=“合并单元格的个数”
合并单元格三部曲:
1)先确定是跨行还是跨列合并;
2)找到目标单元格,写上合并方式=合并的单元格的数量。如:<td colspan=“2”></td>;
3)删除多余的单元格。
33、表格总结
1、表格的相关标签
2、表格的相关属性
3、合并单元格
34、无序列表
表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是整齐、有序,它作为布局会更加自由和方便。
根据场景不同,列表分为三大类:有序列表、无序列表和自定义列表
无序列表的基本格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
要点:
- 1)无序列表的各个列表项之间没有顺序级别之分,是并列的;
- 2)<ul></ul>中只能嵌套<li></li>,直接在<ul></uL>标签中输入其他标签或文字的做法是不被允许的;
- 3)<li>与</li>之间相当于一个容器,可以容纳所有的元素;
35、表单使用场景及分类
1、为什么需要表单? 目的是为了收集用户信息。
2、表单的组成 一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息三个部分组成。
36、label标签
<label>标签为input元素定义标注(标签)。
<label>标签用于绑定一个表单元格,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
语法:
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心:<label>标签的for属性应当与相关元素的id属性相同。
示例:
<label for="text">用户名:</label><input type="text" id="text" />
37、select下拉表单
使用场景:在页面中,如果由多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表。
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
....
</select>
要点:
- 1、<select>中至少包含一对<option>;
- 2、在<option>中定义selected="selected"时,当前项即为默认选中项。
示例:
<select>
<option>湖南</option>
<option>湖北</option>
<option selected="selected">河南</option>
<option>河北</option>
<option>上海</option>
</select>
38、textarea文本域标签
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
在表单元素中,<textarea>标签是用于定义多行文本输入的控件。
语法:
<textarea rows="3" cols="20">
文本内容
</textarea>
39、表单元素几点总结
1、表单元素我们学习了三大组input输入表单元素 select下拉表单元素 textarea文本域表单元素;
2、这三组表单元素都应该包含在from表单域里面,并且有name属性;
示例:
<from>
<input type="text" name="username">
<select name="happy">
<option>上海</option>
</select>
<textarea name="message"></textarea>
</from>
3、有三个名字非常相似的标签:
1)表单域 from 使用场景:提交区域内表单元素给后台服务器
2)文件域 file 是input type属性值 使用场景:上传文件
3)文本域 textarea 使用场景:可以输入多行文字,比如留言板,网站介绍等…
4、我们当前阶段不需要提交表单元素,所以我们只负责表单元素的外观形态即可。
40、表单域
表单域是一个包含表单元素的区域。
在HTML标签中,<from>标签用于定义表单域,以实现用户信息的收集和传递。
<from>会把它范围内的表单元素信息提交给服务器。
语法格式:
<from action="url地址“ method=”提交方式“ name=”表单域名称“>
各种表单元素控件
</from>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
41、input之type属性文本框和密码框
语法格式:
<input type="属性值" />
1)<input />标签是单标签;
2)type属性设置不同的属性值用来指定不同的控件类型;
type属性的属性值及其描述如下:
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码。 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20字节 |
示例:
<from>
用户名:<input type="text" /> <br /> 密码:
<input type="password" />
</from>
42、input之type属性单选按钮和复选框
示例:
<from>
性别:<input type="radio" />男 <input type="radio" />女 <br /> 爱好:
<input type="checkbox">学习<input type="checkbox">打游戏
</from>
43、input之name和value属性
示例1:
<from>
<!-- text 文本框 用户可以在里面输入任何文字 -->
用户名:<input type="text" name="username"> <br />
<!-- password 密码框 用户看不见输入的密码 -->
密码:<input type="password" name="pwd"> <br />
<!-- radio 单选按钮 可以实现多选 -->
<!-- name 是表单元素的名字 这里性别单选按钮必须有相同的名字name才能实现多选一 -->
性别:男<input type="radio" name="sex">女<input type="radio" name="sex">
<!-- checkbox 复选框 可以实现多选 -->
爱好:学习<input type="checkbox" name="hobby">打游戏<input type="checkbox" name="hobby">
</from>
<input>表单元素:
除type属性外,<input>标签还有很多其他属性,其常用属性如下:
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
要点:
1)name和value是每个表单元素都有的属性值,主要给后台人员使用
2)name表单元素的名字,要求单选按钮和复选框要有相同的name值
3)checked属性主要针对于单选按钮和复选框,主要作用打开页面,就要可以默认选中某个表单元素
4)maxlength是用户可以在表单元素输入的最大字符数,一般较少使用
44、学会查阅文档
经常查阅文档是一个好习惯。
第一个建议:百度
第二个建议:W3C
第三个建议:MDN