day01
HTTP协议
HTTP协议(Hypertext Transfer Protocol),超文本传输协议,是互联网数据传输的常见协议
一次HTTP事务由“HTTP请求”和“HTTP响应”构成
实时浏览网页
- 给VSCode安装Live Server插件。
- 在html中,按ctrl+shift+p键,选择“Open with Live Server”
HTML5骨架
<!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>
hello world
</body>
</html>
第一行文档类型声明DTD
html标签对,lang属性表示网页的语言,zh表示中文,en表示英文
head标签对,表示网页的配置
mata表示网页的基础配置。属性charset=“UTF-8”,字符集=“UTF-8” name
字符集 | 涵盖字符 | 1个汉字字节数 | 适用场景 |
---|---|---|---|
UTF-8 | 涵盖全球所有国家、民族的文字和大量图形字符 | 3 | 制作有非汉字文字的网页 |
gb2312(gbk) | 收录所有汉字字符(包括简体、繁体)和英语、少量韩文、日语和少量图形字符 | 2 | 制作只有汉语和英语的网页,由于一个汉字仅占2个字节,网页文件尺寸明显减少。 |
title网页的标题。
body标签对,表示用户可以看见的内容
网页关键词和描述
<meta name="Keywords" content="你好,HTML,"CSS","javaScript">
<meta name="Description" content="关于网页的描述">
标签
标题标签
h标签,共6级标题
段落标签
<p></p>标签
p标签不能嵌套h系列标签和其他p标签
div标签
<div></div>用来将相关内容组合到一起,以和其他应用分割,使文档结构更加清晰。
转义字符
转义字符 | 意义 |
---|---|
&\lt; | 小于号 |
&\gt; | 大于号 |
&\nbsp; | 空格 |
&\copy; | 版权符号 |
列表
标签 | 语义 |
---|---|
<ul></ul> | 无序列表 |
<ol></ol> | 有序列表 |
<dl></dl> | 定义列表 |
无序列表
- HTML规定,<ul>的子标签只能是<li>标签
- <li>标签是容器,内部可以放其他任何标签
<!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>
<ul>
<li>
<h2>陕西省</h2>
<ul>
<li>西安市</li>
<li>安康市</li>
</ul>
</li>
<li>
<h2>山西省</h2>
<ul>
<li>运城市</li>
<li>太原市</li>
</ul>
</li>
</ul>
</body>
</html>
- 无序列表有type属性
值 | 描述 |
---|---|
disc | 默认值,实心圆 |
circle | 空心圆 |
square | 实心方块 |
有序列表
-
ol的子标签只能是li标签
-
li标签可以放任何东西
-
有序列表的type属性
值 意义 a 小写英文字母编号 A 大写英文字母编号 i 小写罗马数字编号 I 大写罗马字母编号 1 数字编号 -
start属性。制定了列表编号的起始值(为阿拉伯数字)
-
reversed属性指定列表中的条目是否是倒叙排列
定义列表
dl definition list 定义列表
dt data term 数据项
dd data definition 数据定义
图片与超链接标签
图片标签
alt属性是对图像的文本描述
weight属性、height属性,如果只设置一个,表示按原始比例缩放图片
<img src="images/xxx.jpg" alt="xxx" width>
网页上支持的图片格式
格式 | 说明 |
---|---|
.bmp | windows画图软件默认保存的格式,位图 |
.gif | 支持动画(比如表情包) |
.jpeg(.jpg) | 有损压缩图片,用于照片 |
.png | 便携式网络图像,用于logo、背景图形等,支持透明和半透明 |
.svg | 矢量图片 |
.webp | 最新的压缩算法非常优秀的图片格式 |
超级链接
title属性用于设置鼠标的悬停文本
target属性设置为blank,即可在新标签页中打开网页
<a hred=“2.html”>去第二个网页</a>
页面内锚点
点击跳转到id为wuxi的地址
<a href="lvyou.html#wuxi">跳转id为无锡地方</a>
跳转到页面顶部
<a href="#top">跳转到页面顶部</a>
邮件链接、电话连接
-
有mailto前缀是邮件链接,系统将自动打开Email相关软件
<a href="mailto:xxx@qq.com">给xxx发邮件</a>
-
有**tel:**前缀的连接是电话连接,系统将自动打开拨号盘
音频和视频
-
在浏览器中插入音频需要使用<audio>标签,兼容到IE9 声明autoplay属性,音频会自动播放,声明loop属性,将循环播放音频
<audio controls src="音频地址">抱歉,您的浏览器不支持audio标签,请升级浏览器</audio>
controls显示播放控件 里面的文字是对不兼容audio标签的浏览器显示文字
-
在浏览器中插入视频需要使用<video>标签
大纲与语义化标签
大纲标签
区块标签 | 说明 |
---|---|
<section> | 文档的区域,语义比div大 |
<article> | 文档的核心文章内容,会被搜索引擎主要抓取 |
<aside> | 文档的非必要相关内容,比如广告等 |
<nav> | 导航条 |
<header> | 页头 |
<main> | 网页核心部分 |
<footer> | 页脚 |
<!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>
<header>
<nav>导航栏</nav>
</header>
<main>
<aside>我是广告</aside>
<article>
<h1>文章的标题</h1>
<section>部分1</section>
<section>部分2</section>
<section>部分3</section>
</article>
</main>
<footer>页脚</footer>
</body>
</html>
语义化标签
1.<span>标签是文本中的“区块”标签,本身没特殊的显示效果,可以结合CSS来丰富样式
<!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>
<p><span>北京</span>的区号是<span>010</span></p>
</body>
</html>
标签 | 说明 |
---|---|
<b> | 被加粗的文字,css已经代替了它的功能 |
<u> | 加下划线的文字,css已经代替了它的功能 |
<i> | 倾斜的文字,css已经代替了它的功能 |
强调语义
标签 | 说明 |
---|---|
<strong> | 代表特别重要文字 |
<em> | 代表强调文字,倾斜 |
<mark> | 代表一段需要被高亮的文字 |
<figure><figcaption>标签
<figure>代表以段独立的内容,与说明<figcaption>配合使用,是一个独立的引用单元,这部分转移到附录或者其他页面时不影响到主体
###表单
所有的HTML表单都是以一个<form>元素开始
action属性表示表单要提交到后台的网址 method属性表示表单提交的方式,有get或post
单行文本框
1.使用type属性值被设置为text的<input>元素可以创建单行文本框,它是一个单标签
<!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>
<form action="" method="post">
<p>
请输入你的姓名:<input type="text">
</p>
<p>
报考院校:<input type="text" value="清华大学" disabled>
</p>
<p>
毕业院校:<input type="text" placeholder="请输入真是的毕业学校哦">
</p>
</form>
</body>
</html>
单选按钮
-
使用type属性值设置为radio的<input>元素可以创建单选按钮
-
互斥的单选按钮应该设置它们的name为相同值
-
单选按钮如果加上了checked属性,表示默认被选中
<!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> <form action="" method="post"> <p> 性别: <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女 </p> </form> </body> </html>
label标签
label标签用来将文字和单选按钮进行绑定
<!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>
<form action="" method="post">
<p>
性别:
<label>
<input type="radio" name="sex" value="男"> 男
</label>
<label>
<input type="radio" name="sex" value="女"> 女
<label>
</p>
</form>
</body>
</html>
复选框
- 使用type属性值设置为checkbox的<input>元素可以创建复选选按钮
密码框
请输入密码:<input type="password">
下拉菜单
<select>
<option value="alipay">支付宝</option>
<option value="wx">微信</option>
<option value="bank">网银</option>
</select>
多行文本框
- <textarea></textarea>表示多行文本框
- rows和cols属性,用于定义多行文本框的行数 和列数
三种按钮
- 表单中常见的三种按钮,它们都是input标签,type值不同
type属性值 | 按钮属性 |
---|---|
button | 普通按钮,可以简写为<button></button> |
submin | 提交按钮 |
reset | 重置按钮 |
提交按钮将表单的内容提交到后台
更多input种类
type属性值 | 控件 |
---|---|
color | 颜色选择控件 |
date、time | 日期、时间选择控件 |
电子邮件输入控件 | |
file | 文字选择控件 |
number | 数字输入控件 |
range | 拖拽条 |
search | 搜索框 |
url | 网址输入控件 |
必填 加入required属性 number 有min与max属性
<datalist>控件
<datalist>控件可以为输入框提供一些备选项,当用户输入的内容与备选文字相同时,将会智能感应list属性值要跟datalist的id名一致
<!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>
<form action="" method="post">
<input type="text" list="province-list">
<datalist id="province-list">
<option value="山东"></option>
<option value="山西"></option>
<option value="广东"></option>
<option value="广西"></option>
<option value="河南"></option>
<option value="河北"></option>
<option value="湖南"></option>
<option value="湖北 "></option>
</datalist>
</form>
</body>
</html>
表格
表格的基本使用 tr行 td列 th列的标题
<!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>
<style>
table,tr,td{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1" width="400">
<caption>我是表格的标题</caption>
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>G</td>
<td>K</td>
<td>L</td>
</tr>
</table>
</body>
</html>
colspan属性用来设置td或者th的列跨度
rowspan属性用来设置行跨度
<table border="1" width="400">
<caption>我是表格的标题</caption>
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
<th>第四季度</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td rowspan="3" colspan="2">G</td>
</tr>
<tr>
<td>h</td>
</tr>
<tr>
<td>I</td>
<td>j</td>
</tr>
</table>
thead表头 tfoot表尾
<!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>
<style>
table,tr,td{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1" width="400">
<caption>我是表格的标题</caption>
<thead>
<tr>
<th> </th>
<th colspan="2">第一季度</th>
<th colspan="2">第二季度</th>
<th colspan="2">第三季度</th>
<th colspan="2">第四季度</th>
</tr>
<tr>
<th></th>
<td>国内</td>
<td>国外</td>
<td>国内</td>
<td>国外</td>
<td>国内</td>
<td>国外</td>
<td>国内</td>
<td>国外</td>
</tr>
</thead>
<tr>
<th>手机</th>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th>电脑</th>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<th>笔记本</th>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tfoot>
<th>汇总</th>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
</tfoot>
</table>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tMGjLkyQ-1666162710840)(HTML.assets/1645969471258.png)]
<td>123</td>
</tr>
<tr>
<th>笔记本</th>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tfoot>
<th>汇总</th>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
<td>369</td>
</tfoot>
</table>
``` ![请添加图片描述](https://img-blog.csdnimg.cn/b282a1862cef4b30987da3feb9d99f17.png)