html5、day2.css如何添加样式/块元素和行内元素/列表/表格/媒体元素/页面结构/inframe框架
用来渲染元素样式
1.1如何添加样式
-
内联样式- 在HTML元素中使用”style” 属性
-
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含css
-
外部引用 – 使用外部 css 文件
-
以上三种方法最好是通过外部引用css文件
内联样式
当特殊的样式需要应用到个别的元素是，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何css属性。以下实例显示出如何改变段落颜色和左外边距
<!--内联样式定义了文字的颜色左边距-->
<p style="border: blue;color: blue;margin-left: 50px;">
这是一个css样式的段落</p>
<!--定义了背景颜色是蓝色-->
<h1 style="background: aqua;border: black;color: blue">一级大标题</h1>
<!--定义了字体的样式和大小-->
<p style="font-family:黑体,sans-serif;font-size: 100px;"> 定义字体 </p>
<p style="text-align: center">文本在中间位置</p>
出现错误：
Font property font-family does not have generic default
原因为没有定义 “generic-family”即 字体的所属风格。
-
解决办法：在font-family末尾添加字体所属风格，如serif 或sans-serif**最后一项
serif为默认风格字体，如果之前指定的字体都没有找到，就使用浏览器的默认serif字体。各浏览器的默认风格字体可能不相同。其他的字体系列还有monospace、fantasy、cursive**
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
如果同时定义了内联样式表和内部样式表，定义了内联样式表就按照内联样式表来。
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
1.2特殊情况
CSS修饰标签的样式，有 “内联” 和 “外引” 两种方式。对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
<p>第一个图片链接
<a href="https://www.baidu.com/?tn=44004473_21_oem_dg" target="_blank" style="color: black">
<img src="" border="0" alt="如果图片失效，提醒这里有一张图片，同时也是图片名字" height="10" width="10">
</a>
</p>
将链接的颜色变为黑色，因为外部样式表没有用，链接默认是蓝色，这里只能是内联样式表修改
1.3应用简单展示
2.块元素和行内元素
2.1块元素
-
无论内容多少，该元素占一行
-
p，（h1-h6）
2.2行内元素
-
内容撑开宽度，左右都是行内元素可以排在一起
-
a.strong.em
3.列表
3.1有序列表（order list）
<!--有序列表 应用范围：试卷，问答-->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>c</li>
</ol>
3.2无序列表(unorder list)
<!--应用范围：导航，侧边栏-->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>c</li>
</ul>
<!--自定义列表
dl：标签
dt：definition title
dd:列表选项definition description
应用范围：网页底部
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>linux</dd>
<dd>c++</dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>杭州</dd>
<dd>建德</dd>
<dd>重庆</dd>
</dl>
4.表格以及跨行列
4.1优点
-
简单通用
-
结构稳定
4.2基本单元
-
单元格
-
行
-
列
-
跨行
-
跨列
4.3基本演示
<!--table
行 tr table row
td table datacell(数据单元)
th table headercell(标题单元格)
-->
<!--这里的border使表格的边框有1的宽度，但是显示obsolete-->
<table border="1px">
<!-- colspan跨列-->
<tr><td colspan="3" style="text-align: center"> 1 </td>
</tr>
<!--rowspan就是跨行-->
<tr><td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr><td>3-1</td>
<td>3-2</td>
</tr>
</table>
5.媒体元素
5.1视频+音频
<!--
controls：可以控制视频的播放以及进度条
autoplay：就是自动播放
src:resource-->
<video
src="../resource/video/格式工厂%20屏幕录像20200330_151833.mp4"
autoplay
controls
height="500px" width="500px">
</video>
<audio src="../resource/audio/薛之谦%20-%20彩券.mp3"
autoplay>
</audio>
加了autoplay之后没有自动播放，不知道为什么，可能是浏览器的原因
6.页面结构
不起作用，只是区分块
7.inframe内联框架
在网站内嵌套另一个网站
<iframe src="" name="自己的第一个"
height="500px"
width="500px"
>
</iframe>
<a href="1.我的第一个网页.html" target="自己的第一个">点击跳转</a>