一、前言
1、学习地址及使用vscode
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频
2、教程简介
什么是前端开发：
网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端
学习路线：
HTML4——>CSS2——>HTML5——>CSS3
3、计算机基础
计算机硬件：中央处理器（运算器+控制器：cpu）、存储器（内存、硬盘）、输入设备（键盘、鼠标）、输出设备（音响、显示器）......
计算机软件：系统软件（Windows、Linux、Mac、Harmony......）、应用软件（微信、腾讯视频）
4、CS架构和BS架构
C:Client（客户端） B：Browser（浏览器） S:Server（服务器）
CS架构软件：需要安装后才能使用：弊端：1、需要安装，2、偶尔更新，3、不跨平台（Windows、mac....）
BS架构软件：借助浏览器打开网页就能用（eg：网页版csdn）：BS的优势：1、无需安装，2、无需更新，3、可跨平台
5、浏览器相关知识
五大主流浏览器：Chrome 、Safari、IE、Firefox、Opera
原因：市场份额大、有自己的内核
内核：用于处理浏览器所得的各种资源，以上五大主流浏览器所使用的内核分别为：Blink、webkit、Trident、Gecko、Blink
6、网页相关概念
输入网址打开网站可以看到网页、一个或多个网页构成网站。
网页的组成部分：结构（HTML）+ 表现（CSS）+ 行为（JavaScript）
二、HTML
1、HTML简介
全称：HyperText Markup Language 译为： 超文本标记语言
1996年W3C制定HTML规范，2014年HTML5由W3C正式发布
2、准备工作
如何让电脑无论开任何格式的图片都统一使用一个应用打开：
开始菜单——设置——默认应用——图片查看器——选择默认打开图片的应用
如何查看电脑是否为32位：
开始菜单——设置——系统——系统信息（或关于）
如何将Chrome浏览器设置为默认浏览器：
开始菜单——设置——默认应用——web浏览器设置
3、HTML标签（元素）
<h1>html</h1>
双标签：起始标签<h1>、结束标签</h1>、标签名h1、标签体html
单标签：<input/>
标签之间有嵌套关系和并列关系，注意换行
4、HTML标签属性
标签名和标签属性之间用英文空格隔开
eg: <marquee loop = "1" bgcolor="green">html</marquee1>
属性名loop、属性值1（名值对组合）
一个标签可以有多个属性，属性间用空格隔开,不同标签属性有相同有不同
标签中不要出现同名属性，否则后写的会失效
特殊属性没有属性名只有属性值eg : disabled
5、HTML基本结构
<html>
<head>
<title>指定网页标题</title>
</head>
<body>呈现在页面中的内容</body>
</html>6、HTML注释
注意：不能嵌套，可让某段代码暂时不参与运行
vscode快捷键：ctrl+/
<!--注释-->7、HTML文档声明
作用：告诉浏览器当前网页版本
写法：
<!DOCTYPE html>
8、HTML字符编码
原则1：存储时，必须采用合适的字符编码，否则无法存储，数据会丢失
原则2：存储时采用哪种方式编码，读取时必须采用相同的方式解码，否则数据能呈现，但会出现乱码
告诉浏览器解码方式：
<head>
<meta charset="UTF-8"/>
</head>9、HTML标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是一个标题</title>
</head>
<body>
</body>
</html>快捷键：光标放在删除行+（Ctrl+Shift+K）
10、开发者文档
参考搬运翻译w3c官方网站的前端学习网站：
11、HTML排版标签
典型的应用排版标签的网站：今日头条
右键检查，ctrl+F可查找标签使用个数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML排版标签</title>
</head>
<body>
<!--双标签、标题标签,一共六级,彼此之间不允许互相嵌套-->
<h1>我是一级标签</h1><!--h1最好只写一个-->
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
<!--段落标签，里头不能再有标题标签h1-h6和p标签以及div-->
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<!--无含义，可统一管理标签进行整体布局-->
<div>
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div>文字</div>
</body>
</html>注意：换行快捷键：Ctrl+Enter
12、HTML语义化标签
语义：含义：标题、段落...（用特定的标签表达特定的含义）
语义化：标签默认的效果（可通过css调整）不重要，语义最重要
语义化作用：
1、代码的可读性强清晰
2、有利于SEO（搜索引擎优化）
注意：百度搜索引擎利用爬虫技术看网页
3、方便设备解析，如：屏幕阅读器、盲人阅读器
13、块级元素与行内元素
使用规则：
1、块级元素中能写：行内元素、块级元素（几乎都能写）
2、行内元素中能写行内元素，但不能写块级元素
3、注意：h1-h6不能相互嵌套、
p标签中不能写块元素，如<ul></ul>块元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>块级元素与行内元素</title>
</head>
<body>
<!-- 块级元素，特点：独占一行 -->
<marquee>巴适</marquee>
<marquee>巴适</marquee>
<h1>巴适</h1>
<h1>巴适</h1>
<p>巴适</p>
<p>巴适</p>
<div>巴适</div>
<div>巴适</div>
<!-- 行内元素，特点：独占一行，不只占自己的宽度 -->
<input type="text">
<input type="text">
<span>巴适</span>
<span>巴适</span>
<!-- 1、块级元素中能写：行内元素、块级元素（几乎都能写） -->
<div>
<div>巴适</div>
<input type="text">
<span>巴适</span>
</div>
<!-- 2、行内元素中能写行内元素，但不能写块级元素 -->
<span>
<span>巴适1</span>
<input type="text">
<span>巴适2</span>
<!-- 浏览器会调整，但区域会错乱 -->
<p>巴适3</p>
</span>
<span>巴适5</span>
</body>
</html>14、HTML文本标签
注意：以下介绍标签均为双标签
用于包裹词汇、短语；
通常写在排版标签里（h1-h6、p、div）
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）
文本标签通常都是行内元素
常用的文本标签：
em 双标签 要着重阅读的内容
strong 双 十分重要的的
span 双 无语义
<p>
预防电信诈骗，请安装：
em:<em>国家反诈APP</em>。
</p>
<p>
strong:<strong>国家反诈APP</strong>
</p>
<p>
span:<span>国家反诈APP</span>
</p>效果：
不常用的文本标签：
cite 作品标题 samp 从上下文中提取内容，如标识设备输出
dfn 特殊术语或专属名词 kbd 键盘文本，经常用在与计算机相关的手册
del 删除的文本 abbr 缩写，最好配合上title属性
ins 插入的文本 bdo 更改文本方向，要配合dir属性，可选值：ltr(默认)、rtl
sub 下标文字 var 标记变量，可与code标签一起使用
sup 上标文字 small 附属细则，如：版权、法律文本
code 一段代码 b 摘要中的关键字、评论中的产品名称
i 人物思想活动、所说的话，现多用于呈现字体图标
u 与正常内容有反差文本如：错的词
q 短引用
blockquote 长引用
address 地址信息
注意：blockquote与address是块级元素，其他的文本标签是行内元素
记住语义感强重要的的标签：h1-h6、div、p、em、strong、span
代码：
<p>
cite:
这是 <cite>《离骚》</cite>很好听
</p>
<p>
dfn:
<dfn>好自为之</dfn>是一个成语
</p>
<p>
del与ins:
商品原价：<del>199</del>，限时秒杀：<ins>99</ins>
</p>
<p>
sub与sup:
水的化学方程式是：H<sub>2</sub>O, 8的三次方是：8<sup>3</sup>
</p>
<p>
code:
学习了js,知道这段代码：<code>alert(1)</code>
</p>
<p>
samp:
手机提示，<samp>支付宝到账100万元</samp>
</p>
<p>
kbd:
保存的快捷键是：<kbd>ctrl+s</kbd>
</p>
<p>
abbr(配合title属性):
<abbr title="英雄联盟">LOL</abbr>这个游戏很好玩
</p>
<p>
bdo(配合dir属性):
你是年少的欢喜，这句话反过来：喜欢的少年是你
</p>
<p>
ltr:通过标签：<bdo dir="ltr">你是年少的欢喜</bdo>
rtl:通过标签：<bdo dir="rtl">你是年少的欢喜</bdo>
</p>
<p>
var(可配合code使用):
学习js后，要定义变量：<code>let <var>a</var> = 1</code>.
</p>
<p>
small:
声明：<small>本网站所有资料仅提供参考</small>
</p>
<p>
b:
我买过<b>罗技GPM二代</b>鼠标
</p>
<p>
i:
猪头说：<i>”今天天气真好。“</i>
</p>
<p>
u:
hello被小红写成<u>heello</u>
</p>
<p>
q:
屈原曾经说过：（原来：）路漫漫其修远兮......
<strong>（加标签后：）</strong><q>路漫漫其修远兮......</q>
</p>
<p>
blockquote（块元素）:
有一首歌：<blockquote>后来，我总算学会如何去爱，····就不再</blockquote>
</p>
<p>
address（块元素）:
我们学校的地址是：<address>长沙橘子洲</address>
</p>效果：
15、HTML图片标签
<!-- 单标签，图片和当前HTML页面为同级
img为行内元素 -->
<img width="300" src="鞠婧祎2.0.jpg" alt="鞠婧祎图片">
<!-- alt属性的作用：
1、搜索引擎根据alt的值来知道图片的具体内容
2、若图片由于某种原因展现不出来，则展示alt的值
3、某些盲人阅读器可读出alt的值 -->
<!-- width和height属性调整图片大小，单位是像素：300px或300
只调整高或者宽，图片会等比列缩放 -->16、相对路径和绝对路径
<!-- 相对路径：依赖当前位置 -->
<!-- 路径.html和鞠婧祎8.1.jpg以及a文件夹为同级
./的含义为：当前位置 -->
<img width="300" src="./鞠婧祎8.1.jpg" alt="jujingyi8.1">
<!-- ./为当前位置的a文件夹下的图片即a/指的是a的下一级 -->
<img width="300" src="./a/鞠婧祎8.1a.jpg" alt="jujingyi8.1a">
<img width="300" src="./a/b/鞠婧祎8.1b.jpg" alt="jujingyi8.1b">
<!-- ../的含义为：跳到上一级文件夹 -->
<img width="300" src="../鞠婧祎2.0.jpg" alt="jujingyi2.0b">
<!-- 绝对路径，分为两类
1、本地绝对路径：特点：从盘符出发,live server不推荐这种方式引入
2、网络绝对路径:（1）该路径对应的网页只能有图片元素，其他的不能有如按钮等
（2）路径对应的图片可能用不了，因为对方可能开启了防盗链-->
<img width="300" src="D:\前端\demo_image\鞠婧祎demo.jpg" alt="jujingyidemo">
<img width="300" src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/6c8a9e722ba643e8bd7ecf7df4e070e2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723116691&x-signature=LHoj1ZlcZMfcHKdHu%2BtI9T3iMV0%3D">
17、常见的图片格式
1、jpg格式
扩展名为：.jpg 或 .jpeg 有损的压缩格式
优点：支持颜色丰富、占用空间小
缺点：不支持透明背景和动态图
使用场景：对图片细节没有极高要求，如：网站的产品宣传图
2、png格式
扩展名为：.png 无损的压缩格式
优点: 支持颜色丰富，支持透明背景
缺点：占用空间略大，不支持动态图
使用场景：图片有透明背景、更高质量呈现图片，如：公司logo图、重要配图
3、bmp格式
扩展名为：.bmp 不进行压缩，保留图片更多的细节
优点: 支持颜色丰富，保留的细节更多
缺点：占用空间极大，不支持动态图，不支持透明背景
使用场景：对图片细节要求极高，如：一些大型游戏图片（网页中很少用）
4、gif格式
扩展名为：.gif 仅支持256种颜色，色彩呈现不是很完整
优点：支持简单透明背景，支持动态图
缺点：支持颜色较少
使用场景：网页中的动态图片
5、webp格式
扩展名为：.webp 谷歌推出的一种格式。专门用来在网页中呈现图片
优点：上述几种几种格式的优点
缺点：兼容性不太好，如IE浏览器无法呈现webp格式图片，一旦使用需要解决兼容性问题
使用场景：网页中的各种图片
6、base64格式
本质：一串特殊的文本，通过浏览器打开，传统看图应用通常无法打开
原理：要把图片进行base64编码，形成一串文本
如何生成：靠一些工具或网站如：菜鸟工具
使用：直接作为img标签的src属性的值即可，并且不受文件位置的影响
使用场景：一些较小的图片或需要和网页一起加载的图片
18、超链接
1、跳转页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_跳转页面</title>
</head>
<body>
<!--a标签（双）的常用属性：
1、href：要跳转的具体位置
2、target属性有两个值
_blank 在一个新的页签中打开
_self 在当前页签中打开(默认可不写)
注意：在代码里面敲的一个或多个回车或者一个多个空格会被浏览器解析为一个空格 -->
<!-- 跳转到外部网站 -->
<a href="https://www.maoyan.com/" target="_self">去猫眼看电影</a>
<a href="https://www.baidu.com/" target="_blank">去百度</a>
<!-- 跳转到内部网页，如HTML.html -->
<a href="../HTML.html" target="_blank">去HTML.html</a>
<!-- a标签为行内元素，但是可以包裹除自身以外的任何元素 -->
<a href="../HTML.html" target="_blank">
<img width="100" src="鞠婧祎8.1.jpg" alt="jujingyi8.1">
</a>
</body>
</html>2、跳转文件
超链接是浏览器可以直接打开的文件，如：.jpg/.mp4
若不是浏览器可以直接打开的文件，如：.zip，则浏览器触发下载
也可以写一个在线的
<a href="https://www.baidu.com/s?word=%E5%A5%A5%E8%BF%90%E4%BC%9A&rsv_dl=ay24_pd_gkpc" target="_blank">去奥运会</a>
3、跳转锚点
锚点：网页中的一个标记点
注意：1、具有href属性的a标签是超链接，具有name属性的a标签是锚点
2、name和id都是区分大小写，且id最好别数字开头
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>跳转锚点</title>
</head>
<body>
<!-- 也可以跳转到其他页面的锚点 -->
<a href="#eight">看8月2日第一张图</a><!--a标签：有#指代要跳转到锚点，#后区分大小写-->
<a href="#two">看7月31日第一张图</a><!--利用id属性-->
<p>8月1日第二张图</p>
<img width="200" src="./path_test/a/鞠婧祎8.1a.jpg" alt="鞠婧祎8.1a">
<!--锚点：空的a标签，没有任何的标签体内容，使用name属性无＃
如果name属性值不出现重复，否则第一个出现的name属性生效
最好不要用数字开头-->
<a name="eight"></a>
<p>8月2日第一张图</p>
<img width="200" src="./path_test/a/b/鞠婧祎8.2.jpg" alt="鞠婧祎8.2">
<!-- 加锚点方式二利用id属性，id属性为通用属性可以给任何标签加 -->
<p id="two">7月31日第一张图</p>
<img width="200" src="./鞠婧祎2.0.jpg" alt="鞠婧祎2.0">
<p>8月1日第一张图</p>
<img width="200" src="./path_test/鞠婧祎8.1.jpg" alt="鞠婧祎8.1">
<p>整体的介绍完毕</p>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<!-- 可以执行js脚本 -->
<a href="javascript:alert(666);">点我弹窗</a>
</body>
</html>其他页面：如路径.html
<!-- 利用跳转锚点在本页面点击连接跳转到其他页面 -->
<a href="../超链接.html#eight" target="_blank">看其他页面的鞠婧祎8月2日第一张图的锚点</a>4、唤起指定应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>唤起指定应用</title>
</head>
<body>
<!-- 点击超链接、实现自动拨打电话 -->
<a href="tel:10086">电话联系</a>
<!-- 邮件联系 -->
<a href="mailto:123456@qq.com">邮件联系</a>
<!-- 短信联系 -->
<a href="sms:10086">短信联系</a>
</body>
</html>19、超文本含义
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。通过超链接将不同空间的文字图片等各种信息组织在一起，能够从当前内容，跳转到超链接所指向的内容（页面、文件、锚点、应用）
20、列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 三种列表：
1、有序列表(Odered list)
2、无序列表(Unordered list)
3、自定义列表(Definition list) -->
<!-- 1、有序列表（ol）：列表项（list item）语义重要 -->
<h2>学习英语基础分几步</h2>
<ol>
<li>语法</li>
<li>词汇</li>
<li>阅读</li>
</ol>
<!-- 无序列表（ul）:列表项（li） -->
<h2>我想去爬的几座山</h2>
<ul>
<li>黄山</li>
<li>泰山</li>
<li>黄老君山</li>
</ul>
<!-- 自定义列表（dl）:主要突出术语名称（dt）、术语描述(dd) -->
<h2>如何学好英语</h2>
<dl>
<dt>多背单词</dt>
<dd>单词是基础</dd><!--dd可以有多个-->
<dd>单词要会发音拼写组词</dd>
<dt>学好语法</dt>
<dd>语法有助于阅读</dd>
<dt>增加阅读量</dt>
<dd>可以提高阅读的速度</dd>
</dl>
<!-- 列表可以嵌套 -->
<ul>
<li>黄山</li>
<li>
<span>泰山</span>
<ul>
<li>日出</li>
<li>
<span>日落</span>
<ul>
<li>好看</li>
</ul>
</li>
<li>云海</li>
</ul>
</li>
<li>黄老君山</li>
</ul>
<!-- 注意事项：
1、无论是ol还是ul,让其子元素是li,否则会破坏列表结构，
但可以在li中包裹其他元素，如:<li><a href=""></a></li>
2、li不要单独使用
3、列表可以嵌套
4、自定义列表中一个术语名称（dt）可以有多个术语描述（dd）
5、应用场景：
ol:有顺序
ul:无序，可以变纵向为横向的排列，某网站顶部导航
dl:网站最下方的说明，如：关于我们.... -->
</body>
</html>21、表格
1、表格基本结构与常用属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 表格(table)基本结构：
标题(caption)、头部(thead)、主体(tbody)、脚注(tfoot)（可选）
行（tr）、头部单元格（th）主体单元格（td） -->
<!-- 表格常用属性：
(1)table属性：
1、border属性：值为1时表示表格为有1像素边框；
值大于1时如为10时，只控制最外侧边框，里头单元格变宽仍然为1
2、width属性：宽度，；浏览器会调试合适宽度
3、height属性：高度，：标题和脚注的单元格高度不变
4、cellspacing:单元格与单元格之间的间距
(2)caption没有以上属性
(3)thead有height属性、水平方向对其align属性(left、right、center（默认）、)、
垂直方向对齐valign：top（上）、bottom下、middle（中间）
(4)tbody有height、align、valign属性
(5)tfoot有height、align、valign属性
(6)tr所拥有的属性有height、align、valign属性
(7)th、td所拥有的属性有width、height、align、valign属性，注意调整宽高会影响一整行或列而不只是一个单元格 -->
<table border="1" width="500" height="300" cellspacing="0">
<caption>学生信息</caption>
<thead height="50" align="center" valign="middle">
<tr>
<th width="50" height="50" align="center" valign="bottom">姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody height="480" align="center" valign="middle">
<tr height="50" align="center" valign="middle">
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
<td>汉族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
</tbody>
<tfoot height="50" align="center" valign="middle">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</html>2、表格的跨行与跨列
td 和 th 还有rowspan跨行属性和colspan跨列属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格_跨行与跨列</title>
</head>
<body>
<table border="1">
<!-- 跨列属性colspan
跨行属性rowspan -->
<caption>课程表</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
<td>3-6</td>
<td>3-7</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
<td>4-6</td>
<td>4-7</td>
</tr>
<tr>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
<td>5-6</td>
<td>5-7</td>
</tr>
<tr>
<td>6-2</td>
<td>6-3</td>
<td>6-4</td>
<td>6-5</td>
<td>6-6</td>
<td>6-7</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>7-2</td>
<td>7-3</td>
<td>7-4</td>
<td>7-5</td>
<td>7-6</td>
<td>7-7</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>8-2</td>
<td>8-3</td>
<td>8-4</td>
<td>8-5</td>
<td>8-6</td>
<td>8-7</td>
</tr>
</tbody>
</table>
</body>
</html>效果图：
22、补充几个常用标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>补充几个常用标签</title>
</head>
<body>
<!-- 换行标签br（单） -->
<a href="https://wwww.baidu.com">去百度</a>
<br>
<a href="https://wwww.jd.com">去京东</a>
<!-- 分割线hr（单） 注意：若语义不是分割，只是一条装饰的线则用css去写-->
<div>第一张</div>
<p>lllllllllllllllll</p>
<hr>
<div>第二张</div>
<p>lllllllllllllllll</p>
<!-- 按原文显示pre（双）,写的空格和回车个数会保留 -->
<div><!--内容中有多个空格，只会被解析为一个-->
I love you
I love you
love
</div>
<pre>
I love you
I love you
love
</pre>
</body>
</html>23、表单
含义：网页中的交互区域，收集用户所提供的数据，如：用户名、密码......
表单控件
1、表单的基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单_基本结构</title>
</head>
<body>
<!--form侧重收集用户数据-->
<!--1、action属性：要把表单交给谁处理
注意：https://www.baidu.com多加了/s，作用直接返回搜索结果
2、target属性
3、method属性：表单提交的方式：get(默认) post -->
<form action="https://www.baidu.com/s" target="_blank" method="">
<!--name属性的值使得百度能接收用户输入，（与后端人员沟通后确定）
https://www.baidu.com/s?wd=今天天气 名值对-->
<input type="text" name="wd">
<button>去百度搜索</button>
</form>
<hr>
<form action="https://search.jd.com/search" target="_blank">
<!--name属性的值使得京东能接收用户输入，
https://search.jd.com/search?keyword=手机 名值对-->
<input type="text" name="keyword">
<button>去京东搜索</button>
</form>
<hr>
<!--a侧重跳转-->
<a href="https://www.baidu.com/s?wd=今天天气">搜索天气</a>
</body>
</html>2、表单常用控件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单_常用控件</title>
</head>
<body>
<form action="https://search.jd.com/search">
<!-- 文本框与密码框 -->
<!-- value属性的值为input输入框的默认值
maxlength属性的值控制input输入框的输入字符，如：10个字符，不加则没有限制-->
账户：<input type="text" name="account" value="zhangsan" maxlength="10"><br>
密码：<input type="password" name="pwd" maxlength="6">
<br>
<!-- 单选框与多选框
input的name属性value属性一定要写
checked默认选中 -->
性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
<br>
爱好：
<input type="checkbox" name="hobby" value="sing" checked>唱歌
<input type="checkbox" name="hobby" value="swim">游泳
<input type="checkbox" name="hobby" value="dance">跳舞
<br>
<!-- 文本域 -->
其他：
<textarea name="other" cols="22" rows="3"></textarea>
<br>
<!-- 籍贯 -->
籍贯：
<select name="place">
<option value="fujian">福建</option>
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option><!--默认选中-->
</select>
<br>
<!-- 隐藏域:防止非法注册,如：批量注册 -->
<input type="hidden" name="from" value="baidu">
<br>
<!-- 提交与重置 -->
<!-- 确认按钮第一种写法，不写name属性,
botton有一个默认属性type且type的默认属性值是submit
<button>确认</button>-->
<!-- 确认按钮第二种写法 此时input不写name属性 -->
<input type="submit" value="确认">
<!-- 重置按钮第一种写法
<button type="reset">重置</button>-->
<!-- 重置按钮第二种写法 -->
<input type="reset">
<!-- 普通按钮第一种写法
<button type="button">检测账户是否被注册</button>-->
<!-- 普通按钮第二种写法-->
<input type="button" value="检测账户是否被注册">
</form>
</body>
</html>3、禁用表单控件
使用场景：如：已填的用户名不能再改
<!-- 禁用表单控件利用disabled属性，常用的表单控件都可以设置 -->
禁用的表单控件：<input disabled type="text" name="account" value="lisi" maxlength="10"><br>4、表单label标签
实现提示文字真正和表单控件的关联
获取焦点，如：本节实现点击文字账户获取焦点，而不是点击输入框获取
<!-- for属性使得label标签和input框关联,
for与input框的id属性对应 -->
<!-- 作关联的第一种方式 -->
<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account" maxlength="10"><br>
<!-- 作关联的第二种方式 -->
<label>
密码：<!--换行被解析为一个空格-->
<input 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">女</label>
<br>
爱好：
<label>
<input type="checkbox" name="hobby" value="sing">唱歌
</label>
<label><input type="checkbox" name="hobby" value="swim">游泳</label>
<label><input type="checkbox" name="hobby" value="dance">跳舞</label>
<br>
<label for="qita">其他：</label>
<textarea id="qita" name="other" cols="22" rows="3"></textarea>
<br>5、表单 fieldset 与 legend
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单_fieldset与legend</title>
</head>
<body>
<!-- fieldset与legend作用：专门对表单里的控件进行分类 -->
<form action="https://search.jd.com/search">
<!-- 主要信息 -->
<fieldset>
<legend>主要信息</legend><!--文字描述写在里面-->
<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account" maxlength="10"><br>
<label>
密码：
<input 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">女</label>
</fieldset>
<br>
<!-- 附加信息 -->
<fieldset>
<legend>附加信息</legend>
爱好：
<label>
<input type="checkbox" name="hobby" value="sing">唱歌
</label>
<label><input type="checkbox" name="hobby" value="swim">游泳</label>
<label><input type="checkbox" name="hobby" value="dance">跳舞</label>
<br>
<label for="qita">其他：</label>
<textarea id="qita" name="other" cols="22" rows="3"></textarea>
<br>
籍贯：
<select name="place">
<option value="fujian">福建</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
</fieldset>
<br>
<input type="hidden" name="from" value="baidu">
<input type="submit">
<input type="reset">
<input type="button" value="检测账户是否被注册">
</form>
</body>
</html>效果：
24、框架标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>框架标签</title>
</head>
<body>
<!-- 利用iframe(行内元素)嵌入一个普通网页,不是所有网站都能可以嵌入 -->
<!-- frameborder属性只有两个值，值为0表示无边框，值为1表示有边框 -->
<iframe src="https://www.taobao.com" width="900" height="300" frameborder="0"></iframe>
<!-- 利用iframe嵌入一个广告网页：如：以下嵌入网易的广告 -->
<iframe width="300" height="260" src="https://pos.baidu.com/kcdm?conwid=300&conhei=250&rdid=5841072&dc=3&di=u5841072&s1=973237195&s2=2774799008&dri=0&dis=0&dai=16&ps=2267x1011&enu=encoding&exps=110277,110273,110261,110254,110011&ant=0&psi=5392d1faa04074de&dcb=___adblockplus_&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tpr=1722739964234&ti=%E7%BD%91%E6%98%93%E6%96%B0%E9%97%BB&ari=2&ver=0722&kws=%E6%96%B0%E9%97%BB%2C%E6%96%B0%E9%97%BB%E4%B8%AD%E5%BF%83%2C%E6%96%B0%E9%97%BB%E9%A2%91%E9%81%93%2C%E6%97%B6%E4%BA%8B%E6%8A%A5%E9%81%93&dps=%E6%96%B0%E9%97%BB%2C%E6%96%B0%E9%97%BB%E4%B8%AD%E5%BF%83%2C%E5%8C%85%E5%90%AB%E6%9C%89%E6%97%B6%E6%94%BF%E6%96%B0%E9%97%BB%2C%E5%9B%BD%E5%86%85%E6%96%B0%E9%97%BB%2C%E5%9B%BD%E9%99%85%E6%96%B0%E9%97%BB%2C%E7%A4%BE%E4%BC%9A%E6%96%B0%E9%97%BB%2C%E6%97%B6%E4%BA%8B%E8%AF%84%E8%AE%BA%2C%E6%96%B0%E9%97%BB%E5%9B%BE%E7%89%87%2C%E6%96%B0%E9%97%BB%E4%B8%93%E9%A2%98%2C%E6%96%B0%E9%97%BB%E8%AE%BA%E5%9D%9B%2C%E5%86%9B%E4%BA%8B%2C%E5%8E%86%E5%8F%B2%2C%E7%9A%84%E4%B8%93%E4%B8%9A&dbv=2&drs=4&pcs=1423x731&pss=1423x9795&cfv=0&cpl=5&chi=2&cce=true&cec=UTF-8&tlm=1722739921&prot=2&rw=731<u=https%3A%2F%2Fnews.163.com%2F&ecd=1&dft=0&uc=1440x852&pis=-1x-1&sr=1440x900&tcn=1722739964&qn=383d606f5fcc2f68&ft=1" frameborder="0"></iframe>
<!-- 利用iframe嵌入其他内容:图片、pdf、视频、zip(会直接弹出提示下载) -->
<iframe width="300" height="300" src="./鞠婧祎2.0.jpg" frameborder="0"></iframe>
<!-- 与超链接的target属性配合使用 -->
<a href="https://www.taobao.com" target="container">点我去淘宝</a>
<a href="https://www.jd.com" target="container">点我去京东</a><br>
<!-- 与表单的target属性配合使用 -->
<form action="https://so.toutiao.com/search" target="container">
<input type="text" name="keyword">
<input type="submit" value="搜索">
</form>
<iframe name="container" frameborder="0" width="900" height="300"></iframe>
</body>
</html>效果：
25、HTML字符实体
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字符实体</title>
</head>
<body>
<!-- 每一个字符实体由三部分组成，&符+名称+; -->
<!-- 字符实体 或者  ——》表示一个空格，前者常用 -->
<div>天气 时间</div>
<div>天气 时间</div><!--两个空格-->
<!-- 把<h1>标签当成普通文本处理 -->
<div>我们学过<h1>标签</div>
<!-- 作为文本呈现在页面上 -->
<div>一个表示空格的字符实体是：&nbsp;</div>
<!-- &作为文本呈现在页面上 -->
<div>一个表示&的字符实体是：&amp;</div>
<!-- 中文人民币字符¥ -->
<div>商品的价格是：￥199</div>
<div>商品的价格是：¥199</div>
<div>商品的价格是：¥199</div>
<!-- 版权所有对应的字符实体 -->
<div>版权所有：©</div>
<div>版权所有：©</div>
<!-- 乘号 -->
<div>2 * 2 = 4</div>
<div>2 x 2 = 4</div>
<div>2 × 2 = 4</div>
<div>2 × 2 = 4</div>
<!-- 除号 -->
<div>2 / 2 = 4</div>
<div>2 ÷ 2 = 4</div>
<div>2 ÷ 2 = 4</div>
</body>
</html>26、HTML全局属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全局属性</title>
</head>
<body>
<!-- 适用于所有标签的属性：id、class、style、dir、title、lang -->
<!-- id:标签唯一标识，不能重复,
<html> <head> <meta> <title> <script> <style>不使用
作用：使label标签与表单控件相关联、与css、JavaScript配合使用 -->
<div id="jujingyi1">鞠婧祎1</div>
<div id="jujingyi2">鞠婧祎2</div>
<!-- class：分类，指定标签类名，通过css给标签设置样式 -->
<!-- style：给标签设置css样式 -->
<div style="color:green">xiaohong</div>
<!-- dir:内容方向，值：ltr \ rtl,
<html> <head> <meta> <title> <script> <style>不能使用 -->
<!-- 修改文字的阅读顺序 -->
<bdo dir="rtl">你是年少的欢喜</bdo>
<!-- 表达文字在屏幕靠左还是靠右 -->
<div dir="rtl">你是年少的欢喜</div>
<!-- title:给标签设置一个鼠标悬浮时的文字提示，超链接和图片用得多 -->
<div title="英雄联盟">LOL</div>
<a href="https://www.baidu.com" title="qubaidu">去百度</a>
<!-- lang:作用：让浏览器显示对应的翻译提示、有利于搜索引擎优化
<html> <head> <meta> <title> <script> <style>不能使用-->
<div lang="en">hello</div>
</body>
</html>27、meta元信息
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 配置字符编码 -->
<meta charset="UTF-8">
<!--针对IE浏览器的一个兼容性设置
若用户使用IE8及其以上浏览器，则会进入edge渲染模式，更好呈现网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对移动端设备：手机、平板
(pc端：笔记本电脑，台式)
如何用pc端的浏览器模拟出移动端浏览器：见视频055_meta元信息 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 配置网页关键字（利于搜索）
注意：content的值为：8-12个以英文逗号隔开的单词/词语 -->
<meta name="keywords" content="网上购物,电商购物,皮鞋">
<!-- 配置网页描述信息（利于搜索）,content的值建议80个字以内 -->
<meta name="description" content="英语学习网致力于·····">
<!-- 针对搜索引擎爬虫配置
content的值：
index:允许搜索爬虫索引此页，noindex：不索引
follow：允许搜索爬虫跟随此页面上的链接，nofollow：不跟随
all: 与index、follow等价
none: 与noindex、nofollow等价
noarchive:要求搜索引擎不缓存页面内容
nocache:noarchive的替代名称-->
<meta name="robots" content="">
<!-- 配置网页作者、网页生成工具、网页版权信息、网页自动刷新
参考：MDN：
链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta -->
<title>meta元信息</title>
</head>
<body>
<!-- <meta>标签中写的内容都属于网页的基本信息 -->
<!-- 兼容性：同一段代码在不同浏览器呈现效果不同 -->
<h1>你好</h1>
</body>
</html>
扫一扫
1008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
