笔记来源：拉勾教育 - 大前端就业集训营
文章内容：学习过程中的笔记、感悟、经验
一、概述
1、前端三层技术
HTML：结构层，从语义的角度搭建网页结构
CSS：样式层，从美观的角度描述页面样式
JavaScript：行为层，从交互的角度描述页面行为
2、互联网运行过程
程序员将网页源文件上传到服务器进行存储，然后用户通过客户端发送http请求到服务器，服务器收到http请求后进行响应，将对应存储的相关文件通过http响应回传到用户本地客户端，最后通过客户端对网页文件进行渲染，显示最终用户看到的网页效果。
注： 其中客户端发送请求过程中，并不是只发送1条HTTP请求。
3、纯文本文件特点
（1）文件只能保存文本，不保存其他的格式或非文本内容，有利于网络传输。
（2）所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式。
（3）纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。
注： HTML、CSS、JavaScript都是纯文本格式文件
4、语义化网页的优势
（1）方便代码的阅读和后期维护
（2）便于浏览器或是网络爬虫更好地解析网站内容
（3）使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名
5、语言
<!-- 标签元素内容语言，对搜索引擎和浏览器有帮助，en英文或zh-cn中文任选其一写 -->
<html lang="en/zh-cn"></html>
6、字符集
<!-- UTF-8：国际通用字库，涵盖了所有人类的语言文字，一个汉字为3个字节大小。 -->
<!-- gbk：国标字库，是gb2312的扩展，增加了繁体字，一个汉字为2个字节大小。 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
注：
1、如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。
2、如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk。
3、meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码。
二、HTML基本语法
1、HTML元素
HTML元素： 从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。
根据标签内部存放内容不同，可将双标签分为两个级别
- 容器级：标签内部可以存放任意内容，包含容器级标签。比如h1，div等。
- 文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如p等。
元素特性： 元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。元素内容如果是文本，会出现空白折叠现象。
空白折叠现象： 所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示。
注： 单标签是不能添加元素内容的，可以称为空元素。
2、HTML标签
（1）<h1>-<h6> 标签都是双标签，且是容器级标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 下面是错误的示例 -->
<h1>
<h2>二级标题</h2>
</h1>
注： 标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。并且标题标签之间是不能互相嵌套，一个页面中也只会出现一个<h1>（<h1>内部的文字对于提高搜索引擎排名非常重要，为了防止作弊，如果一个页面出现多个<h1>，反而降低权重）。
（2）<p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等。
<p>这是第一个段落</p>
<p>这是第二个段落</p>
注：<p>标签的作用是给标签内部的内容添加一个完整段落的语义，每一对儿<p>标签内部的元素内容为一个完整的段落（但该标签不负责内容自动换行的样式）。
（3）文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本，bold |
| big | 定义大号字 |
| em | 定义着重文字，emphasis，自带斜体效果 |
| i | 定义斜体字，italic |
| small | 定义小号字 |
| strong | 定义加重语气，自带加粗效果 |
| sub | 定义下标字 |
| sup | 定义上标字 |
（4） <img>标签是单标签，作用是在指定的位置插入一张图片，常用属性如下：
src： 图片的路径（相对路径：同级查找、子级查找、上级查找；绝对路径：盘符出发、网址形式）
width： 图片的宽度；height： 图片的高度（只设置其中一个，另一个等比例变化）
border： 边框，值为边框线条宽度
title： 鼠标悬停时的提示文本
alt： 图片查找错误时，出现的替换文本（无错误不出现）
<img src="路径" width="宽度" height="高度" border="边框" title="提示文本" alt="替换文本">
<!-- 相对路径 -->
<!-- 同级查找 -->
<img src="文件名+后缀">
<!-- 子级查找 -->
<img src="文件夹/文件夹/文件名+后缀">
<!-- 上级查找 ../跳到上一级 -->
<img src="../../../文件夹/文件夹/文件名+后缀">
<!-- 绝对路径 不推荐使用 -->
<!-- 盘符出发 -->
<img src="D:/qianduan/lagou/html/images/smile02.png">
<!-- 网址形式 -->
<img src="图片网址">
<!-- 添加音频 -->
<audio src="media/snow.mp3" controls="controls"></audio>
<!-- 添加视频 -->
<video src="media/video.mp4" controls="controls"></video>
注： 尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化
（5）<a>为双标签，超级链接
href： 链接的目标地址，鼠标移上时会显示一个小手指针状态（如果只想要小手指这个状态，点击不跳转，值为javascript:; 或 javascript:void(0);）
target： _self：默认值，表示跳转的页面在当前窗口打开，_blank：表示跳转的页面在新窗口打开。
title： 鼠标悬停时的提示文本
<a href="http:www.baidu.com" target="_blank">跳转到百度/链接文本</a>
<!-- 链接文本不仅限于文字，也可以是图片或其他内容。 -->
<a href="12_image.html" title="点击跳转到源网页"><img src="smile01.jpg" alt=""></a>
页面内锚点跳转
先在目标位置找到一个标签，添加id属性，值唯一，然后在目标位置添加一个空的<a>标签，只设置一个name属性，值与id属性值相同且唯一。最后在需要点击的位置设置<a>标签，给a的href属性设置属性值为#加id属性值或者#加a的name属性值。
跨页面锚点跳转
先在目标位置找到一个标签，添加id属性，值唯一，然后在目标位置添加一个空的<a>标签，只设置一个name属性，值与id属性值相同且唯一。最后添加超级链接时href属性需要更改，属性值写为页面的路径#id属性值
（6）列表
<!-- 无序列表 -->
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
<!-- 有序列表 -->
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>主题</dt>
<dd>解释项</dd>
</dl>
注：
①<ul>内部只能嵌套<li>，<li>标签不能脱离<ul>单独书写
②<ol>内部只能嵌套<li>标签，而<li>不能脱离<ol>单独书写
③<li>标签是一个经典的容器级标签，内部可以放置任意内容
④<dl>内部只能嵌套<dt>和<dd>
⑤dt和dd标签也是容器级标签，内部可以放置任意内容
⑥配合着css布局效果，最好每个dl中只添加一组dt和dd，便于后期添加css样式
（7）布局（盒子）
<div>（大盒子）是双标签，是最经典的容器级标签，内部可以放置任意内容，多用于划分网页区域，进行结构布局。
<span>（小盒子）也是双标签，容器级标签，辅助进行局部调整。
（8）表格
一个简单的表格至少有三个标签组成，分别是<table>、<tr>行、<td>单元格标签；绘制表头，使用标签<th>，替换的是<td>的位置，默认文字显示粗体居中。
<!-- 解决表格线粗细不一致 <table border="0" cellspacing="1"> cellspacing:单元格空隙 在<head><style>table {background-color: #000;} td,th {background-color: #fff;}</style></head> -->
<!-- border-collapse: collapse 边框塌陷 避免出现双线边框:单元格之间有空隙 -->
<table border="1" style="border-collapse:collapse;">
<!-- 先进行分区 -->
<!-- 填充每个分区内容 -->
<!-- 合并单元格内容，进行单元格合并 -->
<!-- 表格标题 -->
<caption>标题</caption>
<!-- 表格头部 -->
<!-- colspan：左右跨列合并；rowspan：上下跨行合并 数字是几表示跨几行跨几列 -->
<thead>
<tr>
<th colspan="2">1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<!-- 表格页脚 -->
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
制作方法： 先书写所有行<tr>，再添加每一行的<td>或<th>单元格，划分单元格时，顶边对齐的属于同一行，将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。
（9）表单
一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成。
表单域： 相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。
使用<form>标签进行定义，它是双标签，容器级标签
| 属性名 | 属性值 | 描述 |
|---|---|---|
| action | url | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 自定义名称 | 规定表单的名称 |
提示信息： 说明性文字，提示用户进行填写和操作。
表单元素：
①<input>标签，单标签，常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| password | 密码输入框 | |
| radio | 单选框 | |
| CheckBox | 复选框 | |
| button | 普通按钮 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| image | 图像形式的按钮 | |
| file | 定义输入字段和“浏览按钮”，供文件上传 | |
| name | 用户自定义 | 控件名称 |
| value | 用户自定义 | 默认文本值 |
| size | 正整数 | 控件在页面中的显示宽度 |
| checked | checked | 定义选择控件默认被选中项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |
②文本域使用<textarea>标签定义，制作可以输入多行文本的区域
<!-- cols:每一行显示最大字节数，一个汉字两字节 rows:文本框显示最大行数，超出则隐藏且出现滚动条 -->
<textarea cols="30" rows="10">默认输入文字</textarea>
③下拉菜单
<select>：选择，表示定义下拉菜单整体结构。
<option>：选项，表示定义下拉菜单的每一项。
<optgroup>：对选项进行分组，双标签。
前两个标签都是双标签，文本级标签。
<form action="data.php" method="get" name="first">
<p>
用户名：<input type="text" value="请输入您的用户名">
</p>
<!-- 表示一个空格 -->
<p>
密 码：<input type="password">
</p>
<!-- checked属性,属性值如果设置为"checked"，表示该项默认被选中 -->
<p>
性别：<input type="radio" name="sex" checked="checked" id="nan"><label for="nan">男</label>
<input type="radio" name="sex" id="nv"> 女
</p>
<p>
爱好：
<label><input type="checkbox" name="hobby"> 绘画</label>
<input type="checkbox" name="hobby"> 音乐
<input type="checkbox" name="hobby" checked="checked"> 代码
</p>
<!-- multiple属性，可以决定是否可以选择多个文件 -->
<p>
文件：
<input type="file" multiple="multiple">
</p>
<p>
自我介绍：
<textarea name="" id="" cols="30" rows="10">请书写一个200字的自我介绍</textarea>
</p>
<!-- 设置selected属性，更改默认选中项 -->
<!-- label属性，表示给这一组选项添加一个标签名 -->
<p>
城市：
<select name="" id="">
<optgroup label="国内">
<option value="">北京</option>
<option value="">广州</option>
<option value="" selected="selected">上海</option>
<option value="">深圳</option>
</optgroup>
<optgroup label="国外">
<option value="">东京</option>
<option value="">伦敦</option>
<option value="">华盛顿</option>
<option value="">纽约</option>
</optgroup>
</select>
</p>
<!-- 如果是图片按钮的value，表示图片查找失败时的替换文本内容。 -->
<p>
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<input type="image" src="images/btn.png">
</p>
</form>
<label>标签的作用是帮表单元素定义标注（标记）,如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。
绑定方法：
①给表单元素设置id属性，然后将需要绑定的其他内容用<label>标签包裹，给<label>标签设置for属性，属性值为绑定的表单的id属性值。
②如果绑定内容和表单元素写在一起，可以化简绑定方法，直接使用<label>标签将绑定内容与表单元素一起进行嵌套。
（10）字符实体
在普通文字书写时，有一些特殊符号不能直接书写（例如连续的空格），或者符号具有特殊功能也不能直接书写（例如<>符号），可以使用一些HTML提前预留好的替换字符进行书写。
注： 实体名称对大小写敏感
可查询w3cschool手册查看字符实体
扫一扫
2391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
