HTML5.CSS3眼熟篇

第一天

文本标题(h1-h6)

每个级别的标题显示文本标题大小不同，从1到6慢慢递减，一般来说一级标题仅能出现一次

一级标题

二级标题

三级标题H3

四级标题H4

五级标题

六级标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题H3</h3>
<h4>四级标题H4</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
注:文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距

标签

标识一个段落(段落与段落之间有段间距)

<p>段落文本内容</p>

换行

换行是一个空标记(强制换行)

此处可以强制<br>换行

显示效果为

• 此处可以强制
  换行

水平线 hr

<hr>

显示

---

效果如上

文本标记

• 加粗标记
  • b标签，只是显示加粗
  • strong标签，强调突出文本（推荐）
• 倾斜标记
  • em标签（推荐）
  • i标签
• 删除线
  • s标签
  • del标签（推荐）
• 下划线
  • u标签
• 上标、下标
  • sub标签，上标
  • sup标签，下标

特殊符号

列表

图片路径

src为路径

语法：<img src=   >

• 绝对路径
  绝对路径是指文件在硬盘上真正存在的路径。例如"bg.jpg"这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么“bg.jpg"这个图片的绝对路径就是"E:\bookl网页布\代码\第2章\bg.jpg"。

注意:绝对路径在实际的开发过程中很少去使用，如果使“E:\lbook\网页布\代码\第2章Ilbg.jpg"来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用"或"/字符作为目录的分隔字符

• 相对路径
  相对路径，就是相对于自己的目标文件位置。
  当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名;
  . / 可以向上返回以及每加一个. 就会返回一级

图片属性

<img src="图片路径"title=“鼠标悬停上去之后的提示信息" alt="图片不显示之后（加载失败)的提示信息“ width="200px" height=“200px"/>

超链接标签

能够实现不同页面的跳转

<a href=“路径”title=“鼠标悬停上去之后的提示信息"target=“规定在何处打开文档">内容</a>

• target=”_self“ 原窗口新一页打开（默认值）
• rarget=“_blank” 新窗口打开

table表格

<table> <!--创建表格-->
<tr> 	<!-- tr 表示行-->
	<td>1</td>	 <!-- td表示单元格-->
	<td>2</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
</tr>
</table>

• 表格属性
  1.宽度width
  2.高度height
  3.边框border
  4.边框颜色 bordercolor
  5.背景颜色bgcolor
  6.水平对齐align="“left或right或center”
  7.cellspacing=“单元格与单元格之间的间距”
  8.cellpadding="单元格与内容之间的空隙”

• 行tr属性
  1.高度height
  2.背景颜色bgcolor
  3.文字水平对齐align=“left或right或center”
  4.文字垂直对齐valign=“top或middle或bottom";

• 单元格td属性
  1.宽度width2．高度height
  3.背景颜色bgcolor
  4.文字水平对齐align=“left或right或center”
  5.文字垂直对齐valign= “top或middle或bottom”;

表格合并

Colspan=“所要合并的单元格的列数"必须给td。
Rowspan=“所要合并的单元格的行数”必须给td。

表单

表单的作用:收集用户信息。

<form method=“get或者post" action=“向何处发送表单数据”>
<input>
A.属性type定义输入框的类型
a)文本框type="text"密码框 type="password"
b)提交框type=" submit”和<button>提交按钮</button>一样
c)按钮框type="button”单纯的按钮
d)重置框type= "reset”清空的效果
B.属性placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C． 属性name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D.属性value

</form>

CSS 样式创建

优先级：行内>内部>外部

• 行内：直接在标签上写
• 内部：直接在style 内写
• 外部：引用外部文件
  
  扩展知识点: link和import之间的区别?
  ①差别1:本质的差别: link属于XHTML标签，而@import完全是CSS提供的一种方式。
  ②差别2∶加载顺序的差别:当一个页面被加载的时候（就是被浏览者浏览的时候),link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
  ③差别3∶兼容性的差别:@import是CSS2.1提出的，所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

第二天

选择器

伪类选择器

语法︰
a:link{属性:属性值}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{l属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;Link–visited–hover–active。
说明:
A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为🅰️link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如: a(colorred;} ahover(color.green;}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

选择器权重

背景属性