HTML + CSS

HTML

文本格式化标签

使用标签实现标签的样式处理

标签	代码	描述
b	< b></ b>	粗体标签
strong	< strong></ strong>	加粗
em	< em></ em>	强调字体
i	< i></ i>	斜体
small	< small></ small>	小号字体
big	< big></ big>	大号字体
sub	< sub></ sub>	上标标签
sup	< sup></ sup>	下标标签
del	< del></ del>	删除线

标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签	代码	描述
h1	< h1></ h1>	1号标题，最大字号
h2	< h2></ h2>	2号标题
h3	< h3></ h3>	3号标题
h4	< h4></ h4>	4号标题
h5	< h5></ h5>	5号标题
h6	< h6></ h6>	6号标题，最小字号

列表标签(清单标签)

无序列表：使用一组无序的符号定义， < ul>< /ul>

<ul type="circle">
    <li></li>
</ul>

属性值	描述	用法举例
circle	空心圆	< ul type=“circle”>< /ul>
disc	实心圆	< ul type=“disc”>< /ul>
square	黑色方块	< ul type=“square”>< /ul>

有序列表：使用一组有序的符号定义， < ol>< /ol>

<ol type="a" start="1">
    <li></li>
</ol>

属性值	描述	用法举例
1	数字类型	< ul type=“1”>< /ul>
A	大写字母类型	< ul type=“A” >< /ul>
a	小写字母类型	< ul type=“a”>< /ul>
I	大写古罗马	< ul type=“I”>< /ul>
i	小写古罗马	< ul type=“i”>< /ul>

列表嵌套：无序列表与有序列表相互嵌套使用

代码举例：
	<ol>
		<li></li>
        <li></li>
        <li>
        	<ul>
                <li></li>
            </ul>
        </li>
	</ol>

图形标签

在页面指定位置处中引入一幅图片， < img />

属性名	描述
src	引入图片的地址
width	图片的宽度
height	图片的高度
border	图片的边框
align	与图片对齐显示方式
alt	提示信息
hspace	在图片左右设定空白
vspace	在图片的上下设定空白

链接标签

• 在页面中使用链接标签跳转到另一页面

  • 标签： < a href="">< /a>

  • 属性：href:跳转页面的地址(跳转到外网需要添加协议)

• 设置跳转页面时的页面打开方式，target属性

  • _blank在新窗口中打开
  • _self在原空口中打开

• 指向同一页面中指定位置
  • 定义位置： < a name=“名称”>< /a>
  • 指向： < a href="#名称">< /a>

表格标签

普通表格(table,tr,td)

<table>
	<tr>
		<td></td>
	</tr>
</table>

表格的列标签(th)：内容有加粗和居中效果

<table>
	<tr>
		<th></th>
	</tr>
</table>

表格的列合并属性(colspan)：在同一行内同时合并多个列

<table>
	<tr>
		<td colspan=""></td>
	</tr>
</table>

input元素

作为表单中的重要元素，可根据不同type值呈现为不同状态

属性值	描述	代码
text	单行文体框	< input type=“text”/>
password	密码框	< input type=“password”/>
radio	单选按钮	< input type=“radio”/>
checkbox	复选框	< input type=“checkbox”/>
date	日期框	< input type=“date”/>
time	时间框	< input type=“time”/>
datetime	日期和时间框	< input type=“datetime”/>
email	电子邮件输入	< input type=“email”/>
number	数值输入	< input type=“number”/>
file	文件上传	< input type=“file”/>
hidden	隐藏域	< input type=“hidden”/>
range	取值范围	< input type=“range”/>
color	取色按钮	< input type=“color”/>
submit	表单提交按钮	< input type=“submit”/>
button	普通按钮	< input type=“button”/>
reset	重置按钮	< input type=“reset”/>
image	图片提交按钮	< input type=“image”/>

HTML框架标签

---

• 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
• 使用框架的缺点：
  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签frameset

• 框架结构标签（ < frameset>< /frameset>）用于定义如何将窗口分割为框架
• 每个 frameset 定义了一系列行或列
• rows/columns 的值规定了每行或每列占据屏幕的面积
  • <frameset rows="">< /frameset>
  • <frameset cols="">< /frameset>

框架标签frame

每个frame引入一个html页面

<frameset cols="*,*">
    <frame src="info1.html" />
    <frame src="info2.html" />
</frameset>

基本的注意事项

• 不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用
• 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在< frame>标签中加入：noresize=“noresize”。

CSS

CSS概念

​ 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS简介

---

什么是CSS

• CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素
• 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的
  应用优先级高的，不冲突的共同作用

CSS能干什么

• 修饰美化html网页。
• 外部样式表可以提高代码复用性从而提高工作效率。
• html内容与样式表现分离，便于后期维护。

三、 CSS导入方式

---

内嵌方式(内联方式)

把CSS样式嵌入到html标签当中，类似属性的用法

 <div style="color:blue;font-size:50px">This is my HTML page. </div>

内部方式

在head标签中使用style标签引入css

<style type=“text/css”> //告诉浏览器使用css解析器去解析
	div{color:red;font-size:50px}
</style>

外部方式

将css样式抽成一个单独文件，使用者直接引用

创建单独文件 div.css
内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部
	<link rel="stylesheet" type="text/css" href=“div.css"></link>
    rel:代表当前页面与href所指定文档的关系
    type:文件类型，告诉浏览器使用css解析器去解析
    href:css文件地址

@import方式(不常用)

在页面中引入一个独立的单独文件

  <style type="text/css">
       @import url("div.css")
  </style>
 该内容放在head标签中

link和@import方式的区别：

• link所有浏览器都支持，@import某些版本低的IE不支持
• @import是等待html加载完成才加载
• @import不支持js动态修改

基本选择器

元素选择器： 在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}

<style type="text/css">
    span{color: red;font-size: 100px}
</style>    

id选择器： 给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}

创建id选择器：
	<div id="s1">hello,everyone!</div>
	<div id="s2">hello,everyone!</div>
    <div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 
    <style type="text/css">
		#s1{color: red;font-size: 100px}
		#s2{color: green;font-size: 100px}
		#s3{color: blue;font-size: 100px}
    </style>

class选择器：给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}

创建class选择器：
    <div class="s1">hello,everyone!</div>
    <div class="s2">hello,everyone!</div>
    <div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：
    <style type="text/css">
        .s1{color: purple;font-size: 100px}
        .s2{color: pink;font-size: 100px}
        .s3{color: yellow;font-size: 100px}
    </style>

伪元素选择器

>-  主要是针对a标签
>-  语法：
>   - 静止状态 a:link{css属性}
>   - 悬浮状态 a:hover{css属性}
>   - 触发状态 a:active{css属性}
>   - 完成状态  a:visited{css属性}

代码：
	<a href="https://hao.360.cn/">点我吧</a>
样式：
    <style type="text/css">
        <!--静止状态 -->
        a:link {color: red;}
        <!--悬浮状态 -->’
        a:hover {color: green;}
        <!--触发状态 -->
        a:active {color: yellow;}
        <!--完成状态 -->
        a:visited {color: blue;}
    </style>

CSS3扩展属性

---

border-radius创建圆角

示例：border-radius: 25px;

box-shadow:用于向方框添加阴影

示例：box-shadow: 10px 10px 5px #888888;

background-size: 属性规定背景图片的尺寸

<body style="text-align: center;
    background:url(img/1.png);
    background-size: 200px 300px;
    background-repeat: no-repeat;">
</body>

text-shadow: 可向文本应用阴影。

示例：text-shadow: 5px 5px 5px #ffff00;