HTML 与 CSS 笔记（未完待续）

Copyright © 2020 @Linyer. All Rights Reserved

HTML 基本标签

名称	标签
标题标签	<h1>~<h6>
段落、换行	<p>···</p>、<br/>
水平线标签	<hr/>
斜体	<em>···</em>
字体加粗	<strong>···</strong>

图像标签

• 常见图片格式：jpg、gif、bmp、png

  <img src="图片路径" alt="替换文本" width="x宽度" height="y高度"/>
  

超链接

• target目标窗口位置：
  • _self：
    自身窗口
  • _blank：
    新建窗口

<a href="链接地址" target="目标窗口位置">文本或图像</a>

• 超链接的应用

  • 页面间链接：A页到 B页，网上常见链接
  • 锚链接：跳至自身固定位置，或 A页跳到 B页固定位置，需锚标记
  • 功能性链接：电子邮件、QQ、 MSN 等链接

• 锚链接

  <a href="#register">注册</a>
  <a name="register">注册</a>
  

• 电子邮件

  <a href="mailto:linyer@linyer.cn">发送电子邮件</a>
  

特殊符号和注释

• 常用特殊符号

  特殊符号	字符实体
  空格	 
  大于号 >	>
  小于号 <	&lt;
  引号 "	&quot;
  版权符号 ©	&copy;

• 注释

  <!--注释内容-->
  

W3C 标准（World Wide Web Consortium，万维网联盟）

• 规范
  • 标签名称、属性名称必须小写
  • 标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合
  • 属性值必须用引号引起来

播放视频音频

在网页上播放视频和音频的方法：

• 第三方自主开发的播放器
• Flash
• HTML5 媒体元素

HTML5 的媒体元素

• 视频元素：video

  • controls提供播放、暂停和音量的控件

  • autoplay自动播放

  • 主流浏览器支持的视频格式
    

    <video src="视频路径" controls></video>
    

  • 不同格式

    <video controls>
    	<source src="video/video.webm" type="video/webm"/>
    	<source src="video/video.mp4" type="video/mp4"/>
    </video>
    

• 音频标签：audio

  <audio src="音频路径" controls="controls"></audio>
  

  • 不同格式

    <audio controls>
    	<source src="music/music.mp3" type="audio/mpeg"/>
    	<source src="music/music.ogg" type="audio/ogg"/>
    	你的浏览器不支持audio元素
    </audio>
    

    

页面结构布局

• html5 结构元素

  元素名	描述
  header	标题头部区域的内容(用于页面或页面中的一块区域)
  footer	标记脚部区域的内容(用于整个页面或页面的一块区域)
  section	Web页面中的一块独立区域
  article	独立的文章内容
  aside	相关内容或应用(常用于侧边栏)
  nav	导航类辅助内容

CSS 层叠样式表（Cascading Style Sheet）

• CSS的优势
  • 内容与表现分离
  • 网页的表现统一，容易修改
  • 丰富的样式，使页面布局更加灵活
  • 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  • 运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS 语法规则

选择器 {
	属性1: 值1;
	属性2: 值2;
	属性3: 值3;
	......
}

• 选择器：
  • 标签选择器
  • 类选择器
  • ID选择器

网页中引用 CSS 样式

内联样式

<h1 style="color: red;">css内联样式</h1>

内部样式表

<style>
	h1 {
		color: red;
	}
</style>

外部样式表

• 链接式
  • 创建一个外部的css文件：xx.css，把样式写在这个文件中
  • 谁想用这个样式，谁就引入这个.css文件即可

  <link rel="stylesheet" href="css/style.css"/>
  

• 导入式

    	<sty1e>
  		@import "css/style.css";
  	</sty1e>
  

• 链接式与导入式的区别
  • <link/>标签属于XHTML，@import是属于CSS2.1
  • 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
  • 使用@import导入的CSS文件，客户端显示HTML结构,再把CSS文件加载到网页当中
  • @import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。

编辑网页文本

