第二天：HTML基础
今天要学习的内容是HTML基础，包含超链接、表格、列表、表单等
一、超链接
<a href="">a>
属性：
Href= "要跳转的页面路径"
案例：
<a href="p1.html">跳转到今天的第一个页面a>
<a href="../day02code/p1.html">跳转到今天的第二个页面a>
//self
表示当前页打开
<a href = "http://www.baidu.com" target="_self">跳转到百度a>
//blank
表示新页面打开
<a href = "http://www.baidu.com" target = "_blank">跳转到百度a>
//锚点的使用：href = "# + id 值"
<a href = "#">跳转到顶部a>
<a href = "#c1">跳转到指定id的标签位置a>
二、表格
普通表格以及表格的语法
table标签：表示网页的开始和结束，表格中的所有内容都要写在这对标签中。
tr标签：表示表格中的一行 table row。
td标签：是真正存放数据的地方，一行有几个单元格就表示有几列 table datacell。
th标签：加粗的td标签。
thead标签：用于包裹表头，便于程序管理。
tbody标签：用于包裹表身，便于程序管理。
<table border="1px" style="border-collapse: collapse;">
<caption>鲜鱼价目表caption>
<thead>
<tr>
<th>序号th>
<th>鱼的种类th>
<th>价格th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>草鱼td>
<td>18.6td>
tr>
<tr>
<td>2td>
<td>鲤鱼td>
<td>28.9td>
tr>
tbody>
table>
不规则的表格
写在td元素中。
colspan = " n " 跨列，从当前单元格开始，向右合并n个单元格。
rowspan = “n” 跨行， 从当前单元格开始，向下合并n个单元格。
被合并的单元格一定得删掉。
<table border="1px">
<tr>
<td colspan="2">1-1td>
<td>1-3td>
<td rowspan="3">1-4td>
tr>
<tr>
<td>2-1td>
<td rowspan="2">2-2td>
<td>2-3td>
tr>
<tr>
<td>3-1td>
<td>3-3td>
tr>
table>
注意事项
表格的大小是靠内容撑起来的。如果修改了某个单元格的高度，这一行单元的高度都会随之改变。
同理，如果修改了某个单元的宽度，这一列单元格的宽度都会随之改变
三、列表
有序列表和无序列表
<body>
<ol start="1" type="1">
<li>把冰箱门打开li>
<li>把大象塞进去li>
<li>把冰箱门关上li>
ol>
<ul type = "none">
<li>唐三藏li>
<li>猪八戒li>
<li>孙悟空li>
ul>
body>
列表的嵌套
ul 和 ol 的直接子元素必须是li 。
所以，所有被嵌套的内容都需要写在 li 中。
四、表单
特点
- 提供了一些可视化的输入空间。
- 会自动收集整理用户输入的内容，并提交给服务器。
语法和案例
<form action="#">
用户名<input type="text" value="jack" name="account" placeholder="请输入用户名" maxlength="11"/><br/>
密码<input type="password" name="password" placeholder="请输入密码" maxlength="6"/><br />
<input value="我是提交按钮" type="submit"/>
<input value="我是提交按钮" type="reset"/>
<button>我是一个按钮button>
性别<input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 <br />
爱好<input type="checkbox" name="hobby"/>吃饭
<input type="checkbox" name="hobby" checked />睡觉
<input type="checkbox" name="hobby" />打豆豆 <br />
<input type="image" src="1.jpg" width="100px" height="100px" /><br />
上传头像<input type="file" />
年龄<input type="number" max="10" min="1" name="age" step="1"/>
幸运色<input type="color"/>
选择日期<input type="date"/>
月份<input type="month"/>
考试周<input type="week"/>
搜索<input type="search"/>
form>
input元素
公共属性：
type：设置 input 元素的类型，默认值是 text
value：用来保存用户输入的值，用于后期提交给服务器。如果控件是按钮，value用来设置按钮上显示的文本
name：为控件起名字，注意：form 表单必须起 name 否则提交不了数据
（1）文本框与密码框
type = ”text“ //普通文本输入框
type = "password" //密码框
属性：
maxlength = "5" //设置输入数据的最大长度
placeholder = “请输入用户名” //提示文字
value = "jack" //表示给当前输入框设置了一个默认值 jack，这个属性默认为空，用户输入什么值，value就保存什么值
（2）按钮
type = "submit" //提交按钮，会自动收集输入的数据提交
type = "reset" //重置按钮，会将表单的控件恢复到初始状态，注意不是清空
type="button" //普通按钮，后期会绑定JS代码（例如点击事件等等）
注意：按钮的 value 属性是用来设置按钮上显示的文字
lable标签
<lable> 标签为 input 元素定义标注（标签）
<lable> 标签用于绑定一个表单元素，当点击 <lable> 标签内的文本时，浏览器就
会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
语法：
<lable for = "sex">男lable>
<input type = "radio" name = "sex" id = "sex">
核心：<lable> 标签的 for属性 应当与相关元素的 id属性相同
案例：
<label for="private">隐私政策：label> <input type="checkbox" id="private"/>
select 表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 标签控件定义 下拉列表。
案例：
籍贯：<select>
<option>山东option>
<option>北京option>
<option>江西option>
<option>天津option>
<option selected >火星option>
<option>三体星option>
select>
注意：
//1、<select>中至少包含一对 <option>
//2、在<option>中定义 select = "selected" 时，当前项即为默认选中项
textarea 文本域表单元素
使用场景：当用户输入内容较多的情况下，就不能使用文本框表单了，此时可以使用 标签。
在表单元素中， 标签是用于定义多行文本输入的控件。
意见反馈案例：
<textarea rows="3" cols="20">
我是今日反馈的默认内容，rows（行数），cols（每行的文字个数）
textarea>
浮动框架
<iframe frameborder = "0" scrolling = "no" width="500px" height="400px"
src="https://www.codeboy.com/xuezi/admin/login.html">iframe>
结构化标签
h5新增了带有结构语义的标签，来取代div，虽然在用户看来和之前使用 div 没有区别，但是带语义的标签可以增加代码的可读性，很方便的实现页面各个部分的划分，让网络爬虫可以更快找到
但注意：低版本的浏览器会不兼容
<div class="ye-tou">页面头部div>
<div class="dao-hang">导航div>
<div class="zhu-ti">主体内容div>
<div class="ce-bian-lan">侧边栏div>
<div class="ye-wei">页尾div>
<header>页面头部header> //定义网页的头部或者某个区域的头部
<nav>导航nav>
//定义网页的导航栏
<section>页面主体主体内容
<article>第一篇文章article>
//定义与文字相关的内容，比如文章、论坛、回帖
<article>第二篇文章article>
section>
<aside>侧边栏aside>
//定义网页的侧边栏，比如分类、广告
<footer>页尾footer> //定义网页的底部或者某个区域的底部
文字对齐方式（涉及CSS的样式 )
div {
width: 100px;
height: 40px;
/* 水平居右 */
text-align: right;
/* 水平居左 */
text-align: left;
/* 水平居中 */
text-align: center;
/*行高设置为div的高度，就可以实现垂直居中*/
line-height: 40px;
}
不识坎离颠倒，谁能辨，金木沉浮，与大家共勉！