01-初始HTML
一、认识前端
了解前后端开发
web前端开发：WEB Front-end Development
web后端开发：WEB Back-end Development
世界上第一个网页和现在的网页 上世纪90年代，Berners-Lee上线了世界上第一个网站 info.cern.ch/hypertext/W…
现在的网页：
前端发展
- 网页网站开发
- 后台管理系统
- 网页游戏开发
- 移动端页面开发
- 微信小程序、公众号、订阅号
- 微信小游戏
- APP 混合式开发
二、网页的组成
三、第一个网页
1、HTML文件的基本骨架
注意:
<DOCTYPE html> <-- 声明文档 -->
<html lang="en"> <-- 语言是英语 -->
<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 > <-- 标题 -->
2、HTML的注释
什么是注释？
快速注释 ctrl + /（全选中再操作）
全选 ctrl +a
剪切 ctrl +x
撤销 ctrl +z
选中多行 滑轮键按下 往下拉（不用滑动滚轮）
查找 ctrl + f
替换 ctrl + h
保存 ctrl +s
快速赋值一行到下面 shift + alt +下
02-HTML常用标签
一、标签的分类
1、head标签
< !-- 1.页面的标题 -->
< !-- 2.页面的图标 （或网页显示的窗口）-->
< !-- 3.引入外部资源 css js -->
< !-- 4.有利于SEO优化 -->
< ! 一个 标题 可以用h标签也可以用p标签 为什么还要出现h标签>
<! --标题采用h标签就是为了seo优化-->
1）单双标签
< !-- 单标签: hr br img -->（单个出现）
单标签写法：< hr>、< hr/>（完整写法）、< hr>< /hr>
hr: 分割线，br: 换行（中间空格）例：11 < br> 11
< ! -- 双标签: 必须有头有尾 （成对出现）-->,
写法：< h1>< /h1>、< h1>1111
< !-- 浏览自动的将我们的dom节点补全的机制 shadow-dom -->
< !--标签作用：把标签包裹的内容显示到 页面上>
< !--h系列**的标签 相当于head标题标签> 属于男标签
< !--对于h标签来说 h1-h6都是男标签且依次递减（包括字体大小、字体粗细）从大到小，从粗到细
< h1>< /h1> < h4>< /h4>
< h2>< /h2> < h5>< /h5>
< h3>< /h3> < h6>< /h6>
< !-- 页面中最小的字体是12px px为像素-->
< !--h标签的适用范围：网站的标题 小标题 一个页面也就只有一个h1-->
< !--页面的logo有时候也会采用h标签-->
< !--在h标签内写上文字 然后再给上背景图Logo 最后让文字的首行缩进为负数-99（即往左走，正数往右走）-->
2.男标签(块级元素)和女标签(行内元素) 人妖标签(行内块元素)
**男标签的特征：**常见的有p h1-h6 hr div
1）独立成行，不能和其他元素（兄弟）共处一行;
2）可以设置宽高；
3）男标签默认的宽度是（父级）百分百
**女标签的特征: ** 常见的有span i em strong
1）可以和女标签及人妖标签共处一行
2）不能设置宽高（宽高是内容撑起来的）
人妖标签 —— 只有两个：img input
1）可以和女标签和人妖标签共处一行;
2）可以设置宽高
元素：< !--< h1 class=”add”>1111< /h1>-->
即：标签+属性+属性值+内容
3、hr标签
< !-- 什么是属性 -->
属性就是描述事物的一个特征——属性名：属性值
属性分属性名和属性值 （属性名与属性值之间可用“：”也可用“=”连接）
特征—属性名；不同的值—属性值
小明的头发是黑色的（头发颜色—属性名；黑色—属性值）
< !--hr是分割线-->
< !-- 加颜色 color-->
<hr color ="red">
< !-- 设置宽度 width-->
<hr color="red" width="800">
< !-- 设置位置 align--> align：对齐方式
<hr color="red" width="800" align="left">
< !-- 去阴影 noshade=”noshade”-->
<hr color="red" width="800" align="left" noshade="noshade">
4、p标签（段落标签）
< !--p标签是男标签-->
< !--p标签—双标签，块级元素-->
可以设置宽高，不能直接加颜色，需要加入font
注: 打开方式（点击右键） ①open with live server来自本地服务器②open in default browser来自本地文件（常用）
< !--加颜色 font -->
< p><font color="red">111111< /font>1111111< /p> （老方法）
< !-- 标签里面的属性 有很多都是自己特有的属性 -->
5、Div标签和span
< !--div-->男标签
< !--div没有特殊含义 就是一个盒子 为了布局而生-->
< !--所有的标签 实际上都是一个盒子 都可以作为一个范围来使用-->
< !--每个标签都有自己所占据的位置 其余标签除了占据位置外 还有特殊的含义-->
< !-- div标签 没有特殊含义 就是为了包裹元素 占据位置 增强代码的可读性-->
例：
< div>
< h1>儿童近视康复< /h1>
< p>11111111< /p>
< /div>
< !--span--> 女标签
< !--span标签一般用于p标签中 作为特殊的一部分-->
6、Img标签（图片标签）
< !--img--> 人妖标签
<img src=””alt=””title=””>
< !-- src属性 表示资源的路径 绝对路径和相对路径-->
< !-- alt属性 表示当你资源加载失败的时候 提示的文字 -->
< !-- title属性 表示鼠标放到图片上的时候 提示的文字 -->
< !--当直接把图片放上去的时候 显示的图片大小是原来图片的大小-->
< !-- width属性 设置图片的宽度 -->
< !-- height属性 设置图片的高度 -->
< !--当图片** 只 **设置宽或高时 会等比例缩放-->
< !--如果用的是网上的路径需要连网-->
<img src=”可百度复制图片地址” alt=”你的图片不见了” title=”这是图片” width=”300” height=”300”>
7、绝对路径和相对路径
< !-- 绝对路径 -->
< !--所有的寻找过程都从一个点（盘符） 开始-->
例: <img src="D:\220510-前端\220531\代码\img\1.png" alt="">
< !-- 相对路径 -->
< !--从自身当前位置开始寻找-->
< !-- ./ 表示进入到同级目录 -->
< !-- ../ 表示进入到上一级目录 -->
例： <img src="./img/1.png" alt="">
<img src="../代码/img/1.png" alt="">
8、a标签（超链接标签）
a标签 ——女标签
href—外链资源的路径
target:目标
1._self 在当前选项卡跳转
2._blank 打开一个新的选项卡
a标签有一个默认的点击事件 如果我们想阻止这个事件 我们需要在href中属性值为 javascript:;
网上资源路径：
<a href=<https://www.baidu.com/> target="_self">11</a>
<a href=<https://www.baidu.com/> target="_blank">12</a>
自己资源路径：
A标签锚点：（定位）
<a href="#jiben">基本信息</a>
<a href="#music">专辑曲目< /a>
<a href="#introduce">歌手介绍< /a>
<h2 id="jiben">基本信息< /h2>
<h2 id="music">专辑曲目< /h2>
<h2 id="introduce">歌手介绍< /h2>
#锚点命名在标题id，a标签属性=标题id进行当前页面跳转
版本： html4、html5、xhtml、html声明文档不同
< !-- html4版本 -->
< !-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
< !-- html5版本 -->
< !-- -->
< !-- XHTML版本 --> 严格版
< !-- `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
< !-- 严格版 标签名必须小写 双标签必须成对 -->
< !-- html5和html的区别 （html5新增了什么？） -->
< !-- 学习html说白了 就是学习标签 -->
< !-- html5相对于html -->
< !-- 新增了很多标签 语义化标签 -->
< header></ header>
< footer>< /footer>
< article>< /article>
< section>< /section> 与div意思相同
9、标题标签
< h1>< /h1>
< h2>< /h2>
< h3>< /h3>
< h4>< /h4>
< h5>< /h5>
< h6>< /h6>
Color 颜色
< !-- 去阴影 --> <hr noshade="noshade">
Width宽度 Height高度 Font增加属性
10、文本格式化标签
< !-- 让文本具有一些特性 -->
1）加粗标签
< b> 加粗 < /b> （bold） 未换行 **（女标签）
< br> 换行
< strong>加粗< /strong>
< br>
2）斜体标签
< !-- i标签 -->: < i>斜体< /i>
: 斜体
3）下划线标签
< !-- u标签 -->: < u>下划线< /u>（underline）
< br>
< !--ins标签-->： < ins>下划线< /ins>
< br>
4）中划线标签
< !-- s标签 -->: < s>中划线< /s>
< br>
< !--del被删除标签 -->： < del>中划线< /del>
border: 1px solid red;边框 1像素 坚硬的 红色
< span> 行内标签 女标签 用来改变布局样式
11、列表元素
无序列表
1）场景：在网页中表示一组无顺序之分的列表，如：新闻列表
2）ul标签：表示无序列表的整体，ul标签中只允许包含li标签
3）li标签：表示无序列表的每一项，li标签可以包含任意内容
4）li标签可以包含任意内容
5）列表的每一项前默认显示圆点标识
有序列表
1）场景：在网页中表示一组有顺序之分的列表，如：排行榜。
2）ol标签中只允许包含li标签
3）li标签可以包含任意内容
4）列表的每一项前默认显示序号标识
自定义列表
1）场景：在网页的底部导航中通常会使用自定义列表实现。
2）dl标签中只允许包含dt（definition term）/dd（definition description）标签
3）dt/dd标签可以包含任意内容
4）dd前会默认显示缩进效果
5）列表中每一项的具体描述，是对 dt 的描述、解释、补充
6）一个dt后面一般紧跟着1个或者多个dd
总结
无序列表最常用，有序列表偶尔用，自定义列表底部导航用
12、表格元素
1.table 表格
2.tr(table row) 表格中的行
3.td(table data) 行中的单元格
4.thead 表格的表头
5.tbody 表格的主体
6.tfoot 表格的页脚
7.caption 表格的标题
8.th 表格的表头单元格
13、表单类标签
HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单
场景: 在网页中显示收集用户信息的表单效果，如：登录页、注册页
常见的表单元素和表单项元素：
1.form 表单 一般情况下，其他表单相关元素都是它的后代元素
2.input 单行文本输入框、单选框、复选框、按钮等元素
3.textarea 多行文本框
4.select、option 下拉选择框
5.button 按钮
6.label 表单元素的标题
input元素的使用:
1.表单元素使用最多的是input元素
2.input标签可以通过type属性值的不同，展示不同效果
input元素中的type属性:
注意点：type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
input元素中的其它属性:
1.readonly：只读
2.disabled：禁用
3.checked：默认被选中，只有当type为radio或checkbox时可用
4.autofocus：当页面加载时，自动聚焦
5.name：名字，在提交数据给服务器时，可用于区分数据类型，当前控件的含义，
提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值
6.value：取值 用户输入的内容，提交之后会发送给后端服务器
