学习笔记：
学习视频链接：https://www.bilibili.com/video/BV14J4114768?p=62&spm_id_from=pageDriver
1、 HTML 的局限性 ：
说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。
比如 ：
<h1>标题标签： 表明这是一个大标题
<p>段落标签： 表明这是一个段落，
<img>图片标签： 表明这儿有一个图片，
<a>链接标签： 表示此处有链接，可以从一个页面跳转到另一个页面
<br/>换行标签：break的缩写，打断，强制换行
2、 第一个html :
<html>
<head>
<title>第一个html</title>
</head>
<body>
键盘敲烂，工资过万
</body>
</html>
3、 文本格式化标签 :
| 语义 | 标签 |
|---|---|
| 加粗 | <strong> <strong>或者<b></b> |
| 倾斜 | <em></em>或者<i></i> |
| 删除线 | <del></del>或者<s></s> |
| 下划线 | <ins></ins>或者<u></u> |
4、 div和span:
<div>和<span>是没有语义的，他们就是一个盒子，用来装东西的
- div是division的缩写，表示分割，分区
- span表示跨度、跨距
特点
（1）div标签用来布局，一行只能放一个div。大盒子
（2）span标签用来布局，一行可以放多个span。小盒子
5、 图像标签img:
图像标签的属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像显示不出来时显示文字替换 |
| title | 文本 | 提示文本，鼠标放到图片上，显示的文字提示 |
| width | 像素 | 图像的宽度 |
| height | 像素 | 图像的高度 |
| border | 像素 | 图像的边框粗细 |
6、 超链接标签a:
（1）a是anthor的缩写，意为：锚
<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>
（2）两个属性的作用：
| 属性 | 作用 |
|---|---|
| href | 用于指定连接目标的url地址（必须属性），当为标签应用了href属性时，它就具有了超链接的功能 |
| target | 用于指定连接页面的打开方式，其中_self为默认值在当前窗口打开，_blank为在新窗口中打开 |
（3）在网页中的各种元素，文本、图像、表格、音频、视屏等都可以添加超链接
（4）锚点连接：点击连接，可以快速定位到页面中的某个位置
- 在链接文本的href属性中，设置属性值为"#hello",然后找到想到链接的div设置id =“hello”,即可实现快速定位
eg:点击定位实现
eg：<a href = "#hello">点击我</a>
<div id ="hello"></div>
7、 空格字符、小于\大于号字符 :
< >
8、 表格标签 table:
（1）表格是用来展示数据信息的
如图：一行三列的表格
<table> //用于定义表格的标签
<thead> //表示整个表头
<tr> //用于定义表格中的行
<th>姓名</th> //表格的表头部分，（table head）
<th>性别</th> //表格的表头部分，（table head）
</tr>
</thead>
<tbody>
<tr>
<td>妲己</td> //用于定义表格中的单元格（td指表格中的数据table data）
<td>女</td>
</tr>
</tbody>
</table>
如图所示：
| 姓名 | 性别 |
|---|---|
| 妲己 | 女 |
（2）表格属性（表格里面可以放任何元素，文字、链接、图片等）：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| align | left、center、right | 表格的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为"",表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为1像素 |
| width | 像素值或者百分比 | 规定表格的宽度 |
（3）合并单元格
- 跨行或跨列→找到目标单元格（写上合并方式）→删除多余的单元格
跨行合并（合并两行）
<td colspan = "2"></td>
跨列合并（合并两列）
<td rowspan = "2"></td>
9、 列表标签ul、ol、dl:
（1）列表是用来布局的：列表的最大特点是整齐、有序（包括无序列表、有序列表、自定义列表）
（2）无序列表
<ul> //<ul></ul>标签中只能嵌套<li></li>
<li>香蕉</li> //<li>与</li>之间相当于一个容器，可以容纳所有元素
<li>苹果</li>
...
</ul>
如图所示：
- 香蕉
- 苹果
（3）有序列表
<ol> //<ol></ol>标签中只能嵌套<li></li>
<li>香蕉</li> //<li>与</li>之间相当于一个容器，可以容纳所有元素
<li>苹果</li>
...
</ol>
如图所示：
1、香蕉
2、苹果
（3）自定义列表
<dl> //<dl></dl>标签中只能嵌套<dt>和</dd>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
如图所示：
帮助中心
账户管理
购物指南
订单操作
10、 表单标签form:
（1）使用表单的目的是为了收集用户信息
一个完整的表单通常由三部分组成：表单域、表单控件和提示信息
- 表单域（包含表单元素的区域，form会把它范围内的表单元素信息提交给服务器）
常用属性：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表的数据的服务器的url地址 |
| method | get或post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中多个表单域 |
- 表单控件（表单元素）
（1）input输入表单元素
（2）select下拉表单元素
（3）textarea文本域元素
input：
//<input/>是单标签
//type属性根据不同的属性值用于指定不同的控件类型
<input type = "属性值" />
（2）type属性：
| 属性值 | 说明 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| password | 定义密码字段 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的文本框，用户可在其中输入文本 |
| image | 定义图像形式的按钮 |
| file | 定义输入字段和浏览按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
（3）除type属性之外的其它属性：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| name | 用户自定义 | 定义input属性的名称 |
| value | 用户自定义 | 规定input元素的值，或提示应当输入信息 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
| 注意： | ||
| 要求单选按钮和复选框要有相同的name值 | ||
| checked属性主要针对与单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素 |
（4）label标签
用于绑定一个表单元素，当点击label标签内的文本是，浏览器会自动将光标转到对应的表单元素上，用来增加用户体验
eg：
<label for = "sex"></label>
<input type = "radio" name = "sex" id = "sex"/>
核心：label标签的for属性应当与相关元素的id属性相同
（5）下拉列表
select：
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
在option中定义selected = "selected"时，当前项即为默认选中项
（6）文本框
textarea：
- 使用场景：留言板、评论（可定义多行文字输入）
- 属性：cols = “每行中的字符数”,rows = “显示的行数”
732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