• <span>标签的作用：能让某几个文字或者某个词语凸显出来

字体样式

属性名	含义	举例
font-family	设置字体 类型	font-family: "隶书";
font-size	设置字体 大小	font-size: 12px;
font-style	设置字体 风格	font-style: italic;
font-weight	设置字体的 粗细	font-weight: bold;
font	在一个声明中设置所有字体属性	font: italic bold 36px "宋体";

• font-size属性单位：

  • px(像素)、em、rem、 cm、mm、pt、pc

• font-style属性：

  • normal、italic和oblique

• font-weight属性

  值	说明
  normal	默认值，定义标准的字体
  bold	粗体字体
  bolder	更粗的字体
  lighter	更细的字体
  100、200、 300、 400、500、 600、 700、800、 900	定义由细到粗的字体， 400等同于normal, 700等 同于bold

• font属性：

  • 字体属性的顺序：字体风格 → 字体粗细 → 字体大小 → 字体类型

文本属性

属性	含义	举例
color	设置文本 颜色	color: #00C;
text-align	设置元素 水平对齐方式	text-align: right;
text-indent	设置首行文本的 缩进	text-indent: 20px;
line-height	设置文本的 行高	line-height: 25px;
text-decoration	设置文本的 装饰	text-decoration: underline;

• color属性

  • RGB
    • 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
    • rgb(r,g,b)：正整数的取值为0~255
  • RGBA
  • 在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1

    color: #A983D8;
    color: #EEFF66;
    color: rgb(0,255,255);
    color: rgba(0,0,255,0.5);
    

• text-align属性：水平对齐方式

  值	说明
  left	把文本排列到左边。默认值:由浏览器决定
  right	把文本排列到右边
  center	把文本排列到中间
  justify	实现两端对齐文本效果

• text-indent属性：首行缩进，单位：em（相对值）或px

• line-height属性：行高，单位：px

• text-decoration属性：文本装饰

  值	说明
  none	默认值，定义的标准文本
  underline	设置文本的下划线
  overline	设置文本的上划线
  line-through	设置文本的删除线

• vertical-align属性：垂直对齐方式

  • middle、top、bottom

• 结构伪类选择器： a:nth-of-type(1)

  父级下面类型为 a的第 1个元素

• text-shadow属性：文本阴影

  • text-shadow: color x-offset y-offset blur-radius;

  • color：阴影颜色

  • x-offset：X轴位移，用来指定阴影水平位移量

  • y-offset：Y轴位移，用来指定阴影垂直位移量

  • blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围

  • 浏览器兼容性

    属性名	lE	Firefox	Chrome	Opera	Safari
    Text-shadow	9+	3.5+	2.0+	9.6+	4.0+

使用 CSS 设置超链接

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

• 设置伪类的顺序: a:link→a:visited→a:hover→a:active

背景样式

• 背景图像

  • background-image属性

    • background-image: url(图片路径);

  • 背景重复方式

    • background-repeat属性
      • repeat：沿水平和垂直两个方向平铺
      • no-repeat：不平铺，即只显示一次
      • repeat-x：只沿水平方向平铺
      • repeat-y：只沿垂直方向平铺

  • 背景定位

    • background-position属性

      值	含义
      Xpos Ypos	单位：px，Xpos表示水平位置，Ypos表示垂 直位置
      X% Y%	使用百分比表示背景的位置
      X、Y方向关键词	水平方向的关键词：left、center、right 垂直方向的关键词：top、 center、bottom

  • 组合

    • background: #C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

  • 背景尺寸background-size

    属性值	描述
    auto	默认值，使用背景图片保持原样
    percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
    cover	整个背景图片放大填充了整个元素
    contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

  • 线性渐变

    • 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

    linear-gradient(渐变方向 position, 颜色1 color1, 颜色2 color2, ···)
    

    • 兼容性
      • IE 浏览器是 Trident 内核，加前缀：-ms-
      • Chrome 浏览器是 Webkit 内核，加前缀：-webkit-
      • Safari 浏览器是 Webkit 内核，加前缀：-webkit-
      • Opera 浏览器是 Blink 内核，加前缀：-0-
      • Firefox 浏览器是 Mozilla 内核，加前缀：-moz-

    -webkit-linear-gradient(position, color1, color2, ···)
    -moz-linear-gradient(position, color1, color2, ···)
    

  • 径向渐变

    • 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

