实训四十四天 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:内联块
标签:22,样式,张鑫,08,color,样式表,标签,选择器,css
From: https://www.cnblogs.com/zxscj/p/16614346.html