HTML与CSS基础教程-优快云博客

一、HTML内容

1.font字体标签

<font></font>

font标签是字体标签，用来修改文本的字体，颜色，大小。

color属性修改颜色
face属性修改字体
size属性修改文本大小

b标签是加粗标签

2.常用特殊字体

显示结果	描述	实体名称
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`

3.标题标签

h1-h6都是标题标签
h1-h6字体为从小到大
标签标签的属性：

align属性是对齐属性
- left 左对齐（默认）
- right 右对齐
- center 居中对齐

4.超链接

a标签为超链接标签

href属性设置链接的地址
target属性设置哪个目标进行跳转
- self表示当前页面（默认）
- blank表示打开新页面进行跳转

5.列表标签

1)无序列表

<ul>			<!--代表无序列表的开始-->
	<li>		<!--代表列表项-->
	</li>
</ul>

2)有序列表

<ol>				<!--代表有序列表的开始-->
		<li>		<!--代表列表项-->
		</li>
</ol>

6.img标签

img标签可以在html页面中显示图片

src属性设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框的大小
alt属性设置当指定路径找不到图片时，用来代替图片内容的文本内容

注意：Web中的路径分为相对路径和绝对路径两种

相对路径
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件，相当于./文件名（./可以省略）
绝对路径
例如：http://ip:port/工程名/资源路径

7.表格标签

table标签是表格标签

border设置边框宽度
width设置表格宽度
height设置表格高度
align设置表格相对于页面的对齐方式
cellspacing设置单元格之间的间距
cellpadding设置单元格内容与其边框之间的空白

tr是行标签
td是列标签
th是表头标签

align设置单元格内文本对齐方式

行标签和列标签的属性：

colspan属性设置跨列
rowspan属性设置跨行

8.iframe框架标签

iframe标签可以在一个html页面上，打开一个小窗口，去加载一个单独的页面

src设置要加载页面的文件名
width设置页面的宽度
height设置页面的高度

iframe和a标签组合使用的步骤：
1)在iframe标签中使用name属性定义一个名称
2)在a标签的target属性上设置iframe的name属性值

9.表单标签

form标签就是表单

属性	描述	其他
input type=text	文件输入框	value设置默认显示内容
imput type=password	密码输入框	value设置默认显示内容
input type=radio	单选框	name属性可以对其进行分组，checked="checked"表示默认选中，要设置name属性
input type=checkbox	复选框	checked="checked"表示默认选中
input type=reset	重置按钮	value属性修改按钮上的文本
input type=submit	提交按钮	value属性修改按钮上的文本
input type=button	按钮	value属性修改按钮上的文本
input type=file	文件上传域
input type=hidden	隐藏域	当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的时候同事发送给服务器）

标签名	描述	其他
select	下拉列表框
textarea	多行文本输入框	其实标签和结束标签中的内容是默认值 rows属性设置可以显示几行的高度 cols属性设置每行可以显示几个字符宽度

表单在格式化（对齐）的时候可以使用table标签

表单提交的细节：
form标签是表单标签

action属性设置提交的服务器地址
method属性设置提交的方式GET（默认值）或POST

表单提交的时候，数据没有发送给服务器的三种情况：
1)表单项没有name属性值
2)单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3)表单项不在提交的form标签中

GET请求的特点是：
1)浏览器地址栏中的地址是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
2)不安全
3)它有数据长度的限制
POST请求的特点是：
1)浏览器地址栏中只有action属性值
2)相对于GET请求要安全
3)理论上没有数据长度的限制

10.其他标签

标签	描述
div标签	默认独占一行
span标签	它的长度是封装数据的长度
p段落标签	默认会在段落的上方和下方各空出来一行（如果已有就不在空）

选择器{

属性：值

}

2.CSS和HTML的结合方式

1)内链式

在标签的 style 属性上设置”key:value value;”，修改标签样式。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

2)内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。

<head>
<style>
	h3{
    color:red;
    text-align:left;
    font-size:8pt;
	}
</style>
</head>

3)外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。通过link标签链接到样式表，浏览器会从.css文件中读取到样式。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.CSS选择器

1)标签名选择器

格式：

<!--标签名选择器可以决定那些标签使用这些样式-->
标签名{
	属性:值;
}

2)id选择器

格式：

<!--可以通过id属性去设置这些样式-->
#id属性值{
	属性:值;
}

3)class选择器（类选择器）

格式：

<!--通过class属性去设置这些样式-->
.class属性值{
	属性:值;
}

4)组合选择器

格式：

<!--组合选择器可以那个多个选择器共用一个css样式代码-->
选择器1,选择器2,选择器n{
	属性:值;
}

3.常用标签

1)字体颜色

color:red;
<!--颜色可以写颜色名如：black, blue, red, green等，颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加# -->

2)宽度

width:19px;
<!--宽度可以写像素值：19px；也可以写百分比值：20%；-->

3)高度

height:20px;
<!--高度可以写像素值：19px；也可以写百分比值：20%；-->

4)背景颜色

background-color:#0F2D4C

5)字体样式

color：#FF0000；<!--字体颜色红色-->
font-size：20px;

6)红色1像素实现边框

border: 1px solid red;

7)DIV居中

margin-left: auto;
margin-right: auto

8)超链接去下划线

text-decoration: none;

9)表格细线

table {
	border: 1px solid black; /*设置边框*/
	border-collapse: collapse; /*将边框合并*/
}
td,th {
	border: 1px solid black; /*设置边框*/
}

10)列表去除修饰

ul {
	list-style: none;
}