一、基本标签
1.三大标签
html标签是整个html文档的根节点 head标签是头信息标签，主要是做设置，比如字符集、网页标题、关键字提示 body标签是体标签，主要写网页需要显示的内容
2.标题标签
h1~h6是标题标签，独占一行，字体加粗，数字越小字体越大
1.标题标签：h1~h6，用作主标题，以此类推 <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6>
3.图片标签
img：图片标签，用作图片显示
<img src="图片路径" />-src:加载图片的路径，分为绝对路径和相对路径
绝对路径：从盘符开始，一直到文件的完整路径
<img src="D:/program/hqyj/html/program/html/img/1.jpg" />相对路径：从当前文件开始查找，一直到文件所在的位置
<img src="img/1.jpg" />-width:设置图片的宽度
-height： 设置图片的高度
<img src="img/1.jpg" width="200" height="100"/>-alt:当图片不能加载时显示在网页上的替代文字
-title:当鼠标放到图片上时显示的文字
<img src="img/1.jpg" width="200" height="100" alt="鬼刀" title="鬼刀的画"/>****图片标签不会独占一行，img是一个单标签
4.段落标签
段落标签 ：p标签 独占一行 行与行之间有空隙，是一个双标签
<p>我爱中国</p> <p>中国是我家</p> <p>中国共产党万岁</p>
5.链接标签
链接标签：a标签，不会独占一行
属性：
-href:跳转的页面的地址域名，可以是文件路径，也可以是域名
-target:以什么方式跳转页面 _blank:新打开一个页面 _self:默认不打开，在当前窗口跳转
<a href="http://wwww.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
属性：
<a href="http://wwww.baidu.com" target="_blank">百度</a>
<a href="http://www.sina.com" target="_blank">新浪</a>
文件：
<a href="index.html" target="_blank">打开文件路径</a>5.1锚点
-
跳转底部：需要给底部最后一个元素添加唯一标识id，在href里用#id跳转
-
跳转到自然段：同上，给某个自然段添加唯一标识id，在href里用#id跳转
-
跳转顶部：只使用#就可以了
<body>
<a href="#bottom">跳转到底部</a>
<a href="#p11">跳转到p11</a>
<p>中国1</p>
<p>中国2</p>
<p>中国3</p>
<p>中国4</p>
<p>中国5</p>
<p>中国6</p>
<p>中国7</p>
<p>中国8</p>
<p>中国9</p>
<p>中国10</p>
<p id="p11">中国11</p>
<p>中国12</p>
<p>中国13</p>
<a href="#" id="bottom">回到顶部</a>
</body>6.列表标签
6.1有序列表标签
ol:有序列表标签
li:列表项
type:设置序号的样式，默认值为1，表示按数字排序（1，2，3，4）
- "a"：表示以小写字母排序（a,b,c）
- "A":表示以大写字母排序（A,B,C)
- "i":表示以小写罗马数字排序
- "I"：表示以小写罗马数字排序
-start:表示从第几个开始排序，比如start=”2“，表示从第二个开始排序
<ol type="i">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ol>6.2无序列表标签
ol:无序列表标签
li:列表项
type:列表选项：
- circle:空心圆圈
- square:实心方块
- disc:实心圆，默认值
<ul type="desc">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>7.换行标签
<br/>单标签 换行8.水平线标签
<hr/> 水平线标签 可以分隔一些内容，单标签9.粗体、斜体、下划线标签
粗体：b标签
<b>java</b>
斜体：i标签
<i>java</i>
下划线：u标签
<u>java</u>java
java
java
10.上标、下标标签
上标：sup标签
数字平方： 4<sup>2</sup>
下标：sub标签
4<sub>2</sub>11.HTML字符实体
空格：
小于：>
大于：<
大于等于：≥
小于等于：≤
注册商标：®
版权：©二.div标签
最常用块级容器，用来分块，经常与CSS一起使用，来布局网页
div是一个块级元素，独占一行，与css结合使用，用来做页面布局
<div style="border: 1px solid red;width: 200px;height: 100px;">
这是一段内容
</div>三.表格标签
简单的HTML表格由table标签以及一个或者多个tr、td或th标签组成。
独占一行
table:表格标签
tr:表示一行
td:表示一列
th:表示表头列
width:表示宽度
height：表示高度
border:边框，-0表示不显示边框，>0 表示边框的宽度
cellspacing:边框的间距
cellpadding:单元格向内填充
align:对齐，left--左对齐，默认值，center--居中对齐，right--右对齐
rowspan:合并行
colspan:合并列
<table width="600" border="1" cellspacing="0" cellpadding="5" >
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr align="center">
<td>java</td>
<td>10</td>
<td>20</td>
<td>200</td>
</tr>
<tr align="center">
<td>c++</td>
<td rowspan="2">15</td>
<td>10</td>
<td>150</td>
</tr>
<tr align="center">
<td>python</td>
<td>30</td>
<td>450</td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="3">800</td>
</tr>
</table>注意：
border-collapse:collapse：去掉边框的间隙
练习一个表格，图片如下：
四.表单标签
form标签，通常用来做用户注册和登录页面
表单由文本框、密码框、列表框、单元框、多选框、按钮、多行文本框
form:表单标签
---action：提交到哪个地方
---method：提交方式
**get**:显示为可视化的数据post:非可视化数据
input:文本输入框
-type:类型
-text:文本框普通的文本输入框
-password：密码框
-radio：单选框
-checkbox：复选框
-submit：提交按钮
-select：下拉列表框
-textarea：文本域
-row:行
-cols:列
-button:按钮，可以通过事件触发操作
4.1表单格式：
表单格式：
<form action="提交到的地方" method="提交的方式get/post">
账号：<input type="text" name="userName" id="userName" placeholder="请输入用户姓名"> <br />
密码：<input type="password" name="passWord" id="passWord" placeholder="请输入用户密码"/> <br />
性别：<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女 <br />
爱好：<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球 <br />
星座：<select >
<option value="jinniu">金牛座</option>
<option value="chunv">处女座</option>
<option value="shizi">狮子座</option>
<option value="baiyang">白羊座</option>
<option value="mojie">魔羯座</option>
</select>
<br />
备注：
<textarea>声明................</textarea>
<br />
<input type="button" value="注册" />
</form>
4.2练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="index.html" method="post">
<label>账号：</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"/>
<br/>
<label>密码：</label>
<input type="password" name="pwd" id="pwd" placeholder="请输入密码"/> <br/>
<lable>性别：</lable>
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
<br/>
<lable>爱好：</lable>
<input type="checkbox" name="hobby" value="basketboll"/>篮球
<input type="checkbox" name="hobby" value="footboll"/>足球
<br/>
<label>星座:</label>
<select>
<option value="1">金牛座</option>
<option value="2">处女座</option>
<option value="3">狮子座</option>
<option value="4">水瓶座</option>
</select>
<br/>
<label>备注：</label>
<textarea name="ramark" id="ramark" rows="5" cols="50">声明.........</textarea>
<br/>
<input type="submit" name="btn" id="btn" value="注册">
<button id="btn1">取消</button>
</form>
</body>
</html>五.span标签
把实际内容包含起来，不能控制宽高，宽高是由实际的内容确定的，并且不会独占一行
<span>内容</span>六.iframe
iframe:内联框架，内联标签，可以嵌套其他的页面
常用属性: 1. frameborder(常用) ：是否显示边框 ， 取值 yes ， no； 2. height：框架作为一个普通元素的高度，建议采用css设置； 3. width：框架作为一个普通元素的宽度，建议采用css设置； 4. name：框架的名称，window.frame[name]时专用的属性； 5. scrolling(常用)：框架是否带有滚动条，取值 yes ，no ； 6. src (常用)： 内框架的地址，可以是页面地址，也可以是图片的地址； 相对一般标签，iframe特别属性只有三个： frameborder，scrolling，src，所有的iframe几乎都要指定。
iframe的基本属性与其它元素一样，有样式的，也有特有的。
对于样式部分可以使用css设置，以下为iframe的常用属性。
iframe在布局、无刷新网页等方面有很重要的地方。虽然现在很流行div布局，但是有时依然会用到iframe布局。 在2005年人们开始使用ajax进行无刷新，但是在一些特效情况下还得使用iframe；特别是在fash动画内嵌套html 时，使用的更多。
iframe即内联框架。 对于外围的页面，iframe是一个普通的元素，对于iframe里面的内容，又是一个五脏六腑俱全的页面。iframe就是一个普通的元素，与span、div一样。 那么，iframe是内联元素还是块元素？首先，iframe和canvas标签一样可以设置宽（width）和高（height）并且有效。其次，iframe像普通文本一样不会换行， 因此iframe是一个行内块元素（inline-block）。
<body>
<div>这是一段文字</div>
<iframe src="http://www.sina.com.cn" scrolling="yes" frameborder="yes" width="100%" height="300">
</iframe>
</body>七.块元素和行内元素
1.块级元素（block element）
块级元素（block element）：在网页中一般通过块级标签来将页面分块，从而达到布局的效果
主要特点如下：
-
独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
-
可以直接控制宽度、高度以及盒子模型的相关CSS属性
-
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
-
在不设置高度的情况下，块级元素的高度是它本身内容的高度
-
块级元素什么都能放，但 p 元素里不能放 h1 等分级标题元素
常用的块级元素：
| 元素 | 描述 |
|---|---|
| div | 最常用块级元素，用来分块，没有语义 |
| h1 | 一级标题 |
| hr | 水平分割线 |
| ol | 有序列表 |
| ul | 无序列表 |
| li | 列表项 |
| table | 表格 |
| p | 段落 |
| form | 表单 |
2.行内元素
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行
主要特点：
-
和其他内联元素从左到右在一行显示
-
不能直接控制宽度、高度以及盒子模型的相关CSS属性，但是直接设置内外边距的左右值是可以的
-
内联元素的宽高是由本身内容的大小决定（文字、图片等）
-
内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
-
通常被包含在块级元素中
常用的行内元素：
| 元素 | 描述 |
|---|---|
| a | 锚点 |
| b | 加粗 |
| span | 最常用内联元素，划分内联元素里的区 |
| strong | 加粗强调 |
| i | 斜体 |
| em | 斜体强调 |
| br | 强制换行 |
| u | 下划线 |
| sup | 上标 |
| sub | 下标 |
可替换元素：
根据元素的标签和属性，来决定元素的具体显示内容
img：根据src读取图片信息，并设置图片的宽高，具有行内元素和块级元素的特性
iframe：不会自动换行，是行内元素，可以设置宽高
7.案例练习
模仿百度首页：
代码：用来少量的CSS，下期讲解.......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
</head>
<style>
body{
padding-top: 8px;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: blue;
}
header{
font-size: 10px;
word-spacing: 18px;
}
.left{
margin:0px;
margin-left: 10px;
float: left;
}
.right{
margin:0px;
float: right;
margin-right: 10px;
}
button{
background-color: royalblue ;
border-radius: 5px;
color: white;
border: royalblue;
}
.center img{
width: 240px;
height: 115px;
}
.center{
padding-top: 60px;
margin: auto 0;
text-align: center;
}
.sousuo{
}
.k{
margin-top: 10px;
width: 600px;
height: 35px;
border: 1.5px solid blue;
border-radius: 10px;
}
.b{
height: 41px;
width: 100px;
border-radius: 1px 10px 10px 1px ;
margin-left: -105px;
margin-top: 10px;
font-size: 15px;
}
.sousuo img{
margin: auto 0;
height: 35px;
width: 50px;
margin-left: -150px;
margin-right: 10px;
}
.kao{
margin:40px;
}
.kao a{
font-size: 15px;
color: cornflowerblue;
}
.l1{
color: cornflowerblue;
}
.l2{
color: lightskyblue;
}
.center1{
width: 600px;
margin: 0 auto;
font-size: 13px;
}
.left1{
float: left;
font-family: 微软雅黑;
}
.right1{
float:right
}
.center1 table{
padding-top: 20px;
word-spacing: 10px;
float: left;
margin-left: 0px;
font-size: 15px;
}
.center1 b{
color: sandybrown;
clear: both;
}
.footer{
margin:0 auto;
margin-top:500px;
clear: both;
word-spacing:6px;
text-align: center;
}
.footer a{
font-size: 5px;
color: darkgray;
}
</style>
<body>
<!-- 头部 -->
<header>
<span class="left">
<a href="http://news.baidu.com/" target="_blank">新闻</a>
<a href="https://www.hao123.com/?src=from_pc" target="_blank">hao123</a>
<a href="https://map.baidu.com/@11585280.82,3555907.48,12z" target="_blank">地图</a>
<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>
<a href="https://image.baidu.com/"" target="_blank">图片</a>
<a href="https://pan.baidu.com/?from=1026962h" target="_blank">网盘</a>
<a href="https://www.baidu.com/more/" target="_blank">更多</a>
</span>
<span class="right">
<label>设置</label>
<button>登录</button>
</span>
</header>
<!-- 中间部分 -->
<div class="center">
<img src="../img/baidu.png" >
<div class="sousuo">
<input type="text" class="k" />
<!-- <img src="../img/p.png" > -->
<button class="b">百度一下</button>
</div>
<div class="kao">
<a>高考上百度，一站式智能报考!</a>
<label class="l1"><b>></b></label>
<label class="l2">></label>
</div>
</div>
<div class="center1">
<span class="left1">
<a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank"><h3>百度热搜></h3> </a>
</span>
<span class="right1">
<a><h3>◯ 换一换</h3></a>
</span>
<table>
<tr>
<td><b>↥</b> <a>庆祝香港回归25周年 </a> </td>
<td class=""><b>3</b> <a>香港回归25周年及奶奶曲祝福</a></td>
</tr>
<tr>
<td> <b>1</b> <a> 明起冰墩墩停产 </a></td>
<td class=""><b>4</b> <a>杭州西湖被暴雨“隐藏”了</a> </td>
</tr>
<tr>
<td> <b>2</b> <a> 是否会建更多大型航母？国防回应 </a></td>
<td class=""> <b>5</b> <a> 公司误发330薪后员工辞职跑路</a></td>
</tr>
</table>
</div>
<div class="footer">
<a href="https://home.baidu.com//" target="_blank">关于百度</a>
<a href="https://ir.baidu.com/" target="_blank">About Baidu</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">京ICP证030173号</a>
<a href="" target="_blank">药品医疗器械网络信息服务备案（京）</a>
<a href="" target="_blank">网药械信息备字（2021）第00159号</a>
</div>
</body>
</html>下期----CSS(层叠样式表)......