# 超文本标签与标签属性
## 小概念的普及
### 前端三层
- HTML搭结构、骨架
- CSS样式（装修）text-decoration: none;
- javascript（JS）交互、动态的效果
### 网页
网页是构成网站的基本要素，HTML文件其实就是一个网页。
### 网站
由多个网页组成的。
### 站群（流水线统一化管理）
由多个网站的组成的，为同一家公司服务
例如：整个百度下所属的子公司都有自己的网站，百度音乐、百度金融、百度外卖...
### 浏览器
最好用的浏览器:谷歌浏览器
IE浏览器
## 网页的基本组成
-HTML 骨架，搭结构的
-CSS 样式，装修
-JS 交互，动态效果
### HTML（超文本标记语言）
网页文件本身是一种文本文件（除了文字暂无其他），只有通过特定的标记描述，这些普通文本才能在浏览器这中正常显示，在页面中如果遇到图片、音视频的时候如何如何用文本描述，需要用**超文本（标签）**进行引入才可以正常显示
<img src=""> 图片 #### 超文本（标签）
标签语法：由成对的尖括号和关键字组成的，叫做标签
关键字: 是已经规范好的，不能自己随便制造的
<div></div>
##### 标签分类
-开始标签：<div>
-结束标签: </div>
-空标签： <br/> <img src="">
##### HTML元素
-可以将元素理解成一个容器，容器中放置的就是我们网页中的主要内容
元素（标签）:由标签和内容组成的
##### 元素的分类
-由开始标签和结束标签组成的元素，元素中可以添加内容
-只有一个空标签，只能进行功能的添加，例如<img src=""> <input type="text">
## 常用的HTML元素有哪些？
- 标题类:`h1~h6`
- h1标签在HTML页面中只能出现1此，其他标签可以出现多次
- 列表类
- 无序列表 ul 前面默认有小黑点
- 有序列表 ol 前面默认有序号
- 自定义列表 dl（常用在网站的尾部和新闻摘要上）
- 标题dt：只能出现一次
- 描述dd:可以多次出现
- 区分大模块
<div>区分大模块</div>
- 区分行内小模块
<span>区分行内小模块</span>
- 段落
<p>DEBUG，意为程序除错的意思。为马克1号编制程序的是一位女数学家雷斯.霍波，有一天，她在调试程序时出现故障，拆开继电器后，发现有只飞蛾被夹扁在触点中间.</p>
- 加粗
<strong>加粗strong,重点强调</strong>
<b>加粗b</b>
- 斜体
<em>斜体em，重点强调</em>
<i>斜体i</i>
- 插入图片 img:标签 src:图片地址、路径 alt:图片的描述
<img src="1-2-1.webp" alt="房子">
div/span标签是无意义标签，尽量少用
标签属性
标签属性提了有关HTML元素更多的信息
一个标签可以有多个标签属性，每个属性之间用空格隔开
语法：由标签的属性名和标签属性值组成的
<img src="1-2-1.webp" alt="房子">
img 标签
src="" alt="" 属性标签 src是属性名 ""里面得值是属性值 ### 超链接、锚点
a 锚点
如果想用锚点的效果，浏览器必须出现滚动条
<a href="#top">点击</a> <div id="top">基本信息</div> 禁止跳转的两种方式
<a href="##">点击</a>第一种 <a href="javascript:;">点击</a>第二种
<a href="">点击</a>可以做回到顶部的效果 <a href+"">回到顶部</a> ### table表格
常用写法
<!-- 表格 tr是行 td是列-->
<table border="1"> <tr> <td>1</td> </tr> </table> 标准写法
<table> <!-- 表格标题 --> <caption></caption> <!-- 表格头部 --> <thead> <tr> <td></td> </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <td></td> </tr> </tbody> <!-- 表格尾部 --> <tfoot> <tr> <td></td> </tr> </tfoot> </table> ### 表单类
一般常用在登陆、注册、调差问卷的结构上
<!-- 表单类 input用来添加表单功能的-->
<input type="text"> 文本框 <input type="password">密码框 <input type="button" value="登陆">提交按钮 <input type="radio"> 单选按钮 <input type="checkbox">多选按钮 <br> 您对登陆页面整体满意吗？ <br> <input type="radio" name="anniu">满意 <br> <input type="radio" name="anniu">不满意 <br> 你喜欢我吗？ <br> <input type="checkbox">喜欢 <br> <input type="checkbox">非常喜欢 <!-- 文本域 textarea 文本域--> <!-- maxlength最大长度 minlength 最小长度 --> <textarea maxlength="10" minlength="10">文本域</textarea> <br> <!-- 下拉框 select 下拉框 --> <select> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> <option value="">成都