1 VScode的使用
VScode常用插件
- 中文汉化：
Chinese - 浏览器打开：
open in browser - 同步修改标签：
Auto Rename Tag - 炫酷敲代码：
Power Mode - 自动刷新：
live server
快速生成HTML文件
- 新建一个以.html为后缀名的文件
- 在英文状态下输入
!，然后回车或者Tab
<!--文档类型声明标签，告诉浏览器，用哪种html版本来显示我们的页面-->
<!DOCTYPE html>
<!--设置语言，en英文，zh-CN中文-->
<html lang="zh-CN">
<head>
<!--设置字符编码-->
<meta charset="UTF-8">
<!--移动端用到-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--网页标题-->
<title>Document</title>
<!--设置搜索关键词-->
<meta name='keywords' content="关键词,前端学习">
<!--添加页面描述-->
<meta name='description' content="页面描述">
</head>
<body>
</body>
2 HTML基础
2.1 html基础知识
Web前端结构
HTML（结构）CSS（表现）JavaScript（行为）
HTML是什么
HTML称为超文本标记语言，是一种规范和标准，它通过标记符号来标记要显示在网页中的各个部分。正因为有规则，浏览器才知道怎样去解读你的文件，但是需要注意的是，对不同的浏览器，对同一种标记符号可能会存在差异，因而可能会出现不同的显示效果，所以会出现兼容的问题。
HTML语法规范
html标签用尖括号<>把关键词包裹，如<p>- 标签基本是都是成对出现，由开始标签和结束标签组成，也叫双标签，如
<p>段落</p> - 还有一些标签比较特殊是单独出现的，叫单标签，也称为自闭合标签、空标签如
<input/>
标签关系
- 包含关系：
html与head和body - 并列关系：
head和body
HTML的基本结构
<html> <!--根元素-->
<head>
<!--头部-->
</head>
<body>
<!--可视区-->
</body>
</html>
2.2 html常用标签
<!--这是注释-->- 标题标签：
h1-h6，表现形式上都是加粗，字号由大到小，重要程度逐层递减 - 段落标签：
p - 换行标签：
br（单标签），<br /> - 大盒子标签：
div - 小盒子标签：
span - 图像标签：
img - 超链接标签：
a - 格式化标签：
- 加粗：
strong、b - 斜体：
em、i - 删除线：
del、s - 下划线：
ins、u
- 加粗：
- 预格式化标签（预先设置的格式）：
pre
2.3 html标签属性
-
标签的属性：属性提供了有关
HTML元素的更多的信息，用来描述某个特征和功能的，可分为内置属性和自定义属性。表现形式： 属性总是以name='value'的形式出现 -
注：
- 属性总是在
HTML元素的开始标签中规定（跟在关键词的后面） - 以键值对的形式出现
- 元素可以有多个属性，属性和属性之间至少要有一个空格
- 属性不分先后顺序
- 属性总是在
2.4 html路径
- 绝对路径：指目录下的绝对位置，可以直接找到目标位置，通常从磁盘开始的路径，即完整描述文件位置的路径为绝对路径。主要形式有：
- 网址：
https://www.baidu.com - 本地文件路径：
D:/web前端学习/biaoqian.html
- 网址：
- 相对路径：指由当前文件所在的路径引起其它文件的路径关系，（以当前的文件为参照物，去寻找其他文件的一种路径方式，在开发项目中经常使用）
- 同级目录：直接写文件名信息
- 下一级目录：
/imgs/1.jpg - 返回上一级目录：
../imgs/1.jpg - 返回多层上级目录：
../a/imgs/1.jpg
3 HTML标签分类
3.1 html标签分类
3.1.1 块级标签（block）
块级标签特点
-
会单独占据一行
-
元素的宽度，高度和行高可以设置的
-
支持所有的
css样式 -
如果元素的宽度不设置，其宽度会和父级的宽的一样，默认宽度为
100% -
块级标签默认的宽度为
0px，如果元素中有内容，则元素的高度就是内容的高度 -
如果块级元素里面有内容，也设置了高度，那么块级元素的高度一设置的高度为准
常见的块级标签
-
大盒子标签：
<div></div> -
段落标签：
<p></p> -
标题标签：
<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6> -
有序标签：
<ol></ol>；无序标签：<ul></ul>；列表说明：<dl></dl> -
表单标签：
<form></form> -
表格标签：
<table></table> -
水平线标签：
<hr></hr> -
格式预处理标签：
<pre></pre>
3.1.2 行内标签（inline）
行内标签(又称内敛标签或内联标签)的特点
- 不会独占一行，会和同属性的标签（行内标签）排在一起
- 标签的宽度和高度，
margin和padding的上下边距设置后无效，即使你设置了宽度和高度，margin和padding的上下边距值，对标签没有任何意义 - 标签内容决定标签的宽高
- 设置了标签的行高
line-height可以改变标签的高度 - 设置了标签的
margin和padding的左右边距可以改变标签的左右位置
常用的行内标签
-
小盒子标签
<span></span> -
超链接标签
<a> -
换行标签
<br> -
文字斜体标签
<i></i> -
文字加粗标签
<em></em><strong></strong> -
上标标签
<sub></sub>下标标签<sup></sup> -
<label></label>标签 -
代码块
<code></code>
3.1.3 内嵌块标签（inline-block）
内嵌块级标签的特点
- 不独占一行
- 元素的宽，高，行高，顶部和底部的边距都是可以设置的
常用的内嵌块标签有
- 图片标签
<img> - 文本输入标签
<input>
3.2 块级标签，行内标签，内敛标签之间的相互转换
在css样式中定义：
-
display属性规定元素应该生成的框的类型 -
display：none表示此元素不会被显示，鼠标滑动显示 -
display：block表示此元素将显示为块级元素 -
display：inline表示此元素将显示为内联元素 -
display：inline-block表示此元素将显示为行内块级元素
3.3 标签之间的嵌套规则
-
行内标签
<a>标签不能嵌套<a>标签 -
行内标签不能嵌套行内标签
-
行内标签不要嵌套块级标签
-
ol，ul直接子级一定是li标签
4 html常用标签详解
4.1 a链接标签详解
a标签常用的属性- 新窗口打开：
target="_blank" - 在当前窗口打开（默认值）：
target="_self"
- 新窗口打开：
a标签herf里面常用的几个值- 具体跳转的网址：
herf="http://www.baidu.com" - 刷新：
herf="" - 回到顶部：
herf="#" - 禁止跳转：
herf="JavaScript:;" - 锚点跳转：点击某个a标签的时候，可以跳转到相对应的模块
- 具体跳转的网址：
<h1 id="index">首页</h1>
<!--锚点跳转-->
<a herf="#index">首页</a>
<a herf="">刷新</a>
<a herf="#">回到顶部</a>
<a href="JavaScript:;">禁止跳转</a>
4.2 table表格标签详解
- 作用：展示数据增强可读性
- 结构：
thead：表头tbody：表内容tfoot：表尾
table基本语法
| 标签 | 说明 |
|---|---|
| table | 表格标签 |
| tr | 代表每一行 |
| td | 代表每一个单元格 |
| th | 表头标题 |
| caption | 表格标题 |
table相关属性
| 属性 | 说明 |
|---|---|
| align | 对齐方式：left,center,right |
| border | 边框，border=“1”、border="" |
| cellpadding | 内容到单元框的距离 |
| cellspacing | 单元格到单元格的距离 |
| colspan | 跨列，合并行 |
| rowspan | 跨行，合并列 |
| width | 宽度 |
| height | 高度 |
<table border="1" align="center" cellpadding="0" cellspacing="0" width="600" height="300">
<caption>课程表</caption>
<tbody>
<tr>
<td colspan="3">时间\日期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td colspan="2">9:30-10:15</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="2">10:25-11:10</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="8"> 休息 </td>
</tr>
<tr>
<td colspan="3">时间\日期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td colspan="2">9:30-10:15</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td colspan="2">10:25-11:10</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
</tbody>
4.3 列表标签详解
<h2>列表的理论基础</h2>
<!--列表主要用于布局，除此之外，只要是代表我们的列表板块都可以使用。-->
<!--有序列表-->
<ol>
<li>吃饭</li>
<li>吃饭</li>
<li>吃饭</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>睡觉</li>
<li>睡觉</li>
<li>睡觉</li>
</ul>
<!-- 自定义列表 用于页面的底部 -->
<dl>
<!-- 标题 -->
<dt>早餐</dt>
<!-- 对标题的描述 -->
<dd>牛奶</dd>
<dd>鸡蛋</dd>
<dd>再来一个鸡蛋</dd>
</dl>
<!-- 以上三大列表均是有固定格式的，ul和ol里面只能是li，但是li里面可以再放其它的标签，
dl里面只能是dt和dd，同理在dd和dt里面是允许放置其它的标签 -->
4.4 form表单标签详解
- 表单的作用：收集用户信息，便于以后的管理，用于登录注册等
- 表单的组成：表单域、表单元素、提示信息
- 表单域：包含表单的区域，在提交表单的时候，可以把这个区域的信息提交给后台
- 表元素：需要进行填写的内容
- 提示信息：用于提示填写的文字
| 属性 | 属性值 | 含义 |
|---|---|---|
| action | url | 提交信息的地址 |
| method | post\get | 提交信息的方法 |
| name | 名称 | 用于区分一个页面中多个表单域 |
input常用的表单类型
-
除了
input的type有一个button以外，还可以通过button来创建一个按钮如：<button>button标签创建的按钮</button>input标签不同的Type类型 type 含义 text 文本输入框 password 密码输入框 radio 单选 checkbox 多选 button 按钮 file 上传文件 date 日期 color 颜色面板 range 范围 number 数字 submit 提交 reset 重置 tel 电话号码
input常用的属性
| name | 定义表单元素的名称 |
|---|---|
| value | 规定input的值 |
| checkd | 默认被选中 |
| maxlength | 最大的字符长度 |
| placeholder | 描述输入字段预期值的提示信息 |
| autofoucs | 自动获取焦点，自动定位 |
单选按钮、复选框和文字关联功能的实现
- 对于同一组单选按钮，我们需要给他们起一个相同的
name值，这样浏览器就知道他们是一组了，即可实现单选功能。复选框同
<h1></h1>
<b>请选择您的性别</b>
男<input type="radio" name='sex'>
女<input type="radio" name='sex'>
- 文字关联功能的实现：为了增加用户的体验，我们会实现文字关联的功能，点击文字的时候就可以实现呢选中的
input，实现这个就可以用到我们的label标签 label功能：点击文字时，可以让和关联的表单元素被选中。通过label的for与input的id相匹配即可实现，如下：
<input type="radio" name='sex' id="man"> <label for="man">男</label>
<input type="radio" name='sex' id="woman"> <label for="woman">女</label>
<!-- 多选按钮 -->
请选择你的兴趣爱好：<br>
<input type="checkbox" checked name="hobby">game2
<input type="checkbox" name="hobby">game1
<input type="checkbox" checked name="hobby">game0
下拉框和文本域
select下拉框常用属性：selected默认被选中；disabled禁止选中textarea文本域：用于评论或留言；cols：单行显示的文字；rows：规定多少行
<h1>下拉框和文本域</h1>
<select name="" id="">
<option value="">重庆</option>
<option value="">北京</option>
<option value="" selected>上海</option>
<option value="" disabled>天津</option>
</select>
<textarea rows="10" cols="50"></textarea>
4.5 字符实体
在
HTML中不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体character entities，常用字符实体链接
2400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
