前端学习
关于HTML
1.HTML指的是超文本标记语言，他是用来描述网页的一种语言
HTML不是一种编辑语言，而是一种标记语言
标记语言是一套标记标签
超文本
1、它可以加入图片、声音、动画、多媒体等超越了文本限制的内容
2、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接，即超级链接文本。
浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、360极速浏览器 |
| firefox | Gecko | 火狐浏览器 |
| Safari | Webkit | 苹果浏览器 |
| chrome | Blink | chrome、opera浏览器 |
国内浏览器都会采用Webkit/Blink内核。
Web标准
Web标准是由W3C组织和其他标准化之指定的一系列标准的集合。W3C是国际最著名的标准化组织。
为什么需要Web标准
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点:
更好的兼容性
- 浏览器兼容
- 向前兼容
更好的语义
更简洁的代码
更强的功能
Web标准的构成
主要包括结构、样式和行为三个方面，主要对应HTML、CSS、Javascript。
Web标准提出的最佳体验方案：结构、样式、行为相分离，即分别写入不同的文件中。
HTML标签
1、HTML语法规范
1.基本概述
1.HTML标签是由尖括号包围的关键词,例如。
2.HTML标签通常是成对出现的,例妇和 , 我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
3.有些特殊的标签必须是单个标签(极少情况),我们称为单标签。例如
2.标签关系
双标签关系可以分为包含关系和并列关系。
包含关系
<head>
<title></title>
</head>
并列关系
<head></head>
<body></body>
2、HTML基本结构标签
每个网页都会有一个基本的结构标签(也称为骨架标签) , 面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
| 标签名 | 定义 | 说明 |
|---|---|---|
| HTML标签 | 页面中最大的标签,我们称为根标签 | |
| 文档的头部 | 注意在head标签中我们必须要设置的标签是title | |
| 文档的标题 | 让页面拥有一个属于自己的网页标题 | |
| 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
<html>
<head>
<title>My page</title>
</head>
<body>
Hello!HTML!
</body>
</html>
开发工具
HBuilder、WebStorm、VSCode等
以vscode为例，创建一个html文件
VSCode的使用
1.双击打开软件。
2.新建文件(Ctrl+N )。
3.保存( Ctrl+ S ),注意移动要保存为.html文件
4.Ctrl+加号键, Ctrl +减号键可以放大缩小视图
5.生成页面骨架结构。输入! 按下Tab键即可生成。
6.利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击”Open In Default Browser”。
文档类型声明标
文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。
< !DOCTYPE html>
这句代码的意思是:当前页面采取的是HTML5版本来显示网页。
- 声明位于文档中的最前面的位置,处于标签之前。
- 这并不是一个 HTML标签,它就是文档类型声明标签。
lang语言种类
<html lang="zh-CN">
用来定义当前文档显示的语言。
- en定义语言为英语
- zh-CN定义语言为中文
简单来说,定义为en就是英文网页,定义为zh-CN就是中文网页。但是值得注意的是，文档显示时，即便定义语言为en，也可以显示中文；同理，定义语言为zh-CN时，也可以显示英文。
字符集
字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在
charset常用的值有: GB2312、BIG5、 GBK和UTF-8 ,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。
3、HTML常用标签
1.语义标签
标题标签<h1>-<h6>
<h1>标题</h1>
HTML提供了6个等级的网页标题，作为标题使用。
特点：
-加了标题的文字会变的加粗，一个标题独占一行。
-从h1到h6，字号由大到小依次递减，并且依据重要性递减。
段落标签<p>
<p>段落</p>
在网页中，段落标签可以将网页分为若干个段落，使得文字更加有条理地分段显示，
特点：
-文本在一个段落中会根据浏览器窗口的大小自动换行。
-段落和段落之间会有较大的间距。
换行标签<br/>
在HTML中，一个段落中的文字从左到右依次排列，直到浏览器窗口的右端，才会自动换行，。只有使用换行标签才能使文本强制换行。
特点：
-换行标签是个单标签。
-换行标签只是开始新的一行，不会产生段落和段落之间的间距。
2.文本格式化标签
文本格式化标签，使文字以特殊的方式显示。
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>或者<b></b> |
| 倾斜 | <em></em>或者<i></i> |
| 删除线 | <del></del>或者<s></s> |
| 下划线 | <ins></ins>或者<u></u> |
3.<div>和<span>标签
<div>是<span>没有语义的，它们代表的是用来装内容的盒子。
div 是division的缩写，表示分割、分区；span 意为跨度、跨距。
其语法如下：
<div>分区盒子</div><span>跨度盒子</span>
特点：
1、<div> 标签用来布局，但是一般情况下一行只能放一个<div>。
2、<span> 标签用来布局，一行上可以多个<span>。
4.图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src="图像URL"/>
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示时出现来代替图像的文字 |
| title | 文本 | 提示文本。鼠标悬浮在图像上时显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点:
①图像标签可以拥有多个属性,必须写在标签名的后面。
②属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式,即key= “value” 的格式,属性=“属性值”。
5.路径
目录文件夹和根目录
实际工作中,我们需要对大量文件进行系统地管理,因此我们需要一个文件夹来管理他们。
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文 件、图片等。
根目录:开目录文件夹的第一层就是根目录。
路径
页面中需要添加许多的元素，而要查找这些元素，就需要采用“路径”的方式来指定图像文件 的位置。
路径可分为“相对路径”和“绝对路径”。
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，即引用文件相对于
HTML文件的位置。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级， src=”image.jpg” | |
| 下一级路径 | / | 图像文件位于HTML文件下一级， src=”images/image.jpg” |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级， src=”../image.jpg” |
绝对路径：指目录下的绝对位置，通常是从盘符开始的路径。
例如，D:\web\images\image.jpg
注意：相对路径中每一级之间用”/“隔开，而绝对路径中每一级之间用”\“隔开。
另外，也可以用完整的网络地址当做路径。
<!-- 网络图片的地址 --><img src="http://image.thepaper.cn/wap/image/12/583/251.jpg"><!-- 本地图片绝对路径 -->
<img src="C:\Users\Administrator\Desktop\图片\1gif.gif" title='本地图片' alt='当资源加载失败时候，会显示我'>
<!-- 本地图片相对路径 --><img src="img/image.jpg">
6.超链接标签
1、链接的语法格式
<a href="目标链接" target="目标窗口的弹出方式">文本或图像</a>
单词anchor的缩写，意思是“锚”。
两个属性的作用如下：
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址。（必须属性） 当标签有了href 属性时，便具有了超链接功能。 |
| target | 用于指定链接页面的打开方式。 _self为默认值，_blank为在新窗口中打开方式。 |
2、链接的类别
1.外部链接：<a href="http//www.baidu.com">百度</a>。
2.内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
3.空链接: 如果当时没有确定链接目标时, <a href="#">空链接</a>。
4.下载链接: 如果href里面地址是一个文件或者压缩包， 会下载这个文件。
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
6.锚点链接:我们点击链接,可以快速定位到页面中的某个位置。
●在链接文本的href属性中,设置属性值为#铭字的形式,如<a href=" #two">第2集</a>
●找到目标位置标签,面添加-个id属性=刚才的名字,如: <h3 id= "two" >第2集介绍</h3>
7.表格标签
1.表格的主要作用
表格主要用于显示展示数据,因为它可以让数据显示的非常的规整,可读性非常好。
同时，前端开发人员也经常用表格来布局，以使得排版更加整齐。
2.表格的基本语法
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
1.<table></table>是用来定义表格的标签。
2.<tr></tr>标签用来定义表格中的行，必须嵌套在<table> </table>标签中。
3.<td> </td>朋定义表格中的元格,必须嵌套在<tr> </tr>标签中。
4.字母td指表格数据( table data ) ,即数据单元格的内容。
3.表头单元格标签
- 一般表头单元格位于表格的第一行或第一 列 ,表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)。
<table> <tr> <th>单元格内的文字</th> ... </tr> ... </table>
4.表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式。 |
| border | 像素值或”” | 规定表格是否拥有边框，默认为””，即没有边框。 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的间隔，默认1像素。 |
| cellspacing | 像素值 | 规定单元格之间的间隔，默认2像素。 |
| width/height | 像素值或百分比 | 规定表格的宽度和高度。 |
5.表格结构标签
使用场景:因为表格可能很长，为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
在表格标签中,分别用
<thead>标签表格的头部区域、<tbody>标签表格的主体区域。<thead>内部必须拥有<tr>标签，一般是位于第一行。<tbody>用于定义表格的主题，主要用于放数据本体。<table><thead> <tr> <th>单元格内的文字</th> ... </tr></thead><tbody> ...</tbody> </table>
6.合并单元格
跨行合并：rowspan=“合并单元格的个数”
最上侧单元格为目标单元格，写合并代码。
跨列合并：colspan=“合并单元格的个数”
最左侧单元格为目标单元格，写合并代码。
1、先确定是跨行还是跨列合并。
2、找到目标单元格.写上合并方式=合并的单元格数量。<td colspan= "2”></td>.
3、删除多余的单元格。
8.列表标签
- 列表用来布局，列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。
- 根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。
1.无序列表
<ul>HTML页面中项目的无序列表,一般会以项目符号 呈现列表项,而列表项使用 <li> 标签定义
无序列表的基本语法格式如下:
<ul><li>列表项1</li><li>列表项2</li><1i>列表项3</1i>...</ul>
1.无序列表的各个列表项之间没有顺序级别之分,是并列的。
2.<ul></ul>中只能嵌套 <li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
3.
2.有序列表
有序列表即为有排列顺序的列表,賂个列表项会按照-定的顺序排列定义。
在HTML标签中, <ol>标签用于定义有序列表,列表排序以数字来示,并且使用<li> 标签来定义列表项。
有序列表的基本语法格式如下:
<ol> <li>列表项1</1i> <1i>列表项2</1i> <li>列表项3</li> ...</ol>
3.自定义列表
自定义列表常用语对术语进行解释和描述，定义列表的列表项前没有任何项目符号。
在HTML标签中, <dI> 标签用于定义描述列表(或定义列表) , 该标签会与<dt> (定义项目/名字)和<dd> (描述每一个项目/名字) 一起使用。
其基本语法如下:
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd></d1>
<dl></dl>里面只能包含<dt>、<dd><dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>.
9.表单标签
一个完整的表单通常由表单域、表单控件(表单元素)和提示信息3个部分组成。
表单域
表单域是一个包含表单元素的区域。
在HTML标签中，<form> 标签用于定义表单域,以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
<form action="url地址”method="提交方式" name="表单域名称"> 表单控件</form>
在书写表单时，需要先用一个<form>声明一个表单域。
表单控件
1.<input>表单元素
<input>标签用于收集用户信息。
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（例如 文本、复选框、掩码后的文本控件、单选按钮、按钮等）
| type标签值 | 意义 |
|---|---|
| text | 明文输入 |
| password | 密文输入 |
| file | 文件传输 |
| button | 普通按钮 |
| submit | 会将表单内容交给action或者后端 |
| reset | 重置按钮 |
| image | 图片按钮 |
| checkbox | 复选框 |
| radio | 单选按钮 |
| hidden | 隐藏字段 |
submit属性
提交按钮会把表单数据发送到服务器，可通过value值改变提交按钮里的值。
<input type="submit" value="提交">另外，在
<form>里面增加action和method属性。<form action="xxx.php”method="get" >这样，点击submit之后，表单数据就会被提交到这个页面。
reset属性
重置按钮会将表单中的数据重置，例如常规表单中的“重新填写”按钮。
<input type="reset" value="重新填写">点击重置按钮，可以将表单中的数据还原至初始状态。
button属性
普通按钮，不会提交数据，但是可以结合js触发某个功能。
<input type="button" value="发送短信验证码">file属性
文件域，可以将本地文件上传至表单。
<input type="file" value="选择文件">
除了type属性值之外，表单控件还有很多属性
| 属性 | 意义 |
|---|---|
| name | 必须存在，作为提交数据的key |
| value | 代表值（写了就是默认值） |
| checked | 设置默认选择项 |
| maxlength | 设置输入字段中字符的最大长度 |
name属性
比如在
<input>的type值为radio时，要给同一类的单选按钮增加相同的属性以性别为例
性别： 男<input type="radio" name="sex"> 女<input type="radio" name="sex">
这样才能实现在性别这一类选项中只能单选的效果，否则仍可多选，单选按钮就没有意义了。
value属性
value中的值会只显示在输入框内；而单选按钮和复选按钮等的值在被用户选择后会被返回到后台，可以被后台人员查看。
而根据要求，一般所有的表单控件都需要有name和value属性。
checked属性
性别： 男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked="checked">主要针对单选和复选按钮，可以设置默认选择项。
maxlength属性
设置输入字段中字符的最大长度，比如设置“9”，便只能输入9个字符，超过长度便不能再输入。
用户：<input type="text" name="user" maxlength="9">
2.<label>标签
标注标签，可以用于绑定一个表单元素当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上。
<label for="sex">男</label><input type="radio" name="sex id="sex" />
<label>标签的for属性应当与相关元素的id属性相同。
即点击某个文本就可以代替点击按钮的功能，可以避免按钮太小使得用户难以点到。
3.<select>标签
下拉标签，在页面中,如果有多个选项让用户选择,并且想要节约页面空间时, 我们可以使用<select>标签控件定义下拉列表。
籍贯：<select> <option>北京</option> <option>上海</option> <option>成都</option></select>
注：1. <select>中至少包含一对<option>。
2.在<option>中定义selected =”selected “时，当前项即为默认选中项。
4.<textarea>标签
文本域标签，当用户输入内容较多的情况下,我们就不能使用文本框表单,此时我们可以使用<textarea> 标签。即用于定义多行文本输入的控件。常用于留言板和评论模块。
留言：<textarea row="2" cols="10"> 默认文字 </textarea>
注：1.通过<textarea>标签可以轻松地创建多行文本输入框。
2.cols= “每行中的字符数”, rows= “ 显示的行数”, 但在实际开发中一般不会使用，通常是用CSS来改变大小。
<body> <form action="" method="get"> 用户：<input type="text" name="user"><br> 密码：<input type="password" name="pwd"><br> 性别：<input type="radio" name="gender" value="1" checked>男 <input type="radio" name="gender" value="0" >女<br> 爱好：<input type="checkbox" name="like" value="2" checked>唱 <input type="checkbox" name="like" value="3">跳 <input type="checkbox" name="like" value="4">rap <input type="checkbox" name="like" value="5">篮球<br> 地址： <select name="address"> <option value="0">成都</option> <option value="1">北京</option> <option value="2" selected="">上海</option> </select><br> 自我介绍： <textarea name="info">我喜欢唱跳rap和篮球</textarea><br> 秘密：<input type="hidden" name="id" value="111122221"><br> <input type="submit" value="提交1"> <button>提交2</button> <input type="button" value="普通按钮"> <input type="reset" value="重置按钮"><br> <input type="image" value="图片按钮" src="image.jpg"> </form></body>
4、注释与特殊字符
1.注释
<!--注释语句-->
其快捷键为ctrl+/
注释标签里的内容是写给开发人员看的，是为了让其更好地阅读并理解代码的含义，并不会显示到页面当中。
2.特殊字符
在HTML页面中，一些特殊的符号无法被直接使用，此时应该采用以下的字符来替代。
