实训四十四天 HTML复习
学习内容
HTML基本框架
head：头，标签处。包含了所有的头部信息元素title：适配搜索引擎 meta charset=utf-8 定义了浏览器工具栏的标题,当网页被收藏到收藏夹，显示的默认标题；显示在搜索引擎结果页面的标题base 描述了基本的链接地址/链接目录，作为HTML文档中所有的标签链接的默认链接link：链接css，引用css层叠样式表（单独出现）style： 定义css层叠样式表script： 既可以定义script脚本，也可以引用script文件（不建议写在head里，写在body最下方）meta：元数据 指定网页的描述，关键词，文件最后修改的时间，作者...（可以定义搜索引擎的关键词）
基本标签
h1—h6：标题标签，字体变大，上下空一行
<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
<h3>我是标题h3</h3>
<h4>我是标题h4</h4>
<h5>我是标题h5</h5>
<h6>我是标题h6</h6>
p：段落，上下空一行
<p>我是段落</p>
其他标签
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预处理（换行识别）</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<del>删除线</del>
log<sub>下标文本</sub>
2<sup>上标文本</sup>
<font color="green">我是font</font>（被淘汰）
超链接
href:要去的地方
target：目标-怎么打开目标地址
_blank:在新窗口打开
_self：在当前窗口打开
_parent、top:在父容器（顶级父容器）中打开
title:标题-当鼠标悬停在标签上出现的提示文
普通链接：
<a href="http://www.baidu.com" target="_self">百度一下</a>
图片链接：
<a href="http://www.baidu.com"><img src="img/libai.jpg" alt="这是刺客李白" title="青莲剑仙" width="150"></a>
邮箱链接：
<a href="mailto:[email protected]">站长信箱</a>
锚记链接
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
图片
img：图片
src:路径
height、width：宽高（尽量指定一个属性，等比缩放）
align:对齐方式
alt:异常情况的文字显示
marquee：弹幕
<img src="img/libai.jpg" alt="这是刺客李白" title="青莲剑仙" width="100" alt="" align="bottom">
块
div：块，立方体，可以有宽高
span：行，没有宽和高，尺寸根据内容确定
块级元素：自占一行，自带换行功能
div,h,p,form,ul,ol...
行级元素：自己没有换行功能
a,span,del,sup,sub,em,b,strong....
<div> 文档中的块级元素</div>
<span> 文档中的行级元素</span>
列表 表格
ul：无序列表
ol：有序列表
无序列表
<ul type="disc">
<li>项目1</li>
<li>项目2</li>
</ul>
有序列表
<ol type="I">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</ol>
自定义列表
<dl>
<dt>项目1</dt>
<dd>描述项目1</dd>
<dt>项目2</dt>
<dd>描述项目2</dd>
</dl>
table>tr>td 创建表格
rowspan：跨行合并
colspan：跨列合并
<table border="1" cellpadding="10" cellspacing="0">
<thead >
<tr>
<th>学号</th>
<th>姓名</th>
<th>联系方式</th>
<th>毕业院校</th>
<th>国籍</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>罗永浩</td>
<td>13789456245</td>
<td>延边第二中学</td>
<td rowspan="4">中国</td>
</tr>
<tr>
<td>1002</td>
<td>罗翔</td>
<td>15784561234</td>
<td>北京大学</td>
</tr>
<tr>
<td>1003</td>
<td>樊登</td>
<td>13336956541</td>
<td>西安交大</td>
</tr>
<tr>
<td>1004</td>
<td>雷军</td>
<td>15625899685</td>
<td>武汉大学</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
他们都是有钱人
</td>
</tr>
</tfoot>
</table>
iframe：框架
<iframe src="https://www.sina.com.cn" height="600" width="400"
frameborder="0"></iframe>
<iframe src="https://www.sohu.com" height="600" width="400"
frameborder="0"></iframe>
表单
form ：表单
action:数据的提交地址
id：每个HTML元素的唯一标识（不能重复）
input type :text:文本框；password：密码；radio:单选框；checkbox:多选框 ...
select option:下拉框
textarea:文本区
button:按钮
<form action="" method="post">
<p>
账号：<input type="text">
</p>
<p>
密码：<input type="password">
</p>
<p>
性别：
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
</p>
<p>
地址：
<select>
<option value="">请选择省</option>
<option value="">吉林省</option>
<option value="">北京市</option>
</select>
<select>
<option value="">请选择市</option>
<option value="">长春市</option>
<option value="">北京市</option>
</select>
<select>
<option value="">请选择区</option>
<option value="">南关区</option>
<option value="">西城区</option>
</select>
</p>
<p>
爱好：
<input type="checkbox" checked>读书
<input type="checkbox">游泳
<input type="checkbox" checked>跑步
</p>
<p>
<textarea cols="30" rows="10"></textarea>
</p>
<p>
邮箱：<input type="email">
</p>
<p>
薪水：<input type="number">
</p>
<p>
头像：<input type="file">
</p>
<p>
颜色：<input type="color">
</p>
<p>
电话：<input type="tel">
</p>
<p>
隐藏：<input type="hidden">
</p>
<p>
//<input type="submit">
//<input type="reset">
//<input type="button" value="自定义按钮">
<button type="submit">注册</button>
<button type="reset">重写</button>
<button type="button">自定义</button>
<!--
我们项目的要求：
如果有form，用input
如果没有form，用button
-->
</p>
</form>
action：数据的提交后台地址
method：数据的提交方式
get：默认值，会把所有要提交的数据拼接在地址栏，不安全，地址栏长度有限
post：封装一个请求体，把数据提交给后台，不会拼接在地址栏，长度没有限制
readonly和disabled区别：
readonly可以提交到后台的
disabled是不可以提交到后台的
转义字符
空格
& and符号
< 小于号
> 大于号
© 版权号
H5新增
画布，多媒体，重力感应，地图，websocket
<!-- 定义音频内容 -->
<audio src="123.mp3" autoplay controls></audio>
<!-- 定义视频内容 -->
<video src="123.mp4" autoplay controls></video>
---
css
什么是css？
html提供了布料，css上色。
CSS层叠样式表
定义如何显示HTML元素--样式
样式通常存储在样式表中
把样式表添加到HTML中，内容与表现分离（样式和结构分离）
外部样式表可以极大提高工作效率。
外部样式表通常存储在css文件中
定义css样式
行内样式
如果当前的样式不需要复用，可以使用行内样式
<p style="background-color: red;">我是P标签</p>
<h1>我是h1标签</h1>
<span>我是span标签</span>
<a href="#">我是超级链接</a>
内页样式（嵌入样式）
类选择器
.fontStyle {
color: red;
font-size: 20px;
}
.backgroudStyle {
background-color: yellow;
}
id选择器，每个标签元素的id是唯一不能重复
#fontStyle2 {
color: blue;
font-size: 30px;
}
标签选择器
p {
font-family: "仿宋";
}
通配符，全部选择器，页面初始化
* {
margin:0;
padding: 0;
}
组合选择器
h1,div {
font-size: 50px;
}
后代选择器
div p {
background-color: red;
}
子选择器
div>p {
color: blueviolet;
}
紧跟着div的p元素
div + p{
background-color: pink;
}
属性选择器
input[name]{
height: 100px;
font-size: 50px;
}
input[name=username] {
color: red;
}
外部样式（推荐）
<link rel="stylesheet" href="css/style.css">
css层叠样式表
层叠性
1.如果样式冲突，遵循就近原则，哪个样式距离就执行哪个样式
2.如果样式不冲突，就不层叠
继承性：子标签会继承父标签的某些样式：文本颜色，字号，背景颜色...
优先级：类>标签>id
权重
1.继承的样式权重最低
2.行内样式权重最高
3.如果权重相同，就近原则
4.！important 无限大
css常用单位
1.px像素：绝对单位，一个像素代表一个点
2.em:相对单位，参考父级元素。父级元素的字体是10px，要设置元素的字体大小为2em，当前元素的字体就是32px
3.rem：相对单位，参考页面。当我们改变了浏览器的字号设置，页面的字号也会随之发生改变。应用老人版
4.百分比：相对于父级元素的比例
伪类选择器
link:默认样式
hover:悬停样式
active：激活样式
visited:点过的元素
<style>
初始状态
a:link {
color: red;
}
鼠标悬停
a:hover {
color: green;
}
激活状态
a:active{
color: black;
}
访问过的
a:visited {
color: yellow;
}
获得焦点
input:focus {
height: 100px;
font-size: 50px;
}
</style>
基本标签
nth-child()：选中第几个对应元素
font-size：字体大小
background:背景
list-style-type:列表类型
list-style-position:列表位置
border:边框
radius:半径；collapse：折叠；
display：区块
inline：行级；block:块级；inline-block：内联块