列表表格及表单美化

列表

• 列表的分类

  • 无序列表
  • 有序列表
  • 定义列表

• 无序列表

  <ul>
  	<li>范冰冰演藏族女孩</li>
  	<li>撞死两个人后自拍</li>
  	<li>诗隆甜蜜出游</li>
  	<li>一线城市楼市退烧</li>
  </ul>
  

  • <ul>下只能放<li>标签，其他标签放<li>标签里面
  • 无序列表的特性
    • 没有顺序,每个<li>标签独占一行（块元素）
    • 默认<li>标签项前面有个实心小圆点
    • 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

• 有序列表

  <ol>
  	<li>范冰冰演藏族女孩</li>
  	<li>撞死两个人后自拍</li>
  	<li>诗隆甜蜜出游</li>
  	<li>-一线城市楼市退烧</li>
  </ol>
  

  • 有序列表的特性
    • 有顺序，每个<li>标签独占一行（块元素）
    • 默认<li>标签项前面有顺序标记
    • 一般用于排序类型的列表，如试卷、问卷选项等

• 定义列表

  <dl>
  	<!--声明列表项-->
  	<dt>水果</dt>
  	<!--定义列表项内容-->
  	<dd>苹果</dd>
  	<dd>桃子</dd>
  	<dd>李子</dd>
  </dl>
  

  • 定义列表的特性
    • 没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
    • 默认没有标记
    • 一般用于一个标题下有一个或多个列表项的情况

• 列表对比

  类型	说明	项目符号
  无序列表	以<li>标签表示列表项	无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
  有序列表	以<li>标签表示列表项	有序列表ol-li一般用 于显示带有顺序编号的特定场合
  定义列表	以<dt>标签定义列表项 以<dd>标签定义内容	定义列表一般适用于带有标题和标题解释性内容的场合

• 列表样式

  • list-style-type

    值	说明	语法示例
    none	无标记符号	list-style-type: none;
    disc	实心圆，默认类型	list-style-type: disc;
    circle	空心圆	list-style-type: circle;
    square	实心正方形	list-style-type: square;
    decimal	数字	list-style-type: decimal;

  • list-style-image

  • list-style-position

  • list-style

    • 去除小黑圆点

      li{
      	list-style: none;
      }
      

• CSS设置超链接伪类

  a: hover
  

  • 鼠标移到文字，文字变红，加上下划线

    a: hover {
    	color: red;
    	text-decoration: underline;
    }
    

表格

• 基本结构

  • 行
  • 列
  • 单元格

• 基本语法

  <table><!--表格标签-->
  	<tr><!--行标签-->
  		<th>第1个单元格的标题</th><!--单元格标题标签-->
  		<th>第1个单元格的标题</th>
  		..
  	</tr>
  	<tr>
  		<td>第1个单元格的内容</td><!--单元格标签-->
  		<td>第2个单元格的内容</td>
  		...
  	</tr>
  	<tr>
  		<td>第1个单元格的内容</td>
  		<td>第2个单元格的内容</td>
  		...
  	</tr>
  </table>
  

• 单元格跨列

  <td colspan="n">单元格内容</td>
  <!--n为所跨列数-->
  

• 单元格跨行

  <td rowspan="n">&nbsp;</td>
  <!--n为所跨行数-->
  

表单

• 基本语法

  <form method="post" action="result.html">
  	<p>名字: <input name="name" type="text"> </p>
  	<p>密码: <input name="pass" type="password"> </p>
  	<p>
  		<input type="submit" name=" Button" value="提交"/>
  		<input type="reset" name="Reset" value="重填"/>
  	</p>
  </form>
  

  • method规定如何发送表单数据
  • action常用值：get | post

