2021-07-27
HTML基础2
一、锚点定位
作用：通过创建锚点链接，使用户能够快速定位到目标内容
创建步骤：
（1）在跳转目标的位置添加id名标注
（2）使用
示例代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>锚点跳转title>
head>
<body>
<a href="#zao">1、早年经历 <br>
<img src="../day01-07-26/duola.webp" alt="">
a> <br>
<a href="#yan">2、演艺经历 <br>
<img src="../day01-07-26/duola.webp" alt="">
a> <br>
<a href="#ge">3、个人生活 <br>
<img src="../day01-07-26/duola.webp" alt="">
a>
<div id="zao"> <b>早年经历b> div>
<p>赵丽颖出生于河北廊坊市一个普通家庭，祖辈都是农民，父亲原是派出所民警，母亲原是百货商店售货员。农村的生活经历，磨练出了她坚强的意志，也造就了其坚韧顽强的个性。从廊坊市电子信息工程学校空乘专业毕业后，由于家庭经济条件的限制，她放弃报考空姐的机会，而选择在一家公司做销售的工作。[10]。步入社会后，赵丽颖做了很多职业，不仅当过销售，还在餐厅当过服务员。[11]演艺经历p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="yan"><b>演艺经历b>div>
<p>2006年5月，在雅虎搜索网、浙江卫视、华谊兄弟联合主办的雅虎搜星比赛中凭借良好表现以及投票网友的支持，最终获得冯小刚组冠军，因而在冯小刚执导的广告片《跪族篇》中担任女主角[12]；同年，签约华谊兄弟公司，并与周迅合作拍摄玉兰油广告；11月，其加盟由张国立、蒋雯丽倾情主演的电视连续剧《金婚》，饰演蒋雯丽14至17岁的三女儿多多[13]；12月，与王刚、宁静、唐国强携手出演古装剧《南越王》，剧中饰演小皇后一角。2007年，参演电影处女作《镖行天下之牡丹阁》；1月，与郭晓冬、刘孜、归亚蕾共同出演爱情剧《世纪不了情》；同年，在民国爱情剧《春去春又回》中饰演温婉可人的任洁儿。[14]p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="ge"><b>个人生活b>div>
<p>2019年3月4日，赵丽颖成为和颂传媒全新合伙人。[103]5月23日，凭借电视剧《知否知否应是绿肥红瘦》获第25届上海电视节白玉兰奖最佳女主角奖提名。[104]12月28日，获得腾讯视频星光大赏年度最具商业价值艺人[105]。p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
body>
html>
二、base标签
base单标签，可以设置整体链接打开的状态，设置在head里
示例代码：
DOCTYPE html>
<html lang="en">
<head>
<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>链接标签title>
<base href="" target="_blank">
head>
<body>
<a href="https://www.baidu.com/">百度一下，你就知道a> <br>
<a href="https://y.qq.com/?ADTAG=myqq#type=index" title="畅享QQ音乐">
<img src="./duola.webp" alt="image" style="width: 100px; height: 100px;">a> <br>
body>
html>
三、列表标签
1、有序列表标签ol
有序列表即为排列有序的列表，各个列表按照一定的顺序排列。
ol定义有序列表，有type属性，取值有：a 、 A、1、I、i
示例代码1：
<ol>
<li>年龄li>
<li>性别li>
<li>民族li>
<li>住址li>
ol>
示例代码2：
<ol type="1">
<li>
<a href="#">早年经历a>
li>
<li>
<a href="#">演艺经历a>
li>
<li>
<a href="#">个人生活a>
<ul>家庭生活ul>
<ul>感情经历ul>
<ul>投资理财ul>
li>
ol>
2、无序列表标签ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。
无序列表ul有type属性，取值有：circle 空心圆 square 实心方块 disc 实心圆
示例代码：
<ul type="disc">
<li>年龄li>
<li>性别li>
<li>民族li>
<li>住址li>
ul>
3、自定义列表
自定义列表常用于术语或名词的解释，定义列表的列表项没有任何项目符号。
示例代码：
DOCTYPE html>
<html lang="en">
<head>
<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>自定义列表title>
head>
<body>
<dl>
<dt>关于我们dt>
<dd>公司介绍dd>
<dd>练习我们dd>
dl>
<dl>
<dt>关于我们dt>
<dd>公司介绍dd>
<dd>练习我们dd>
dl>
<dl>
<dt>关于我们dt>
<dd>公司介绍dd>
<dd>练习我们dd>
dl>
body>
html>
Tip：dd是对dt进行描述或者解释的，一个dt可以拥有多个dd
四、表格标签
表格是较为常用的一种标签，不是用来布局，而是用来处理、显示表格式数据
Tip:
（1）table用于定义表格
（2）tr用于定义表格的一行，必须嵌套在table标签中，在table标签内有几对tr，就有几行表格。
（3）td用于定义表格中的单元格，必须嵌套在tr标签中，在tr标签内有几对td，就有几个单元格（列）
（4）tr中只能嵌套td
（5）table标签中可添加的属性：border:边框（border的值不能小于1，如果小于1则等同于0） cellspacing:单元格与单元格之间的间隙 cellpadding:单元格内容与单元格边框之间的间隔 bgcolor:背景颜色 background:背景图片
bordercolor:边框颜色 align:对齐方式 width:宽度 height:高度
示例代码：
DOCTYPE html>
<html lang="en">
<head>
<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>表格title>
head>
<body>
<table border="1px" cellspacing="0" cellpadding="10" align="center" width="500px" height="300px" background="../day01-07-26/duola.webp" >
<tr>
<td>td>
<td>低端 <br>10元以下td>
<td>低端 <br>10-20td>
<td>低档 <br>20-30td>
<td>中档 <br>30-100td>
tr>
<tr>
<td>市场规模td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>代表品牌td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>主流品牌td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>市场度数td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
table>
body>
html>
效果如下：
五、表格结构
1、表格标题 caption
表格的标题用caption标签来定义，必须定义在table标签之后，并且每个表格只能定义一个标题，标题会居中于表格之上。
2、表格头部thead
3、表格主体tbody
4、表格页脚tfoot
示例代码：
DOCTYPE html>
<html lang="en">
<head>
<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>表格练习title>
head>
<body>
<table border="1px" cellspacing="0px" cellpadding="10px" width="500px" height="200px" align="center" background="../day01-07-26/duola.webp">
<caption>小说排行榜caption>
<thead>
<tr>
<td> <b> 排行b>td>
<td> <b>关键词b>td>
<td> <b>趋势b>td>
<td> <b>今日搜索b>td>
<td> <b>最近七日b>td>
<td> <b>相关链接b>td>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>鬼吹灯td>
<td><img src="./down.png" alt="" style="width: 20px; height: 20px;"> td>
<td align="center">233td>
<td align="center">233td>
<td>
<a href="https://baike.baidu.com/search/none?word=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7&pn=0&rn=10&enc=utf8">贴吧a>
<a href="https://bkimg.cdn.bcebos.com/pic/1c950a7b02087bf40ad13ff35f9b402c11dfa9ec61da?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg">图片a>
<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科a>
td>
tr>
<tr>
<td>2td>
<td>盗墓笔记td>
<td> <img src="./down.png" alt="" style="width: 20px; height: 20px;">td>
<td align="center">233td>
<td align="center">233td>
<td>
<a href="https://baike.sogou.com/v156838.htm?fromTitle=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0">贴吧a>
<a href="https://imgranwena.cdn.bcebos.com/files/article/image/3/3164/3164s.jpg">图片a>
<a href="https://baike.sogou.com/v156838.htm?fromTitle=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0">百科a>
td>
tr>
<tr>
<td>3td>
<td>西游记td>
<td><img src="./down.png" alt="" style="width: 20px; height: 20px;">td>
<td align="center">233td>
<td align="center">233td>
<td>
<a href="https://baike.baidu.com/search/none?word=%E8%A5%BF%E6%B8%B8%E8%AE%B0%E8%B4%B4%E5%90%A7&pn=0&rn=10&enc=utf8">贴吧a>
<a href="https://bkimg.cdn.bcebos.com/pic/b7fd5266d01609248d763e43db0735fae6cd3412?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg">图片a>
<a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723?fr=aladdin">百科a>
td>
tr>
tbody>
table>
body>
html>
六、合并单元格
（1）跨行合并：rowspan rowspan =“合并单元格个数”
（2）跨列合并：colspan colspan =“合并单元格个数”
七、表单标签
表单：目的是为了收集用户信息
HTML中，一个完整的表单由：表单控件（表单元素）、提示信息、表单域
1、input控件
input标签是单标签，type属性是其最基本的属性，除此之外还有name、value、size、checked、maxlength
2、文本域
通过input type =“text” 来设定
3、密码字段
通过input type =“password” 来设定
4、单选按钮
通过input type =“radio” 来设定,通过同一个name值定义同一组
5、复选框
通过input type =“checkbox” 来设定
6、普通按钮
通过input type =“button” 来设定
6、提交按钮
通过input type =“submit” 来设定
7、重置按钮
通过input type =“reset” 来设定
8、图片按钮
通过input type =“imge” 来设定
10、文件域（上传文件）
通过input type =“file” 来设定
11、聚焦输入框 label
用于绑定一个表单标签，当点击label标签时，被绑定的表单元素就会自动获得输入焦点
12、textarea控件文本域
可创建多行文本输入框
<tr>
<td>自我介绍td>
<td>
<textarea name="introduce" id="" cols="30" rows="10">textarea>
td>
tr>
13、下拉菜单
使用select控件定义下拉菜单
<select name="years" id="">
<option value="">--请选择年份--option>
<option value="">1997年option>
<option value="">1998年option>
<option value="">1999年option>
<option value="">2000年option>
<option value="">2001年option>
select>
14、表单域
form标签定义表单域，用于实现用户信息的收集与传递