HTML入门
HTML标签
-
标签又称元素,是HTML的基本组成单位
-
标签分类:双标签与单标签(绝大部分都是双标签)
-
标签名不区分大小写,但推荐小写
-
双标签:
-
单标签:
HTML标签属性
-
用于给标签提供附加信息
-
可以写在:起始标签或单标签中
-
有些特殊的属性,没有属性名,只有属性值
<input disabled>
HTML基本结构
网页的 基本结构
- 想要呈现在网页的内容写在body标签中
- head标签中的内容不会出现在网页
- head标签中的title标签可以指定网页的标题
<html>
<head>
<title>网页标题</title>
</head>
<body>
.....
</body>
</html>
安装live server插件
- 可以更加方便打开网页
- 打开网页的方式更加贴近项目上线(开启本地服务器端口)
- 代码出现改动,可以自动刷新
- 务必使用VScode打开的是文件夹,否则live server插件无法正常工作
- 打开的网页必须是标准的HTML结构,否则无法自动刷新
HTML注释
快捷键: ctrl + / 或者 shift + alt + a
HTML文档声明
-
作用: 告诉浏览器当前网页的版本
-
新写法: 下面写法是声明HTML5
<!DOCTYPE html> 或 <!DOCTYPE HTML> 或 <!doctype html>
-
注意: 文档声明,必须在网页的第一行,且在html标签的外侧
HTML字符编码
-
计算机对数据的操作:
- 存储时,对数据进行:编码。
- 读取时,对数据进行:解码。
-
编码,解码,会遵循一定的规范–字符集
-
使用原则:
原则1:存储时,务必采用合适的字符编码
否则:无法存储,数据会丢失
原则2:存储时采用哪种方式编码,读取时就采用哪种方式解码
否则:数据错乱
-
总结:
-
平时编写代码,统一采用
UTF-8
(包含世界所有语言) -
为了让浏览器在渲染
html
文件时,不犯错误,可以通过meta
标签配合charset
属性指 定字符编码。<head> <!-- 解码格式 --> <meta charset="UTF-8"/> </head>
-
HTML设置语言
-
主要作用:
- 让浏览器显示对应的翻译提示
- 有利于搜索引擎优化
-
具体写法:
<html lang="zh-CN"> <!-- lang属性:language 属性值:( 语言-国家/地区 )--> </html>
HTML标准结构
-
HTML标准结构如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>标题</title> </head> <body></body> </html>
-
输入
!
,随后回车即可快速生成标准结构 -
配置
VScode
的内置插件emmet
, 可以对生成结构的属性进行定制。
HTML基础
开发者文档
语义化标签
- 概念:用特定的标签,去表达特定的含义
- 原则:标签的默认效果不重要(后期可以通过CSS控制),语义最重要
块级元素 与 行内元素
- 块级元素:独占一行(排版标签都是块级元素)。
- 行内元素:不独占一行(目前只学了: input ,稍后会学习更多)。
- 使用原则:
- 块级元素 中能写 行内元素 和 块级元素(简单记:块级元素中几乎什么都能写)。
- 行内元素 中能写 行内元素,但不能写 块级元素。
- 特殊情况:
h1-h6
不能互相嵌套p
中不要写块级元素
图片标签
基本使用
标签名 | 常用属性 | 单/双标签 |
---|---|---|
img | src : 图片路径alt :图片描述width :图片宽度,单位像素(px )height :图片高度,单位像素(px ) | 单 |
总结:
- 尽量不同时修改图片的宽和高,可能会造成比例失调。
img
是行内块元素alt
属性的作用:- 搜索引擎通过 alt 属性,得知图片的内容。—— 最主要的作用。
- 当图片无法展示时候,有些浏览器会呈现 alt 属性的值。
- 盲人阅读器会朗读 alt 属性的值。
路径分类
1.相对路径:以当前位置作为参考点,去建立路径
符号 | 含义 |
---|---|
./ | 同级 |
/ | 下一级 |
../ | 上一级 |
../../ | 上两级 |
注意:
- 相对路径的
./
可以省略不写- 相对路径依赖的是当前位置,后期若调整了文件位置,那么文件中的路径也要修改。
2.绝对路径:以根位置作为参考点,去建立路径
- 本地绝对路径:
E:/a/b/c/奥特曼.jpg
- 网络绝对路径:http://www.atguigu.com/images/index_new/logo.png
注意:
- 使用本地绝对路径,一旦更换设备,路径处理起来比较麻烦,所以很少使用。
- 使用网络绝对路径,确实方便,但要注意:若服务器开启了防盗链,会造成图片引入 失败。
超链接
主要作用:从当前页面进行跳转
可以实现:
- 跳转到指定页面
- 跳转到指定文件(也可触发下载)
- 跳转到锚点位置
- 唤起指定应用
标签名 | 常用属性 | 单/双标签 |
---|---|---|
超链接 | href :指定要跳转到的具体目标target :控制跳转时如何打开页面,常用值如下:_self :在本窗口打开;_blank :在新窗口打开id :元素的唯一标识,可用于设置锚点name :元素名字,写在 a 标签中,也能设置锚点 | 双 |
跳转页面
<!-- 跳转其他网页 -->
<a href="https://developer.mozilla.org/zh-CN/" target="_blak">去MDN</a>
<!-- 跳转本地网页 -->
<a href="https://developer.mozilla.org/zh-CN/" target="_self">去MDN</a>
注意:
- 代码中的多个空格,多个回车,都会被浏览器解析成一个空格
- 虽然 a 是行内元素,但 a 元素可以包裹除它自身外的任何元素!
跳转文件
<!-- 直接用浏览器打开 -->
<a href="./resource/小电影.mp4">看电影</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意1:若浏览器无法打开文件,则会引导用户下载
注意2:若想强制触发下载,请用
download
属性。属性值即为下载文件默认名称
跳转锚点
什么是锚点?–网页中的一个标记点
具体使用方式:
-
第一步:设置锚点
<!-- 第一种方式:a标签配合name属性 --> <a name="test1"></a> <!-- 第二种方式:在其他标签中配合id属性 --> <p id="test2">我是一个锚点</p>
注意:
- 具有
href
属性的a
标签是超链接,具有name
属性的a
标签是锚点 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>
列表
有序列表
ordered list(ol
):有顺序或侧重顺序的列表
list item(li
):列表项
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
无序列表
unordered list(ul
):无顺序或不侧重顺序的列表。
list item(li
):列表项
<ul>
<li>成都</li>
<li>上海</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
)
-
具体编码
<table border="1" cellspacing="0"> <!-- 表格标题 --> <caption>学生信息</caption> <!-- 表格头部 --> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>民族</th> <th>政治面貌</th> </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <td>张三</td> <td>男</td> <td>18</td> <td>汉族</td> <td>团员</td> </tr> <tr> <td>李四</td> <td>女</td> <td>20</td> <td>满族</td> <td>群众</td> </tr> <tr> <td>王五</td> <td>男</td> <td>20</td> <td>回族</td> <td>党员</td> </tr> <tr> <td>赵六</td> <td>女</td> <td>21</td> <td>壮族</td> <td>团员</td> </tr> </tbody> <!-- 表格脚注 --> <tfoot> <tr> <td></td> <td></td> <td></td> <td></td> <td>共计:4人</td> </tr> </tfoot> </table>
常用属性
标签名 | 标签语义 | 常用属性 | 单/双标签 |
---|---|---|---|
table | 表格 | width :设置表格宽度height :设置表格最小高度,表格最终高度可能比设置的值大border :设置表格边框宽度cellspacing :设置单元格之间的间距 | 双 |
thead | 表格头部 | height :设置表头部高度align :设置单元格的水平对齐方式,可选值如下:left (左对齐),center (中间对齐),right (右对齐)valign :设置单元格的垂直对齐方式,可选值如下:top (顶部对齐),middle (中间对齐),bottom (底部对齐) | 双 |
tbody | 表格主体 | 常用属性与 thead 相同。 | 双 |
tfoot | 表格注脚 | 常用属性与 thead 相同。 | 双 |
tr | 行 | 常用属性与 thead 相同。 | 双 |
td | 普通单元格 | width :设置单元格宽度,同列所有单元格全都受影 响。height :设置单元格的高度,同行所有单元格全都受影 响。align :设置单元格的水平对齐方式。 valign :设置单元格的垂直对齐方式。 rowspan :指定要跨的行数。 colspan :指定要跨的列数。 | 双 |
th | 表头单元格 | 常用属性与 td 相同。 | 双 |
注意点:
<table>
元素的border
属性可以控制表格边框,但border
值的大小,并不控制单元格 边框的宽度,只能控制表格最外侧边框的宽度,这个问题如何解决?—— 后期靠 CSS 控制。
默认情况下,每列的宽度,得看这一列单元格最长的那个文字。
给某个
th
或td
设置了宽度之后,他们所在的那一列的宽度就确定了。给某个
th
或td
设置了高度之后,他们所在的那一行的高度就确定了。
常用标签
标签名 | 标签含义 | 单/双标签 |
---|---|---|
br | 换行 | 单 |
hr | 分隔 | 单 |
pre | 按原文显示(一般用于在页面中嵌入大段代码) | 双 |
注意:
- 不要用
<br>
来增加文本之间的行间隔,应使用p
元素,或后面即将学到的CSS margin
属性。hr
的语义是分隔,如果不想要语义,只是想画一条水平线,那么应当使用CSS
完成。
表单
概念:一个包含交互的区域,用于收集用户提供的数据。
基本结构
标签名 | 标签语义 | 常用属性 | 单/双标签 |
---|---|---|---|
form | 表单 | action :用于指定表单的提交地址(需要与后端人员沟通后确 定)。target :用于控制表单提交后,如何打开页面,常用值如下:_self (在本窗口打开),_blank :(在新窗口打开)method :用于控制表单的提交方式,暂时只需了解,在后面 Ajax 的课程中,会详细讲解。 | 双 |
input | 输入框 | type :设置输入框的类型name :用于指定提交数据的名字,(需要与后端人员沟通后确 定)。 | 单 |
button | 按钮 | 本节不涉及 | 双 |
示例代码:
<form action="https://www.baidu.com/s" target="_blank" method="get">
<!-- name值为wd是百度规定的 -->
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
常用表单控件
文本输入框
<input type="text">
常用属性:
name
:数据名称
value
:输入框的默认输入值
maxlength
:输入框最大可输入长度
密码输入框
<input type="password">
常用属性跟文本输入框一样
单选框
<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中type默认值为submit -->
<button type="submit">点我提交表单</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
标签的里面。
示例代码:
<!-- 方式1 -->
<label for="1">用户名:</label>
<input type="text" name="acount" id="1">
<!-- 方式2 -->
<label>
密码:
<input type="text" name="password">
</label>
fieldset 与 legend 的使用(了解)
fieldset
可以为表单控件分组、 legend
标签是分组的标题。
示例:
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户:</label>
<input id="zhanghu" type="text" name="account" maxlength="10"><br>
<label>
密码:
<input id="mima" type="password" name="pwd" maxlength="6">
</label>
<br>
性别:
<input type="radio" name="gender" value="male" id="nan">
<label for="nan">男</label>
<label>
<input type="radio" name="gender" value="female" id="nv">女
</label>
</fieldset>
表单总结
标签名 | 标签语义 | 常用属性 | 单/双标签 |
---|---|---|---|
form | 表单 | action :表单提交的地址target :要跳转的新地址打开位置; 值: _self 、 _blank method :请求方式 | 双 |
input | 多 种 形 式 的 表 单 控 件 | type :指定表单控件的类型。值:text 、 password 、 radio 、 checkbox 、 hidden 、 submit 、 reset 、 button 等。name :指定数据名称value :对于输入框:指定默认输入的值; 对于单选和复选框:实际提交的数据; 对于按钮:显示按钮文字。 disabled : 设置表单控件不可用。 maxlength : 用于输入框,设置最大可输入长度。checked : 用于单选按钮和复选框,默认选中 | 单 |
textarea | 文本域 | name : 指定数据名称 rows : 指定默认显示的行数,影响文本域的高度。cols : 指定默认显示的列数,影响文本域的宽度。 disabled : 设置表单控件不可用。 | 双 |
select | 下拉框 | name : 指定数据名称 disabled : 设置整个下拉框不可用。 | 双 |
option | 下 拉 框 的 选 项 | disabled : 设置拉下选项不可用。value : 该选项事件提交的数据 (不指定value,会把标签中的内容作为提交数据) selected : 默认选中。 | 双 |
button | 按钮 | disabled : 设置按钮不可用。 type : 设置按钮的类型,值: submit (默认)、 reset 、 button | 双 |
label | 与 表 单 控 件 做 关 联 | for : 值与要关联的表单控件的ID值相同。 | 双 |
框架标签
标签名 | 功能和语义 | 属性 | 单/双标签 |
---|---|---|---|
ifram | 框架(在网页中嵌入其他 文件) | name :框架名字,可以与 target 属 性配合。 width : 框架的宽。 height : 框架的高度。frameborder :是否显示边框,值:0 或者1。 | 双 |
iframe
标签的实际应用:
- 在网页中嵌入广告
- 与超链接或表单的 target 配合,展示不同的内容。
<iframe src="https://www.bilibili.com/" frameborder="0" width="1519" height="1020"></iframe>
<!-- 与超链接的target配合使用 -->
<a href="https://www.bilibili.com" target="tt">点我</a>
<iframe src="tt" frameborder="0" width="900" height="300"></iframe>
HTML实体
在 HTML
中我们可以用一种特殊的形式的内容,来表示某个符号,这种特殊形式的内容,就是 HTML 实 体
。
字符实体由三部分组成:一个
&
和 一个实体名称(或者一个#
和 一个实体编号),最后加上一 个分号;
。
描述 | 实体名称 | |
---|---|---|
空格 | | |
< | 小于 | < |
> | 大于 | ‘>’ |
& | 和号 | & |
HTML全局属性
常用全局属性
属性名 | 含义 |
---|---|
id | 给标签指定唯一标识,注意: id 是不能重复的。 作用:可以让 label 标签与表单控件相关联;也可以与 CSS 、 JavaScript 配合使 用,。 |
class | 给标签指定类名,随后通过 CSS 就可以给标签设置样式。 |
style | 给标签设置 CSS 样式。 |
dir | 内容的方向,值: ltr 、 rtl |
title | 给标签设置一个文字提示,一般超链接和图片用得比较多。 |
lang | 给标签指定语言 |
个分号 ;
。
描述 | 实体名称 | |
---|---|---|
空格 | | |
< | 小于 | < |
> | 大于 | ‘>’ |
& | 和号 | & |
HTML全局属性
常用全局属性
属性名 | 含义 |
---|---|
id | 给标签指定唯一标识,注意: id 是不能重复的。 作用:可以让 label 标签与表单控件相关联;也可以与 CSS 、 JavaScript 配合使 用,。 |
class | 给标签指定类名,随后通过 CSS 就可以给标签设置样式。 |
style | 给标签设置 CSS 样式。 |
dir | 内容的方向,值: ltr 、 rtl |
title | 给标签设置一个文字提示,一般超链接和图片用得比较多。 |
lang | 给标签指定语言 |