文章目录
- HTML
- 标签
- 标签属性
- 基本结构
- 文档声明
- HTML标准结构
- HTML基础
- 排版标签
- 语义化标签
- 块级元素与行内元素
- 文本标签
- 图片标签
- 超链接
- 跳转到指定页面
- 跳转到文件
- 跳转到锚点
- 唤起指定应用
- 列表
- 有序列表
- 无序列表
- 列表嵌套
- 自定义列表
- 表格
- 基本结构
- 常用属性
- 跨行跨列
- 常用标签
- 表单
- 基本结构
- 常用表单控件
- 文本输入框
- 密码输入框
- 单选框
- 复选框
- 隐藏域
- 提交按钮
- 重置按钮
- 普通按钮
- 文本域
- 下拉框
- 禁用表单控件
- label标签
- 总体示例
- 表单总结
HTML
HTML，HyperText Markup Language，超文本标记语言。
标签
标签是HTML的基本组成单位。
标签分为：双标签和单标签.
标签名不区分大小写，但是推荐小写
双标签:
<标签名>标签体</标签名>
单标签:
<标签名>
标签属性
用于给标签提供附加属性。
可以写在起始标签或单标签中。
<标签名 属性名=“属性值”>
天下
有些特殊的属性，没有属性名，只有属性值。
注意点：
1、不同的标签，有不同的属性；也有一些通用属性
2、属性名、属性值不能乱写，是W3C规定好的
3、属性名、属性值，都不区分大小写，但推荐小写
4、标签中不要出现同名属性。
基本结构
想要呈现在网页中的内容写在body标签中。
head标签中的内容不会出现在网页中。
head标签中的title标签可以指定网页的标题。
<html>
<head>
<title>网页标题</title>
</head>
<body>
......
</body>
</html>
文档声明
作用：告诉浏览器当前网页的般般
写法： <!DOCTYPE html>
注意：文档声明必须在网页的第一行，且在HTML标签的外侧
HTML标准结构
标准结构如下：
<!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>
</body>
</html>
- 输入
!，然后回车，可以快速生成标准结构。 - 在存放代码的文件夹中，存放一个favicon.ico图片，可配置网站图标。
HTML基础
排版标签
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
| h1~h6 | 标题 | 双 |
| p | 段落 | 双 |
| div | 没有任何意义，用于整体布局 | 双 |
- h1 最好写一个， h2~h6 能适当多写。
- h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
- p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签
语义化标签
标签默认的效果不重要，语义最重要！
块级元素与行内元素
块级元素：独占一行（排版标签都是块级元素）
行内元素：不独占一行（比如input），其中只能写行内元素，但不能写块级元素。
<body>
<!-- 块级元素，独占一行 -->
<marquee>学习</marquee>
<!-- 行内元素，不独占一行-->
<input type="text">
<!-- 规则1：块级元素中能写行内元素、块级元素(几乎什么都能写)-->
<div>
<span>学习1</span>
<input type="text">
<div>学习2</div>
</div>
<!-- 规则2：行内元素中能写行内元素，不能写块级元素-->
<span>
<span>学习1</span>
<input type="text">
</span>
</body>
文本标签
用于包裹词汇、短语等。
通常写在排版标签中。
排版标签更宏观（大段文字），文本标签更微观（词汇、短语）。
文本标签通常是行内元素。
blockquote和address是块级元素，其他的是文本标签，都是行内元素。
图片标签
| 标签名 | 标签语义 | 常用属性 | 单双标签 |
|---|---|---|---|
| img | 图片 | src：图片路径，具体位置 alt：图片描述 width：图片宽度，像素，200px或200 height：图片高度 | 单 |
示例代码：
<body>
<img src="./11.PNG" width="100" alt="操作系统">
</body>
像素px是单位
尽量不要同时修改图片的宽和高。
alt属性的作用：
- 搜索引擎通过alt属性得知图片的内容。
- 当图片无法展示时，浏览器会呈现alt属性的值。
- 盲人阅读器会朗读alt属性的值。
src路径：
相对路径和绝对路径
图片格式：jpg、png、bmp、GIF、webp、base64等。
超链接
主要作用：从当前页面进行跳转。
实现功能：
- 跳转到指定页面
- 跳转到指定文件
- 跳转到锚点位置
- 唤起指定应用
| 标签名 | 标签语义 | 常用属性 |
|---|---|---|
| a | 超链接 | href:指定要跳转的具体目标。target：控制跳转时如何打开页面，常用值如下：_self：在本窗口打开。_blank：在新窗口打开。id：元素的唯一标识，可用于设置锚点。name：元素的名字，写在a标签中，也能设置锚点。 |
跳转到指定页面
<body>
<a href="https://www.jd.com/" target="_blank">去京东</a>
<a href="./10块级元素和行内元素.html" target="_self">去看行内元素</a>
</body>
跳转到文件
代码如下：
<body>
<!--跳转到文件-->
<!--浏览器可以直接打开的文件-->
<a href="./resource/学习.mp4">学习</a>
<a href="./resource/报名.pdf">报名表</a>
<a href="./resource/皮卡丘.gif">皮卡丘</a>
<a href="./resource/风景.jpg">风景</a>
<!--浏览器不能打开的文件，会自动触发下载-->
<a href="./resource/资料.zip">内部资料</a>
<!--强制触发下载-->
<a href="./resource/学习.mp4" download="学习片段.mp4">下载电影</a>
</body>
跳转到锚点
锚点：网页中的一个标记点。
使用方式：
-
设置锚点
<!-- 第一种方式：a标签配合name属性 --> <a name="test1"></a> <!-- 第二种方式：其他标签配合id属性,a以外的其他标签都可以使用id属性--> <h2 id="test2">我是一个位置</h2>注意：
- 具有href属性的a标签是超链接，具有name属性的a标签是锚点。
- name和id是区分大小写的，且id最好不要用数字开头。
-
跳转锚点
<!-- 跳转到test1锚点--> <a href="#test1">去test1锚点</a> <!-- 跳到本页面顶部 --> <a href="#">回到顶部</a> <!-- 跳转到其他页面锚点 --> <a href="demo.html#test1">去demo.html页面的test1锚点</a> <!-- 刷新本页面 --> <a href="">刷新本页面</a> <!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; --> <a href="javascript:alert(1);">点我弹窗</a>
唤起指定应用
通过a标签，可以唤起设备应用程序。
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
列表
有序列表
概念：有顺序或侧重顺序的列表。
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
无序列表
概念：无顺序或不侧重顺序的列表。
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>
列表嵌套
概念：列表中的某项内容，包含一个列表(注意：嵌套时，请将解构写完整)。
示例如下：
<!--嵌套列表-->
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href="https://www.opg.cn">东方明珠</a>
</li>
<li>迪士尼</li>
</ul>
</li>
<li>武汉</li>
<li>西安</li>
</ul>
显示结果：
注意：li标签最好写在 ul 或 ol 中，不要单独使用。
自定义列表
概念：自定义列表，是一个包含术语名称以及术语描述的列表。
一个dl是一个自定义列表，一个dt是一个术语名称，一个dd是一条术语描述。
示例如下：
<!--自定义列表-->
<h2>如何高效的学习？</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>
显示结果：
表格
基本结构
表格涉及到的标签：
table：表格caption：表格标题thead：表格头部tbody：表格主体tfoot：表格注脚tr：每一行th、td：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）
示例：
<body>
<table border="1">
<!--表格标题-->
<caption>学生信息</caption>
<!--表格头部-->
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>民族</td>
<td>政治面貌</td>
</tr>
</thead>
<!--表格主体-->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
</tbody>
<!--表格注脚-->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计1人</td>
</tr>
</tfoot>
</table>
</body>
结果：
常用属性
注意：
<table>元素的border属性可以控制表格边框，但是border值的大小，不能控制单元格边框的宽度，只能控制表格最外侧边框的宽度，——后期CSS控制。- 默认情况下，每列的宽度，看这一列单元格最长的那个文字。
- 给某个
th或td设置了宽度或高度后，所在行或列的宽度或高度就确定了。
跨行跨列
rowspan：指定要跨的行数。colspan：指定要跨的列数。
本节主要是举例来理解跨行跨列的使用。
课程表效果：
代码：
<body>
<table border="1">
<!--表格标题-->
<caption>课程表</caption>
<!--表格头部-->
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<th rowspan="4">上午</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>英语</th>
<th>物理</th>
<th>数学竞赛</th>
<th rowspan="4">休息</th>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>英语</th>
<th>物理</th>
<th>数学竞赛</th>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>英语</th>
<th>物理</th>
<th>数学竞赛</th>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>英语</th>
<th>物理</th>
<th>数学竞赛</th>
</tr>
<tr>
<th rowspan="2">下午</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>英语</th>
<th>物理</th>
<th>数学竞赛</th>
<th rowspan="2">休息</th>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>英语</th>
<th>物理</th>
<th>数学竞赛</th>
</tr>
</tbody>
</table>
</body>
结果示例：
常用标签
| 标签名 | 标签含义 | 单/双标签 |
|---|---|---|
br | 换行 | 单 |
hr | 分隔 | 单 |
pre | 按原文显示 | 双 |
- 使用
<p>标签来增加文本之间的行间隔，或者使用CSS中的margin属性。<hr>的语义是分隔。
表单
概念：一个包含交互的区域，用于收集用户提供的数据。
基本结构
| 标签名 | 常用属性 | 标签语义 |
|---|---|---|
form | action：用于指定表单的提交地址，要与后端人员沟通后确定。target：用于控制表单提交后，如何打开页面，常用值如下：_self：在本窗口打开。_blank：在新窗口打开。method：用于控制表单的提交方式，后续会详细讲解。 | 表单 |
input | type：设置输入框的类型，text表示普通文本。name：用于指定提交数据的名字，主要用于与后端人员沟通。 | 输入框 |
button | 按钮 |
示例：
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
常用表单控件
文本输入框
<input type="text">
- name属性：数据名称。
- value属性：输入框的默认输入值。
- maxlength：输入框最大可输入长度。
密码输入框
<input type="password">
- name属性：数据名称。
- value属性：输入框的默认输入值，一般不用，无意义。
- maxlength：输入框最大可输入长度。
单选框
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
- name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
- value 属性：提交的数据值。
- checked 属性：让该单选按钮默认选中。
复选框
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
- name 属性：数据的名称。
- value 属性：提交的数据值。
- checked 属性：让该复选框默认选中。
隐藏域
<input type="hidden" name="tag" value="100">
用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。
name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据。
提交按钮
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
- button 标签 type 属性的默认值是 submit 。
- button 不要指定 name 属性
- input 标签编写的按钮，使用 value 属性指定按钮文字。
重置按钮
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
- button 不要指定 name 属性
- input 标签编写的按钮，使用 value 属性指定按钮文字。
普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。
文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
- rows 属性：指定默认显示的行数，会影响文本域的高度。
- cols 属性：指定默认显示的列数，会影响文本域的宽度。
- 不能编写 type 属性，其他属性，与普通文本输入框一致
下拉框
<select name="from">
<option value="黑">黑龙江</option>
<option value="辽">辽宁</option>
<option value="吉">吉林</option>
<option value="粤" selected>广东</option>
</select>
- name 属性：指定数据的名称。
- option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
- option 标签设置了 selected 属性，表示默认选中。
禁用表单控件
给表单空间的标签设置disabled，可以禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性.
label标签
label标签可与表单控件相关联，关联后点击文字，与之对应的表单控件会获取焦点。
两种与 label 关联方式如下：
-
让 label 标签的 for 属性的值等于表单控件的 id 。
-
把表单控件套在 label 标签的里面。
总体示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>18表单-常用表单控件</title>
</head>
<body>
<form action="https://search.JD.com/search">
<!--文本框-->
<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account"><br>
<!--密码框-->
<label>
密码：
<input type="password" name="pwd"><br>
</label>
<!--单选框-->
性别：
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="famale" checked>女
</label>
<br>
<!--复选框-->
爱好：
<input type="checkbox" name="hobby" value="smoke" checked disabled>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
<br>
<!-- 文本域 -->
其他：
<textarea name="other" cols="30" rows="3"></textarea>
<br>
<!-- 下拉框 -->
籍贯：
<select name="place">
<option value="冀">河北</option>
<option value="鄂" selected>湖北</option>
<option value="湘">湖南</option>
<option value="阅" disabled>广东</option>
</select>
<br>
<!--隐藏域-->
<input type="hidden" name="abc" value="123"><br>
<!-- 确认按钮 第一种 -->
<!--<button>确认</button>-->
<!-- 确认按钮 第二种 -->
<input type="submit" value="确认">
<!-- 重置按钮 第一种 -->
<!-- <button type="reset">重置</button> -->
<!-- 重置按钮 第二种 -->
<input type="reset" value="重置">
<!-- 普通按钮 第一种 -->
<!--<button type="button">检测账号是否被注册</button>-->
<!-- 普通按钮 第二种 -->
<input type="button" value="检测账号是否被注册">
</form>
</body>
</html>
效果：
表单总结
