HTML学习记录
1、概念
HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
2、简介内容
- html文档的后缀名
.html和.htm两种都可以，没有区别。授课中都是.html后缀名，个人习惯不同而已。 - 标签的分类
围堵标签：有开始标签和结束标签，例如<html></html>
自闭和标签：开始标签和结束标签都在一个标签中<br/> - 标签可以嵌套，但是嵌套的语法要正确
正确案例：<p><a></a></p> 错误案例：<p><a></p></a> - 标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称> <p id="p1" name="p1"> </p> - html标签不区分大小写，但是推荐全小写
3、开发工具
记事本、notepad都可以，但是开发效率低。所以我们直接选择更快捷便利的开发工具HBuilder,也有
其他的开发工具，就不在这里一一赘述了。
3.1、Hbuilder介绍
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
3.2、Hbuilder下载
HBuilder下载地址：https://www.dcloud.io/
下载步骤就不赘述了，软件是免安装的，解压之后直接使用即可。
3.3、使用Hbuilder创建项目
4、HTML文档的基本结构
HTML文档也叫web页面。
4.1、基本结构
<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!-- html,根元素 ，围堵标签-->
<html>
<!--
head,头元素：
作用：
1、用于指定HTML文章中的一些元数据，
例如元数据 meta：定义页面的编码格式
title:定义页面的标题
2、引入外部的资源文件--未来讲解
-->
<head>
<meta charset="utf-8" />
<title>这是我的第一个HTML页面</title>
</head>
<!--body，主体：浏览器显示的内容都将在这里编写
格式化代码的快捷键：ctrl+shift+f（英文状态下使用）
-->
<body>
hello html 这是我的第一个HTML页面
</body>
</html>
4.2、HTML中的注释
语法：
HTML注释以<!-- 开头 ，以-->结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!--
这里编写HTML注释，
可以是一行，也可以是多行
-->
5、HTML中的常用标签
5.1、文本标签
5.1.1、标题标签 h1–h6:字体逐渐缩小
5.1.2、段落标签
5.1.3、换行标签
5.1.4、水平线标签
5.1.5、范围标签
5.2、图片标签
5.2.1、基本属性
img 显示图片
常用属性:src:指定图片的路径
路径分类：
-
相对路径：推荐使用
例如:<img src="img/ cat.jpg”/>
表示与当前文件同级的img文件夹下的cat.jpg图
. ./表示上一级目录
<img src="…/img/ cat.jpg”/>
表示与当前文件上一级目录中的img文件夹下的cat.jpg图片
-
绝对路径：不推荐使用
—般都是以盘符开头,例如：C: \Users \w-ln\Pictures\image
title：作用
- 鼠标悬浮在图片上的时候显示的文字
- 当图片因为各种原因无法正常显示的时候，应该显示图片的位置显示title中的文字
alt：与title作用相同，但是有些浏览器不支持该属性，所以我们一般使用title属性
width和height：宽度和高度,设置之后图片可能会失真
5.2.2、设置图片的热点区域（了解）
设置图片的热点区域:
<img src="img/bg1.png" usemap="#地图名称"/>
<map name="自定义图名称">
<area shape="形状名称”3种取值: circle-圆形rect-矩形poly-多边形
- circle-圆形有3个数字:分别是圆心的横坐标、纵坐标和圆半径
- rect-矩形有4个数字:分别是左上角的横纵坐标、右下角横纵坐标
- poly-多边形取决于边数:按顺时针写好每个点的横纵坐标
coords="坐标（多个值之间用逗号隔开)“
href="点击该剧由的时候跳转的目标URL"
title="鼠标悬浮在该区域的时候的提示文字"/>
</map>
点击之后进入circle.html的界面
5.3、列表标签
一般用在导航上
5.3.1、无序和有序列表
列表标签:分为有序标签、无序标签
ul–li：无序列表,li标签可以有多个﹔推荐ul中只有li标签，如果想嵌套，建议套在li中
ol–li：有序列表,与无序列表功能一样,只是默认的样式不同;
可以与无序列表相互替换(以后可以通过样式将两者调整成一样)
5.4、定义描述标签
一般用在图文混编的场景中。
dl-dt-dd：定义描述标签,一般用在图文混编的场合
dl：只能盛放dt和dd标签,不推荐盛放其他内容
dt：一般用来盛放图片或者标题
dd：一般用来补充对dt的描述与说明
5.5、布局标签：div
一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。
5.6、标签的分类
html标签可以分为块状元素和行级元素两类。
- 块状元素：一般都是新起一行，可以容纳行级元素和其他块级元素；（独占一行）
- 行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行级元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
- 块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素会排列到同一行里，其宽度随元素的内容变化而变化。 - 块级元素可以设置宽高；行内元素设置宽高无效。
- 块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。（此处的属性稍后介绍）
我们上面已经讲过的标签中归类一下：
属于块状元素的：
- 标题标签 h1-h6,
- 段落标签 p ,
- 水平线标签 hr,
- 有序列表标签 ol–li，
- 无序列表标签 ul–li，
- 定义描述标签 dl-dt-dd，
- 容器标签 div：
属于行级元素的：
- 范围标签：span
- 图像标签：img
6、超链接
6.1、页面间的跳转
a：超链接,作用:跳转到其他资源
属性: href=“目标资源路径” //路径推荐相对路径
target=“打开资源的位置”
- 默认值:_self —在当前页面打开
- 常用值:_blank —在新页面打开资源
6.2、锚链接
当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接。
6.2.1、本页面的锚链接
a:超链接
-
作用1:跳转到其他资源
属性: href="目标资源路径” //路径推荐相对路径
target=“打开资源的位置”- 默认值:_self —在当前页面打开
- 常用值:_blank —在新页面打开资源
-
作用2:锚链接
步骤： -
1、目标位置定义锚点
<a name="锚点名称"></a> -
2、超链接的href属性使用锚点
<a href="#锚点名称" target="_self">锚链接</a>
代码：
<div>
<a name="#top">顶部</a>
</div>
<div style="height: 300px;background: lightblue;">
<h1>运动户外--设置高度是为了让页面超过一屏</h1>
</div>
<div style="height: 300px;background: lavenderblush;">
<h1>品牌热卖--设置高度是为了让页面超过一屏</h1>
</div>
<div style="height: 300px;background: lemonchiffon;">
<h1>奶制品--设置高度是为了让页面超过一屏</h1>
</div>
<div style="height: 300px;background: lavender;">
<h1>宠物园艺--设置高度是为了让页面超过一屏</h1>
</div>
<a href="#top" target="_self">锚链接--点击后跳转到顶部</a>
6.2.2、页面间的锚链接
7、表格标签
7.1、规则表格
table:定义表格
-
常用属性:
- height:高度
- width:宽度border:边框
- cellpadding:内容与单元格之间的距离
- cellspacing:单元格和单元格之间的距离
-
tr:定义行
- 常用属性:
align：文本水平方向上的对齐方式，
有三个取值,默认left-左对齐center-居中对齐 right-右对齐
- 常用属性:
-
th和td标签都用来定义单元格,
-
th :一般用来定义表头单元格,即做标题的那一行中的单元格td:一般用来定义非表头单元格,即除了标题正文内容的单元格但是没有严格的限制
-
常用属性:
valign：文本垂直方向上的对齐方式，top-顶部对齐；bottom-底部对齐；middle-垂直居中
-
演示代码:
<body>
<table border="1" height="90%" width="200px" cellpadding="0" cellspacing="0">
<tr>
<th>序号</th><th>商品名称</th><th>价格</th>
</tr>
<tr>
<td valign="top">1</td><td><img src="img/好耶.png"/></td><td>125</td>
</tr>
<tr>
<td valign="middle">2</td><td>饼干</td><td>15</td>
</tr>
</table>
</body>
7.2、不规则表格–跨行和跨列
单元格标签th和td中的常用属性:
colspan:合并列
rowspan:合并行
类似Exce1中的合并单元格。
colspan="3”意思是它要和合并包括自身在内的本行的三列单元格，所以本行后面的两个单元格的位置要被它占用
rowspan="3”意思是它要和合并包括自身在内的本列的三行单元格,
所以本列后面两行的的同样位置的单元格的位置要被它占用
演示代码：
<table border="1" cellpadding="O" cellspacing="o" height="300px" width="400px"
<tr>
<td colspan="3" align="middle"><h3>个人简历</h3></td>
</tr>
<tr>
<td>姓名:</td><td>秀念</td><td rowspan="3">个人照片</td></tr>
<tr>
<td>出生年月:</td><td>1998-6</td>
<tr>
<td>电话:</td><td>137123456789</td>
</tr>
</table>
7.3、 表格的高级标签–标题标签和逻辑分区标签
caption：表格的标题
thead.tbody、tfoot都是逻辑分区的标签，没有编写样式之前对整体的结构没有任何的影响
PS:如果自己没有编写逻辑分区标签，浏览器默认把所有行放入tbody标签中，即table的子节点默认是tbody
演示代码：
<table border="1" cellpadding="10" cellspacing="0" width="90%">
<caption>资产负债表</caption>
<thead style="background: lavenderblush; ">
<tr>
<th>月份</th><th>负债</th><th>资产</th>
</tr>
</thead>
<tbody style="background: lightblue; ">
<tr>
<td>1月份</td><td>10000</td><td>1000o</td>
</tr>
<tr>
<td>2月份</td><td>150000</td><td>150000</td>
</tr>
<tr>
<td>3月份</td><td>50000</td><td>50000</td>
</tr>
</tbody>
<tfoot style="background: khaki; ">
<tr>
<td>总计</td><td>210000</td><td>210000</td>
</tr>
</tfoot>
</table>
8、表单（重要）
概念：用于采集用户输入的数据。用于和服务器进行交互
form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
- 常用属性:
-
action:指定提交数据的URL
-
method:指定提交方式,一共7种,以下2种比较常用
- get:
- 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
- 请求参数大小是有限制的。
- 不太安全。
- post:
- 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
- 请求参数的大小没有限制。
- 较为安全。
-
enctype:表单中有上传的文件的时候必备该属性，且取值为multipart/form-data
-
PS:表单项中的数据要想被提交:必须指定其name属性
<form action="index.html" method="get" enctype="multipart/form-data">
</form>
接下来就是常用的表单项元素
表单项元素中的一些属性：
id：元素的唯一表示，不重复
name：表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value：表单项元素的值，服务器获取数据通过name获取到的就是value
type：表示表单项元素的呈现形式
class：表示样式名称
readonly：表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色
8.1、文本框
input：表单元素,其中的type属性的值不同，会出现不同的表现形式
文本框：type=“text” ,text也是input的默认值
id：表示元素的唯一标识,不推荐重复
name：表单元素的名称，很重要，未来提交数据到服务器的时候，服务器端通过name获取valueplaceholder：文本框中显示的提示文字，用户输入自己内容的时候提示文字自动消失
演示代码：
<input type="text" id="in1" name="in1" placeholder="请输入账户"/>
8.2、密码框
密码框：type=“password”，用户输入内容之后显示的是黑色实心圆，而不是明文显示内容
required：表示用户必须填写此内容，如果没有填写，提交表单的时候失败并给出提
id：表示元素的唯一标识,不推荐重复
name：表单元素的名称，很重要，未来提交数据到服务器的时候，服务器端通过name获取
<input type="password" id="pa1" name="pa1" required/>
8.3、单选按钮
单选按钮: type=“radio”
单选按钮都是成组出现，name相同的才表示一组,同组当中的按钮都互斥
value：服务器通过name获取到的值就是value
checked：表示默认选中;值可以省略，直接写一个属性名，也可以写checked=“checked”
代码演示：
性别:<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
<input type="radio" name="gender" value="未知"/>未知
<br />
婚姻状态: <input type="radio" name="statu" value="1"/>已婚
<input type="radio" name="statu" value="0" checked/>未婚
<br />
8.4、复选框
复选框: type=" checkbox"
复选框都是成组出现，name相同的才表示一组，同组当中的复选框可以选多个
value：服务器通过name获取到的值就是value
checked：表示默认选中﹔值可以省略，直接写一个属性名，也可以写checked="“checked”
演示代码：
爱好:<input type="checkbox" name="hobby" value="swim"/>游泳
<input type="checkbox" name="hobby" value="NBA"/>NBA
<input type="checkbox" name="hobby" value="movie"/>电影
<input type="checkbox" name="hobby" value="music"/>音乐
8.5、文件域
文件域:文件上传 type=“file”
表单中如果有文件上传,表单中最好有enctype=“multipart/Form-data”
multiple属性：表示可以同时上传多个文件
头像:<input type="file" name="headImg" multiple="multiple" />
8.6、日期-h5中的新特性
日期-h5新特性:
type="date”表示年月日
type="datetime-local”表示既有年月日又有时间
生日:<input type="datetime-local" name="birthday" />
8.7、隐藏域
隐藏域: type="hidden”页面上看不到任何效果
作用:隐藏一些用户不关心但是程序员需要的值
隐藏域:<input type="hidden" name="userId" value="1001" />
8.8、下拉列表框
下拉列表框:select中写name
option : select中的所有选项,
其中value表示下拉列表中被选中的项的对应值其中selected表示默认选中
<select name="month">
<option value="1">1</option><option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
</select>
8.9、文本域
textarea：文本域
cols：指定列数,每一行有多少个字符
rows：默认多少行。
readonly：表示只读,内容不可修改
disabled：表示不可用，样式呈现灰色
<textarea rows="15" cols="500" readonly="readonly" >
准则一：
1、的哈接口文档哈卡大家啊我的能德哈卡我记得
2、gsggsszgfgfdgz
</textarea>
8.10、按钮
按钮可以分为：
- 提交按钮
- 图片按钮
- 重置按钮
- 普通按钮
value：按钮上的文字
type=“submit”：提交按钮，提交到form的action的指定路径
type=“image”：等价于提交按钮，只是没有value属性，多了一个src="按钮的图片
”type=“reset”：清空表单中的所有用户输入，回到默认原始状态，相当于刷新了页面
type=“button”：普通按钮，没有任何功能，只是有按钮的长相而已
<input type="submit" value="注册" id="regBtn" />
<input type="image" src="img/好耶.png" id="regBtn2" />
<input type="reset" value="重置" id="reset" />
<input type="button" value="普通按钮" id="btn" />
button标签可以与input实现的按钮相互替换
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
8.11、标签
label：指定输入项的文字描述信息
注意：label的for属性一般会和input 的id属性值对应。
如果对应了,则点击label区域,会让input输入框获取焦点。
9、框架
9.1、框架概念
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
例如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。
9.2、框架语法
iframe：定义内嵌框架
常用属性：
- src=“URL”：该URL指向不同的网页
- height 和 width属性用来定义iframe标签的高度与宽度。
- 属性默认以像素为单位,但是你可以指定其按比例显示(如:“80%”")。
- frameborder属性用于定义iframe表示是否显示边框。
设置属性值为“0"移除iframe的边框: - name:内嵌框架的名称,自定义。
iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性，如下实例:点击查询连接的时候,百度页面将在本页的内嵌框架中显示
<p>
<a href="https://www.baidu.com" target="content">查询</a>
</p>
<iframe name="content" src="index.html" width="100%" height="200" frameborder="0"></iframe>
点击查询后
10、框架集
frameset： 定义一个框架集。
该元素被用来组织一个或者多个frame元素。每个frame有各自独立的文档。
frameset元素规定在框架集中存在多少列或多少行，以及每行每列占用的百分比/像素。
常用属性：cols=“数值列表，多个值之间用逗号分隔”
rows=“数值列表，多个值之间用逗号分隔”
<frameset rows="25%,*">
<frame src="sub/head.html" frameborder="0" />
<frameset cols="25%,*">
<frame src="sub/left.html" frameborder="0"/>
<frame src="welcome.html" name="content" frameborder="0"/>
</frameset>
<noframes>
您的浏览器不支持框架集
</noframes>
</frameset>
11、HTML5新增音频视频标签
11.1、音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio>元素。
<audio controls>
<source src="audio/wgs.ogg" type="audio/ogg">
<source src="audio/zjl.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
PS：control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用
第一个支持的音频文件
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
音频格式的MIME类型
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
11.2、视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
PS：<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的
视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时
保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
当前， 元素支持三种视频格式： MP4, WebM, 和 Ogg:
| Format | MIME-type |
|---|---|
| MP4 | video/mp4 |
| Ogg | audio/ogg |
| WebM | video/webm |
12、HTML中的转义符号
| 转义符号 | 描述 |
|---|---|
| 转义为空格 | |
| < | 转义为小于号< |
| ≤ | 转义为小于等于号≤ |
| > | 转义为大于号> |
| ≥ | 转义为大于等于号≥ |
| © | 转义为版权符号 © |
13、写在最后
文章中的标签只涉及最常用的标签，需要的标签在
https://www.w3school.com.cn/html/index.asp
这个网址可以查到
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
