html中的标签是用来给文本添加语义的，不是用来修改文本样式的
h标签 - 标题
一共6级标题，独占一行
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
p标签 - 段落
作用：告诉浏览器哪些文字是一个段落
独占一行
<p>一段文字</p>
hr标签 - 水平分割线
作用：添加水平分割线
独占一行
<hr>
img标签 - 图片
不是独占一行了
属性：
src - 图片资源路径
width - 宽度
height - 高度
title - 鼠标悬停图片的时候的提示信息
alt - 图片没有找到是的信息
注意：
直接设置宽和高会导致图片变形，如果希望能保证宽高比，只需要设置宽或者高的一个，浏览器就会自动去计算另外一个
br标签 - 换行
企业开发中，很少用到br。即便是淘宝，整个页面就4个
<br>
br标签的语义:在不开启新的段落的情况下换行 -- 也就是说br换行的上下2段是一个完整的段落（而我们使用p标签换行，会重新起一个新段落）
路径问题
企业开发中不会使用绝对路径的,都是相对路径。因为代码是从服务器加载的，本地根本没有
相对路径：在html文件所在的当前文件夹去查找
绝对路径：
- 开发中一律使用反斜杠/,
- 使用绝对路径的可移植性很差，换个盘符就找不到了
a标签
a标签的作用：控制页面与页面之间的跳转，也可以当前页面的跳转
格式：
<a href="跳转的链接">展示给用户的内容</a>
a标签的特点：
- 都有下划线
- 鼠标移动在a标签时，鼠标会变成小🖐图标
注意：
- 一个a标签必须有一个href属性，否则a标签不知道跳转到哪里
- a标签不仅可以让包裹的文字可以点击，也可以让包裹的图片能够被点击
- 如果通过a标签的href属性指定一个网络上的url地址，那么必须加上http://或者https://
a标签的属性：
target -- 专门用来控制如何跳转
_self（默认值） --在当前页面跳转
_blank --在新页面进行跳转
title属性 -- 和img的title属性一样，都是用来控制器鼠标悬停时的提示
base标签
这个标签是专门用来指定所有的a标签，点击时候的跳转方式的
- base标签必须写在<head>标签的开始和结束之间
- 如果摸个标签有特殊需求，可以重新设置target，来覆盖原来的值
假链接
在项目开发初期，跳转的页面还没有写好，只能先跳转到假链接，当项目后期其他界面都完成时再把真链接替换上去
假链接的格式：
- javascript:
2者的区别
#的假链接会自动回到网页的顶部，而javascript:的假链接不会回到顶部
京东返回顶部的功能实现 - 使用#假链接
锚点
在当前页面跳转到不同的位置
格式:
<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>
注意点:
1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
格式:
<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>
<h2 id="bottom">我是锚点测试界面33333</h2>
ul/ol/dl 列表标签
1.什么是列表标签?
列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
2.HTML中列表标签的分类
2.1无序列表(最多)(unordered list)
2.2有序列表(最少)(ordered list)
2.3定义列表(其次)(definition list)
ul
1.无序列表作用:
给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分
什么叫有先后之分?
例如: 排行榜
什么叫没有先后之分?
例如: 中国有哪些城市
2.无序列表格式:
<ul>
<li>需要显示的条目内容</li>
</ul>
li其实是英文list item的缩写
list是列表的意思
item是条目的意思
所以结合起来就是 列表条目的意思
注意点:
1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
- ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签
无序列表应用场景:
1.新闻列表
2.商品列表
3.导航条
==ul类似iOS中的tableView/collectionView,li类似iOS中的cell==
ul不管是水平还是垂直方向都可以，所以更类似collectionView
ol - 有序列表
可以直接跳过了，开发中很少用到，比ol就是多了一个1，2，3，4的序号
dl - 定义列表
开发中还是会用到的
- 和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现。
- 和li标签一样, 当需要丰富界面时, 我们可以在dt和dd标签中继续添加其它标签
用途：
- 图文混排（人物简介）
- 做网站尾部的相关信息
table - 表格标签
基本可以忽略了，曾经是一个时代的代表，以前基本都是用table来搭建的界面，现在逐渐被div，css取代了
form 表单
用途：收集用户数据，上传后台
表单的格式:
<form>
<表单元素>
</form>
常见的表单元素
input
select
textarea
input标签
input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同
注意:
表单元素一定要写在表单中
<form>
<!--明文输入框-->
账号:<input type="text"><br>
<!--暗文输入框-->
密码:<input type="password"><br>
<!--给输入框设置默认值-->
账号:<input type="text" value="lnj"><br>
密码:<input type="password" value="123"><br>
<!--
单选框
注意点:
1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值
-->
性别:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>
<!--多选框-->
爱好:
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴
</form>
<form action="http://www.520it.com">
<!--明文输入框-->
账号:<input type="text" name="aa"><br>
<!--暗文输入框-->
密码:<input type="password" name="bb"><br>
<!--
定义普通按钮
可以通过value属性来给按钮指定标题
作用: 配合JS完成一些操作
-->
<input type="button" value="我是按钮">
<!--
图片按钮
作用: 配合JS完成一些操作
-->
<input type="image" src="images/register.jpg">
<!--
重置按钮
作用: 用于清空表单中已经填写好的数据
注意点:
如果想想改重置按钮默认的按钮标题可以通过value属性来修改
-->
<input type="reset" value="清空">
<!--
提交按钮
作用: 将表单中已经填写好的数据, 提交到远程服务器
注意点:
要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
2.需要给需要提交到服务器的表单元素添加一个name属性
-->
<input type="submit">
<!--
隐藏域
作用 : 配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器
Ajax
-->
<input type="hidden" name="cc" value="kukuku">
</form>
label标签
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签
3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
<label for="account">账号:</label><input type="text" id="account">
datalist标签
1.datalist标签
作用: 给输入框绑定待选项
2.datalist格式:
<datalist>
<option>待选项内容</option>
</datalist>
3.如何给输入框绑定待选列表
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
请输入你的车型: <input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>
其他表单元素
- select
- textarea
1.select标签
作用: 用于定义下拉列表
格式:
<select>
<optgroup label="分组名称">
<option>列表数据</option>
</optgroup>
</select>
注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>昌平区</option>
<option>通州区</option>
</optgroup>
<optgroup label="广州">
<option>天河区</option>
<option>越秀区</option>
<option>黄浦区</option>
</optgroup>
</select>
2.textarea标签
作用: 定义一个多行输入框
格式:
<textarea>
</textarea>
注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的