• 表单元素格式

  <input type="text" name="fname" value="text"/>
  

  • type：input元素类型
  • name：input元素名称
  • value：input元素的值

  属性	说明
  type	指定元素的类型。text、 password、 checkbox、 radio、 submit、reset、file、 hidden、 image 和button，默认为text
  name	指定表单元素的名称
  value	元素的初始值。type为radio时必须指定一个值
  size	指定表单元素的初始宽度。当type为text 或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
  maxlength	type为text或password时，输入的最大字符数

• 文本框

  <input type="text" name="userName" value="用户名" size="30" maxlength="20" />
  

  • name：文本框名称
  • value：文本框初始值
  • size：文本框长度文
  • maxlength：本框可输入最多字符

• 密码框

  <input type="password" name="pass" size="20" />
  

  • name：密码框的名称
  • size：密码框的长度

• 单选按钮

  <input name="gen" type="radio" value="男" checked/>男
  <input name="gen" type="radio" value="女"/>女
  

  • name：单选框的名称，必须一致才能实现单选效果
  • value：值
  • checked：单选按钮选中状态

• 复选框

  <input type="checkbox" name="interest" value="sports"/>运动
  <input type="checkbox" name="interest" value="talk" checked/>聊天
  <input type="checkbox" name="interest" value="play"/>玩游戏
  

  • name需一致

• 列表框

  <select name="列表名称" size="行数">
  	<!--选项-->
  	<coption value="选项的值" selected>...</option><!--默认选中项-->
  	<option value="选项的值">...</option>
  </select>
  

  • 服务器收到的数据为：列表名称name = 选项的值value

• 按钮

  <input type="reset" name="butReset" value="reset按钮">
  <input type="submit" name="butSubmit" value="submit按钮">
  <input type="button" name="butButton" value="button按钮" onclick="alert(this.value)"/>
  

  • reset：重置按钮
  • submit：提交按钮
  • button：普通按钮
  • onclick：点击事件，javascript 代码

• 图片按钮

  <input type="image" src="images/login.gif"/>
  

  • src：图片路径

• 多行文本域

  <textarea name="showText" cols="x" rows="y">文本内容</textarea >
  

  • cols：显示的列数
  • rows：显示的行数

• 文件域

  <form action="" method="post">
  	<p>
  		<input type="file" name="files"/>
  		<input type="submit" name="upload" value="上传"/>
  	</p>
  </form>
  

• 邮箱

  <p>邮箱:<input type="email" name="email"/></p>
  <input type="submit"/>
  

  • 会自动验证 Email 地址格式是否正确

• 网址

  <p>请输入你的网址:<input type="url" name="userUrl"/></p>
  <input type="submit"/>
  

  • 会自动验证 URL 地址格式是否正确

• 数字

  <p>请输入数字:<input type="number" name="num" min="O" max="100" step="10"/></p>
  <input type="submit"/>
  

  • min：允许的最小值
  • max：允许的最大值
  • step：合法的数字间限

• 滑块

  <p>请输入数字:<input type="range" name="range1" min="O" max="10" step="2"/></p>
  <input type="submit"/>
  

• 搜索框

  <p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>
  <input type="submit"/>
  

• 隐藏域

  <input type="hidden" value="666" name="userid">
  

• 只读和禁用

  <input name="name" type="text" value="张三" readonly/>
  <input type="submit" value="保存" disabled/>
  

• 表单元素的标注

  <label for="male">标注的文本</label>
  <input type="radio" name="gender" id="male"/>
  

  • for中对应要聚焦元素的id
  • 增强鼠标的可用性
  • 自动将焦点转移到与该标注相关的表单元素上

CSS3 高级选择器

