1. 网页
1.1基本知识
- 网站是指英特网中根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合
- 网页时网站中的‘一页’，通常是HTML格式的文
件，要通过浏览器来阅读
3. 网页时构成网站的基本元素，它通常是有图片，文字，声音，视频等元素组成。通常看到的网页都是以.html,活着.html为后缀结尾的文件，英雌将其俗称为HTML文件
4. HTML指的是超文本标记语言（Hyper Text Mardkup Language） ,它用来描述网页的一种语言
5. HTML是一种标记语言(markup language),而不是编程语言
6. 标记语言是一套标记标签(markuptag)
7. 网页是有网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的
8. 目前国内浏览器都会采用Webkit/Blink内核，如360，UC，QQ,搜狗8
1.2 Web 标准
Web标准是有W3C组织和其它标准化组织指定的一系列标准的集合.W3C(万维网联盟)是国际最著名的标准化组织（万维网 - MBA智库百科 (mbalib.com)）
- Web标准可以让不同开发人员写出的页面更标准、更统一外.
- 优点
- Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜寻引擎搜索
- 降低网站流量费用
- 使网站耿易于维护
- 提高页面浏览速度
- 结构
- 主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面
- Web标准最佳体验方案：结构、样式、行为相分离 == 》即，将不同文件写到对应的文件里面
- 优点
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素 进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现用于设置网页网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学到是javascript |
2.HTML
2.1 语法规范
2.1.1 基本语法规范
1. HTML 标签是由尖括号包围的关键词，例如<html>,
2. HTML标签通常是成对出现的，例如<html>和</html>，一般成为双标签,双标签的第一个标签是开始标签，第二个标签是结束标签
3. 有些特殊的标签必须是单个标签(极少情况)，例如<br/> ,我们称为单标签
2.1.2 标签关系
双标签关系有包含关系和并列关系
<html ><head> </head><body> </body>
</html>
2.2 结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置i的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放在body中 |
2.3 网页开发工具
推荐使用VScode
- 标签
- 文档类型声明标签，作用就是告诉浏览器浏览器使用哪种HTML版本版本来显示网页
<!DOCTYPE html> 表明当前页面采取的是HTML5版本来显示网页
- lang 语言
- 用来定义当前文档显示的语言
- en 定义语言为英文，zh-CN定义语言为中文== 》定义en 或者zh-CN 都可以显示英文和中文
- charset 字符集2
- 字符集(Character set ) 是多个字符的集合，以便于计算机能够识别和存储各种文字
- 在
<head>标签内，可以通过标签的charset 属性来规定html 文档使用奶中字符编码 - charset 常用的有：GB2312,BIG5,GBK和UTF-8，其中UTF-8也被称为万国码，基本上包含了所有国家需要用到的字符
<meta charset="UTF-8">
2.4 常用标签
2.4.1 标题标签
为了使网页更具有语义化，一般会在页面使用标题标签。HTML提供了6个等级的网页标题‘即<h1>--<h6>
- head 意为头部,标题
- 特点：加了标题的文字会变的加粗，字号回一次变大；且一个标题独占一行
<!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>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>
2.4.2 段落标签和换行标签
2.4.2.1 段落标签
网页中，文字需要有条理的显示出来，因此需要分段限制，在HTML标签中<p> 标签用于定义段落，即可以将整个网页分为若干个段落
- paeagraph;P意为者段落
- 标签语义：将HTML文档分割为若干个段落
- 文本在一个段落中或根据浏览器窗口的大小自动换行
<p>野原新之助是一个年仅5岁，正在幼儿园上学的小男孩。他家住在春日部的市郊，家里有爸爸妈妈，还有一条名叫小白的小狗，随后又加入了新的成员妹妹野原向日葵。</p><p>作者从日常生活中取材，叙述了野原新之助在日常生活中所发生的故事。故事中的主人公野原新之助是一个有点调皮的小孩，他喜欢别出心裁、富于幻想 。</p>
2.4.2.2 换行标签
一个段落中的文字从左到右依次排列，直到浏览器窗口的右端，才会进行换行。若希望某段文字强制换行显示，需使用换行符 <br/>
- break;b:意为打断、换行
- 标签语义:强制换行
- 特点：
- 单标签，该标签只是简单的开始新的一行，和段落有一定的区别，区别在于段落换行之间有一定的垂直间距
<p>野原新之助是一个年仅5岁，正在幼儿园上学的小男孩。他家住在春日部的市郊，家里有爸爸妈妈，还有一条名叫小白的小狗，<br/>随后又加入了新的成员妹妹野原向日葵。</p><p>作者从日常生活中取材，叙述了野原新之助在日常生活中所发生的故事。故事中的主人公野原新之助是一个有点调皮的小孩，他喜欢别出心裁、富于幻想 。</p>
2.4.3 文本格式化标签
- 在网页中，有时候需要将文字设置为 粗体，斜体 或 下划线的效果，这是需要用到HTML中的文本格式标准化标签
- 标签语义：突出重要性，比普通文字更重要
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> | 推荐使用<strong>标签加粗，语义更明确 |
| 倾斜 | <em></em> 或<i></i> | 推荐使用<em>标签加粗，语义更明确 |
| 删除线 | <del></del>或<s></s> | 推荐使用<del>标签加粗，语义更明确 |
| 下划线 | <ins></ins>或<u></u> | 推荐使用<ins><标签加粗，语义更明确 |
我是<strong>加粗</strong>的文字<br />我是<b>加粗</b>的文字<br />我是<em>倾斜</em>的文字<br />我是<i>倾斜</i>的文字<br />我是<ins>下划线</ins>的文字<br />我是<u>下划线</u>的文字<br />我是<del>拥有删除线</del>的文字<br />我是<s>拥有删除线</s>的文字<br />
2.4.4 <div>和<span>标签
| 盒子标签 | 特点 |
|---|---|
| <div></div> | 标签用于布局，一行只能放一个盒子 |
| <span></span> | 标签用于布局，一行可以放多个盒子 |
<div>你好，2.14</div>
123
<span>嗨嗨，2.14</span>
123
2.4.5 图像标签及路径
2.4.5.1 图像标签
- 标签用于定义HTML页面中的图像
<img src="图像URL" alt="嗨嗨"/>
- image: img为其缩写，意为图像
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文字，图片不能显示时，显示文字 |
| title | 文本 | 提示文本，鼠标放在图像上，显示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框相同 |
<!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>
</head>
<body><img src="照片URL" width="1000px" alt="这是我们的照片" title="13165照片">
</body>
</html>
2.4.5.2 路径
相对路径
- 以应用文件所在的位置作为参考基础，而创建出的目录路径
- 这里就是图片相对于html所在的路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级别路径 | 图像文件位于HTML文件的同一级，如<img src=“1.jpg”> | |
| 下一级别路径 | / | 图像文件位于HTML文件的下一级，如<img src=“ii/1.jpg”> |
| 上一级别路径 | …/ | 图像文件位于HTML文件的下一级，如<img src=“…/1.jpg”> |
绝对路径
- 指目录下的绝对路径，直接到达目标位置，通常是从盘符开始的路径
- 例如：“E:\LibnarY\MQTTCoon”，或者完整的网页地址
2.4.6 链接标签
-
html 中<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
-
语法格式
<a hred="跳转目标" ，target-"目标窗口的弹出方式"> 文本或者图像</a>
anchor:意为锚
| 属性 | 作用 |
|---|---|
| href | 用于指定连接目标的url地址，(必须属性)当为标签应用href属性，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值为当前页面打开._blank为新窗口打开方式 |
2.4.6.1 链接分类
1. 外部链接：例如<a href="https://www.baidu.com">百度</a>
2. 内部链接：网站内部页面之间的相互链接，直接链接到内部页面的名称即可，例如<a hred="index.html"> 首页</a>
3. 空链接：如果当时没有确定的连接项目时，<a href="#">首页</a>
4. 下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件
5. 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加链接
6. 锚点链接：点击链接，可以快速定位到页面中的某个位置1. 在链接文本之后的href属性中，设置属性值的名字为#名字的形式，如<a href="#two">第二季</a>2. 找到目标位置标签，里面添加一个id属性=上面的名字，如<h3 id="two">第二季介绍</h3>
2.4.6.1 特殊字符
2.4.7 表格标签
- 表格主要用于显示、展示数据，因此它可以让数据显示的非常规范，可读性非常好。
<table><tr><td>单元格中的文字</td></tr>
</table>- <table></table>是用于定义表格的标签
- <tr><\tr>标签用于定义表格中的行，必须嵌套在<table><\table>标签中
- <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
- 字母td指表格数据(table data),即数据单元的内容
<!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>
</head>
<body><table border="1"><tr><th>水果名</th><th>售价(元/斤)</th></tr><tr><td>苹果</td><td>5</td></tr></table>
</body>
</html>
2.4.7.1 表头标签
- <th> 标签表示HTML表格的表头部分(table head 的缩写)
2.4.7.2 表格属性
- 实际开发中CSS 会使用
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,right,center | 规定表格相对周围元素的对齐方式 |
| border | 1 或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素值 |
| width | 像素值或百分比 | 规定表格的 |
案例–小说排行榜
- 建议将图片换成icon图标
<!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>小说排行榜</title>
</head>
<body><table align="center" border="1" cellspacing="0" width="500s" height="249"><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr><tr align="center"><td>1</td><td>鬼吹灯</td><td><img src="image/up.png" height="28px"></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr align="center"><td>1</td><td>盗墓笔记</td><td><img src="image/down.png" height="28px"></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr> <tr align="center"><td>1</td><td>西游记·</td><td><img src="image/up.png" height="28px"></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr> <tr align="center"><td>1</td><td>东游记</td><td><img src="image/down.png" height="28px"></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr> </table>
</body>
</html>
2.4.7.3 表格结构标签
一般将表格划分为两大块，表格头部和表格主体两大部分
- <thead></thead>:用于定义表格的头部， <thead>内部必须有<tr>标签，一般是位于第一行
- <tbody></tbody>:用于定义表格的主体，主要用于存放数据本体
以上都是放在table中
<!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, initialscale=1.0"><title>小说排行榜</title>
</head>
<body><table align="center" border="1" cellspacing="0" width="500s" height="249"><!-- 表格头部 --><thead><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><!-- 表格主体 --><tbody><tr align="center"><td>1</td><td>鬼吹灯</td><td><img src="image/up.png" height="15px"></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr align="center"><td>2</td><td>盗墓笔记</td><td><img src="image/down.png" height="28px"></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr> <tr align="center"><td>3</td><td>西游记·</td><td><img src="image/up.png" height="28px"></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr> <tr align="center"><td>4</td><td>东游记</td><td><img src="image/down.png" height="28px"></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr> </tbody></table>
</body>
</html>
2.4.7.4 合并单元格
-
合并单元格的方式
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=”合并单元格的个数"
-
合并单元格三部曲
- 确定是跨行还是跨列合并
- 找到目标单元格，写上合并方式=合并的单元格的数量。比如：<td colspan=“2”> </td>
- 删除多余的单元格.
<!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>合并单元格</title>
</head>
<body><table align="center" border="1" cellspacing="0" width="500s" height="249"><tr><td></td><td colspan="2"></td><!-- <td></td> --></tr><tr><td></td><td rowspan="2"></td><td></td></tr><tr><td></td><!-- <td></td> --><td></td></tr></table>
</body>
</html>
2.4.8 列表标签
- 用于布局
无序列表
ul 标签标识html页面中项目的无序列表，一般会以项目符号呈现列表项，二列表项使用li标签定义
- 无序列表的各个列表项之间没有顺序级别之分，都是并列的
- ul标签只能嵌套li标签，在ul标签中直接输入其他标签和文字的做法是不被允许的
- li相当于一个容器可以存储所有内容
- 无序列表会带有自己的样式属性，但在实际使用时，通常使用css来进行设置
<ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li>
</ul>
有序列表
- 有序列表和无序列表的内容基本一致，只是将ul修改为ol
自定义列表
- dl 标签用于定义描述列表；dt(定义项目)和dd（描述项目/名字）则时一起使用
- dl 中只能存放dt和dd ，且数量没有限制
- dt和dd 之间时兄弟的关系
<body><dl><dt>关注我们 </dt><dd>新浪微博</dd><dd>联系我们</dd></dl>
</body>
总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| ul | 无序标签 | 里面只能包含li，没有顺序，使用较多且li中可以包含任何的标签 |
| ol | 有序标签 | 里面只能包含li ,有顺序，使用较少，且均可以包含任何的标签 |
| dl | 自定义列表 | 里面只能包含dt和dd ,dt和dd可以包含任何的标签 |
2.4.9 表单标签
- 用户收集用户信息
2.4.9.1 表单域
- 表单域是一个包含表单元速的区域
- from 标签可以用于定义表单域，以实现用户信息的收集和传递
- from 会把它范围内的表单元素提交给服务器
<form action="url地址" method="提交方法" name="表单域的名称">表单元素控件</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于接收并处理表单数据的服务器程序的url地址 |
| method | post/get | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
2.4.9.2 表单控件
input 表单元素
| 属性值 | 描述 | |
|---|---|---|
| button | 用于定义按钮(多数情况下，可用于javascript 启动脚本) | |
| checkbox | 用于定义复选框 | |
| file | 用于定义输入字段和"浏览"按钮，供文件上传 | |
| hidden | 定义输入的隐藏字段 | |
| image | 定义图片形式的提交按钮 | |
| password | 定义密码字段，该字段中的字符被掩码 | |
| radio | 定义单选按钮 | |
| reset | 定义重置按钮，用于清楚表单中的数据 | |
| submit | 定义提交按钮，用于提交表单中的数据，并发送给服务器 | |
| test | 定义单行的输入字段，用户可以输入文本，默认字符20个宽度 |
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 用户自己定义 | 定义input 元素的名称 |
| value | 用户自己定义 | 定义input 元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字符的最大长度 |
- name 和value 时每个表单元都要有的属性值，主要共给后台成员使用
- name 表单元素的名字，要求单选按钮和复选框要相同的name值
- checked 主要用于单选和复选按钮，启动页面时，就选中有对应元素的值
<form>用户：<input type="text" name="username" placeholder="请输入用户名"><br />密码：<input type="password" name="password"><br />性别：男<input type="radio" name="sex" value="0" checked> 女<input type="radio" value="1" name="sex"><br />爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox" name="hobby"><input type="submit" value="提交"><br /><input type="reset" value="重置"></form>```##### label 标签
1. lable 标签是为input的标签做批注的
2. label 标签用于绑定一个表单元素，当点击label标签内地文本时，浏览器就会自动将焦点移到对应的表单元素上，来增加用户体验
##### select 标签
1. select 标签至少包含一对option
2. 在option中定义 selected="selected"时，即为默认选项
```html
<select name="location" id="location"><option>选项1</option><option>选项2</option>
</select>
textera 标签
- 用于输入大量信息，可以使用文本域即定义多行文本输入
<textarea rows="5" cols="50">文本内容</textarea>
2.4.9.3 提示信息
2.5 综合案例(HTML)
- 表格标签
- 表单标签
<!DOCTYPE html>
<html lang="charset">
<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>
</head>
<body><h3>青春不常在,抓紧谈恋爱</h3><form ><table style="width: 400px;"><!-- 性别 --><tr ><td><label>性别:</label></td> <td><input type="radio" name="sex" id="male"><label for="male" >男</label><input type="radio" name="sex" id="female"><label for="female">女</label></td></tr><!-- 所在地区 --><tr><td><label for="locate">所在地区</label></td><td><input type="text" name="location" id="locate"></td></tr><!-- 生日 --><tr><td><label>生日</label></td><td><select><option >-- 请选择年--</option><option >2020</option></select><select><option >-- 请选择月--</option><option >-- 1--</option></select> <select><option >-- 请选择日--</option><option >1</option></select></td></tr><!-- 婚姻状况 --><tr><td><label>婚姻状况</label></td><td><input type="radio" name="statue" value="0" id="no" checked> <label for="no">未婚</label><input type="radio" name="statue" value="1" id="yew"><label for="yew">已婚</label><input type="radio" name="statue" id="yn" value="2"><label for="yn">已婚</label></td></tr><!-- 学历 --><tr><td><label for="degree">学历</label></td><td><input type="text" name="degree" id="degree" ></td></tr><!-- 喜欢的类型 --><tr><td><label >喜欢的类型</label></td><td><input type="checkbox" name="love" >可爱的<input type="checkbox" name="love" >小鲜肉<input type="checkbox" name="love" >老腊肉<input type="checkbox" name="love" >都喜欢</td></tr><tr><td><label for="selfIntroduce" >自我介绍</label></td><!-- 自我介绍 --><td><textarea cols="10" rows="5" id="selfIntroduce"> 自我介绍</textarea> </td></tr><tr><td></td><td><input type="submit" value="注册"> </td></tr><tr><td></td><td><input type="radio" id="accept" checked><label for="accept">我同意注册条框和会加入标准 </label></td></tr><tr><td></td><td><a href=""> 我是会员，立即登录</a> </td></tr><tr><td></td><td><h5>我承诺</h5><ul><li>年满18,单身</li><li>抱着严谨的态度</li><li>真诚的寻找另一半</li></ul></td></tr></table></form><br/>
</body>
</html>
.
