HTML基础
HTML入门
1网页的组成
HTML: 内容层—负责页面的内容—文字 链接 图片…
CSS：样式层—负责页面的样式—颜色 大小 位置 表现…
JavaScript：行为层—负责页面的行为—交互效果 轮播图
页面的内容与样式也有标准，它的标准是由w3c制定的，万维网联盟
2HTML的定义
HTML超文本标记语言Hyper Text Markup Language
可以把它简单理解成我们常见的网页
Html是一门编程语言，由大量的标签组成
超文本:文本 图片 超链接 音频 视频…
标记(标签):html的语法标签 <标签>
HTML的语法规则
1HTML的特点
HTML文档是以.html或者.htm为后缀
需要由浏览器解析执行(默认代码从上往下，同一行从左往右按顺序执行)
页面中还可以嵌入JS代码
我们学习的是HTML5,代表第5次重大版本修改
2语法基础
标签: <标签名> 用尖括号包裹标签名，分为：
双标记标签，封闭类型标签
<开始标签>内容区域</结束标签>
如:
单标记标签，非封闭类型标签
<标签名/> h5后单标记标签可以不加斜杠 <标签名>
如：
或者
3完整的HTML结构
文档类型声明
写在html文件中的第1行，告诉浏览器，当前这个文档类型是HTML
并且使用了h5的语法编写的，请用h5的规范解析
<html> 表示网页的开始与结束
<head> 网页的头部，定义了当前页面的一些配置信息
<title>我是标题</title> 网页的标题
<meta charset="utf-8"> 设置网页的编码为了认识中文
</head>
<body> 网页的主体，所有可见的展示内容都写在这里
我是要展示的内容
</body>
</html>HTML标签
1文本样式的标签
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s>删除线文本</s>
h5提供了一些带有语义的标签，通常带语义的标签更容易理解和记忆
<strong>加粗文本</strong>
<em></em> 斜体
<del></del> 删除线
<mark></mark> 高亮标记
X<sup>2</sup> 上标字
Y<sub>1</sub> 下标字2换行标签
<br> 或 <br/> 单标记标签
在编辑器中敲回车是不可以让大段文字换行的，如果需要让内容换行，可以使用该标签3注释
格式
注释就是不被浏览器解析执行的内容，它是为了解释代码用的
(1) 注释内部不能嵌套注释
(2) 在<>里不可以写注释
快捷键 Ctrl+/ 再按一次取消注释
4转义符号
© 版权声明 ©
® 注册商标 ®
™ 商标符号 ™
× 关闭符号/乘号 ×
⊗ 带圈的关闭符号⊗
÷；除号 ÷
< 小于号 <
> 大于号 >
空格
空格折叠现象：多个空格与换行会折叠成一个空格显示5段落标签
<p></p>
自己单独成行，上下方向有垂直的行间距
lorem是用于生成假文的，先输入Lorem出现提示回车或者Tab补全均可6标题字标签
<hn></hn>n从1~6
单独成行, h1最大 h6最小,字体加粗 上下有垂直的行间距7水平分割线标签
<hr> 或者 <hr/> 单标记标签
在页面上添加一条独占一行的分割线，我们还可以设置分割线的属性
<hr color="red" size="10px">图片
1图片
常见的图片格式：
jpg/jpeg 普通图片
png 透明图
gif 动图
webp 谷歌新出的图片格式
图片的问题不同担心，设计师会把所需的图片资源切好给我们
标签的属性和值
**属性：**也称为特征，用来描述标签某一方面的特点
Html定义了很多的属性和值，用来修改元素的样式和状态
写法: <开始标签 属性名1=“属性值1” 属性名2=“属性值2”></结束标签>
(1) 属性的声明必须写在开始标签里
(2) 一个html元素可能不止有一个属性，多个属性之间使用空格隔开
(3) 多个属性之间不区分先后顺序
(4) 属性名与属性值之间使用等号连接
(5) 属性值要包裹在引号中
如：
<img src="123.jpg" alt="哎呀图片走丢了"/><img /> 单标记标签属性：
src =“图片资源的路径/url”【必写】
alt =“资源加载失败时显示的替换文字”
width = “图片的宽度 单位(%或px)”
height = “图片的高度 单位(%或px)”
注意：
图片本身是有宽高的，如果设置图片宽高时的尺寸不符合图片本身的宽高比，图片会失真
失真：图片本身的比例与初始比例不符
解决方案：宽或高只写一个，另外一个会自动适应
2url
相对路径—参照物就是当前的html文件
同一级 src=“图片名.后缀名” 如：src="zichan2.jpg"
下一级 src=“同级的目录名/图片名.后缀名” 如：src="img/zichan1.jpg"
上一级 src=“../图片名.后缀名”如：src="../zichan3.jpg"·
绝对路径
是一个完整的路径，使用网络资源的时候，使用绝对路径
https://blog.kunkun.cool/image/touxiang.png优点：节省自己的服务器存储空间
缺点：资源不稳定，如果远程服务器删除资源，本地就找不到这个图片了
超链接
<a href=“”></a>
属性:
href=“要跳转的页面路径”
target=“打开跳转页面的方式”
_self 默认值，在本页面打开链接
_blank 在新的选项卡页面中打开链接锚点
在页面上定义一个位置，叫做锚点
我们可以使用a标签，跳转到锚点，页面会直接在这个位置显示
定义锚点的方式：
可以直接给html元素定义一个id值，id值直接当做锚点名称
<h3 id="c2">第二章 东海学艺</h3>
跳转到锚点位置：
<a href="#c2">快速跳转到第二章</a>
跳转到页面顶部：
<a href="#">快速跳转到页面顶部</a>
在写项目时，如果不知道href跳转到哪里，就先用#占位
<a href="#">跳转到登录页，但登录页还没写，不知道路径</a>表格
1表格的语法
table标签：表示网页的开始和结束，表格的所有内容都要写在这对标签里
tr标签：表示表格中的一行 table row
td标签：是真正存放数据的地方，一行有几个单元格就表示有几列 table datacell
2表格的可选标记
caption标签: 表格的标题
thead标签：表头部分
tbody标签：表主体部分
th标签：行/列的标题，文字加粗显示
3表格的属性
border=“1px” 给表格添加边框
style="border-collapse: collapse;" 表格默认的边框是带有间距的，想去掉可以加这句代码
4不规则的表格
写在td元素中
colspan=“n”跨列，从当前单元格开始，向右合并n个单元格
rowspan=“n” 跨行，从当前单元格开始，向下合并n个单元格
被合并的单元格一定得删掉！！！
5表格的大小
表格的大小是靠内容撑起来的
如果修改了某个单元格的高度，这一行单元的高度都会随之改变
同理，如果修改了某个单元的宽度，这一列单元格的宽度都会随之改变
列表
1有序列表
<ol> 有序列表 order list
<li> </li> 列表项 list item
<li> </li>
</ol>有序列表的属性
start=“4” 指定列表项的编号起始值从4开始 默认值是1
type=“1”指定编号的类型，默认值1代表阿拉伯数字
a小写字母 A大写字母 i小写的罗马数字 I大写的罗马数字
2无序列表
<ul> 有序列表 unorder list
<li> </li> 列表项 list item
<li> </li>
</ul>无序列表的属性
type=“disc”实心圆，默认值
circle空心圆 square方块 none没有标识
列表的嵌套
ul与ol的直接子元素必须是li
所以，所有被嵌套的内容都需要写在li中
表单
1特点
提供了一些可视化的输入控件
会自动收集整理用户输入的内容，并提交给服务器
2语法
<form></form>
可以添加的属性:
action=“url” 表示会将表单收集的数据提交到哪个服务器
目前我们可以先写一个#,表示提交到当前页面3input元素
公共属性：
type 设置input元素的类型，默认值是text
value 用来保存用户输入的值，用于后期提交给服务器
如果控件是按钮，value用来设置按钮上显示的文本
name 为控件起名字,注意：form表单必须起name否则提交不了数据
文本框与密码框
type=“text” 普通文本输入框
type=“password” 密码框
属性：
maxlength="5" 设置输入数据的最大长度
placeholder="请输入用户名" 提示文字
value="jack" 表示给当前输入框设置了一个默认值jack
这个属性不写默认也有，默认值为空，到时用户输入什么数据，value就保存什么值
按钮
type=“submit”提交按钮，会自动手机整理用户输入的数据，提交
type=“reset 重置按钮，会将表单的控件恢复到初始状态，注意不是清空
type="button" 普通按钮，后期会绑定JS代码
注意: 按钮的value属性是用来设置按钮上显示的文字
H5新增了一个表示按钮的标签 等价于上面的type=”button”
单选与多选框
type="radio" 单选框
type="checkbox" 多选框
属性：
name【必须加】 为控件起名并分组，一组单选框/多选框的名称必须相同才能实现效果
value【必须加】 不加提交的值是on
checked 表示当前项默认被选中
文件上传
请上传您的文件<input type="file" multiple>
multiple可以实现文件上传的多选效果h5新增的input控件
- 数字控件：
<input type="number" max="30" min="10" step="3"/>min 最小值 max最大值
step步长，一次递增/递减的大小，默认步长为1
注意：这个输入框无法阻止用户自行输入数据
- 颜色控件：
<input type="color"/>提供了一个取色器，可以选择不同的颜色，默认是黑色
- 日期控件：
<input type="date"/>可以年月日，后期如果想要其他更加精美的日期效果，可以使用其他的插件
- 月份控件：
<input type="month"/> 选择年-月- 星期控件：
<input type="week"/> 选择年-周 一年有52周- 搜索控件：
<input type="search"/> 提供了一个快速删除所有内容的小叉叉- 范围控件：
<input type="range" min="10" max="30" step="7"/>min最小值 max最大值 step步长，表示数字滑动的跨度
作用:可以控制区间，比如音量 地图缩放 进度
注意：设置步长时应该选取可以除得尽的值，否则区间中会有一部分值无法被选中
select下拉选择框
<select name="food" multiple>
<option value="1" >四川火锅</option>
<option value="2">东北乱炖</option>
</select>- 提交时如果没有给option设置value值，提交的就是option标签之间的文本
- selected 设置当前option默认被选中
- multiple 设置当前下拉选择框可以多选
textarea多行文本域
<textarea rows="10" cols="50"></textarea>rows="10" 文本域的行数，改变的是高度
cols="50" 文本域的列数，改变的是宽度
注意：默认的文本域大小可以被用户随意拖拽改变，想要禁用拖拽：
style="resize:none;"label关联控件
用于将form表单中的文本与控件进行关联
点击文本，效果如同点击控件
<label for="要关联控件的id值"></label>
<input type="checkbox" name="yes" id="y" value="1">
<label for="y">请同意此协议</label>浮动框架
iframe 用于在一个html页面中，引入其它的html页面
<iframe src="https://www.codeboy.com/xuezi/admin/login.html"></iframe>
属性：
src="" 被引入资源的路径
width="500px" 被引入资源在本页面显示的宽度
height="450px" 被引入资源在本页面显示的高度
frameborder="0" 去掉被引入资源的边框线
scrolling="no" 是否需要拖拽条，no表示不要滚动条
优势与劣势：
1.我们可以直接引入已经写好的页面，比较方便
2.被引入的页面使用了多次，复用性较高
3.样式不好控制
4.有额外的链接，请求的次数会增加，速度会变慢结构化标签
h5新增了带有结构语义的标签，来取代div
虽然在用户看来之前使用div没有区别，但是带语义的标签可以增加代码的可读性
很方便的实现页面各个部分的划分，让网络爬虫更快找到
但注意: 低版本的浏览器会不兼容
<header> </header> 定义网页的头部或者某个区域的顶部
<nav></nav> 定义网站的导航栏
<section></section> 定义网页的主体内容
<article></article> 定义与文字相关的内容，比如文章 论坛 回帖
<aside></aside> 定义网页的侧边栏比如分类 广告
<footer></footer> 定义网页的底部或者某个区域的底部