• 层次选择器

  选择器	类型	功能描述
  EF	后代选择器	选择匹配的 F 元素，且匹配的F元素被包含在匹配的 E 元素内
  E>F	子选择器	选择匹配的 F 元素，且匹配的 F 元素是匹配的 E 元素的子元素
  E+F	相邻兄弟选择器	选择匹配的 F 元素，且匹配的 F 元素紧位于匹配的 E 元素后面
  E~F	通用兄弟选择器	选择匹配的 F 元素，且位于匹配的 E 元素后的所有匹配的 F 元素

  • 后代选择器

    body p { background: red; }
    

    • body内所有的p元素都被选中（包括子元素的子元素）
    • 后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
  • 子选择器

    body>p { background: pink; }
    

    • body的子元素被选中
  • 相邻兄弟选择器

    .active+p { background: green; }
    

    • 只有相邻的p元素被选中
  • 通用兄弟选择器

    .active~p { background: yellow; }
    

  • 所有兄弟p元素被选中

• 结构伪类选择器

  选择器	功能描述
  E:first-child	作为父元素的第一个子元素的元素E
  E:last-child	作为父元素的最后一个子元素的元素E
  E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
  E:first-of-type	选择父元素内具有指定类型的第一个E元素
  E:last-of-type	选择父元素内具有指定类型的最后一个E元素
  E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

  • 使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
    • E F:nth-child(n)在父级里从一个元素开始查找，不分类型
    • E F:nth-of-type(n)在父级里先看类型，再看位置

• 属性选择器

  属性选择器	功能描述
  E[attr]	选择匹配具有属性attr的E元素
  E[attr=val]	选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）
  E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
  E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
  E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了"val"，换句话说，字符串val与属性值中的任意位置相匹配

  a[id] {background: yellow; }
  

  a[id=first] { background: red; }
  

  a[href^=http] { background: red; }
  

  a[href$=png] { background:red; }
  

CSS 高级应用

盒子模型应用

• 边框 border

  • border-color
    

  • border-width

    • thin
    • medium
    • thick
    • 像素值

      border-top-width: 5px;
      border-right-width: 10px;
      border-bottom-width: 8px;
      border-left-width: 22px;
      border-width: 5px;/*四个边相同*/
      border-width: 20px 2px;/*上右；下左分别是上右的对边，下左分别和上右相同*/
      border-width: 5px 1px 6px;/*上右下；左是右的对边，和右相同*/
      border-width: 1px 3px 5px 2px;/*上右下左*/
      

  • border-style

    • none：没有
    • hidden：隐藏
    • dotted：点线
    • dashed：虚线
    • solid：实线
    • double：双线

      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      border-style: solid ;
      border-style: solid dotted;
      border-style: solid dotted dashed;
      border-style: solid dotted dashed double;
      

  • 同时设置边框的颜色、粗细和样式

    border: 1px solid #3a6587;
    border: 1px dashed red;
    

• 外边框 margin

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left

  • margin

    margin-top: 1px
    margin-right: 2px
    margin-bottom: 2px
    margin-left: 1px
    margin: 3px 5px 7px 4px;
    margin: 3px 5px;
    margin: 3px 5px 7px;
    margin: 8px;
    

  • 外边距的妙用：网页居中对齐

    margin: 0px auto;
    

    • 网页居中对齐的必要条件（同时满足）
      • 块元素
      • 固定宽度
• 内边距 padding

  • padding-left

  • padding-right

  • padding-top

  • padding-bottom

  • padding

    padding-left: 10px;
    padding-right: 5px;
    padding-top: 20px;
    padding-bottom: 8px;
    padding: 20px 5px 8px 10px;
    padding: 10px 5px;
    padding: 30px 8px 10px;
    padding: 10px;
    

• 盒子型模的尺寸

• box-sizing

  box-sizing: content-box | border-box | inherit;
  

  • content-box：默认值，盒子的总尺度
  • border-box：盒子的宽度或高度等于元素内容的宽度或高度
  • inherit：元素继承父元素的盒子模型模式

圆角边框