html与css-CSDN博客

本文链接：https://blog.csdn.net/zy_tiger/article/details/51843357

HTML

一、html的简介

1. 什么是html？HyperText Mark-up Language，超文本标记型语言，是网页语言

* 超文本：超出文本的范畴

* 标记：理解为标签，html中所有的操作都是通过标签来实现的

*html是做网页的

2. html程序遵循一定的规范

(1)：html程序以<html>开始，同时以</html>结束

(2)：html程序包含2部分内容head和body

<html>

<head>设置页面信息</head>

<body>显示到页面上的内容</body>

</html>

(3)：html的标签有开始标签，同时也要有结束标签

(4)：html代码不区分大小写

(5)：有些标签没有结束标签，需要在标签内结束

3. html的操作思想

* 在网页中可能有很多数据，不同的数据需要不同的显示效果，这个时候使用标签把要操作的数据包起来(封装)，通过修改标签的属性值来实现数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器的数据样式的变化

二，字体标签

1. 文字标签<font>

* <font color="设置文字颜色" size="文字大小">要操作的文字的内容</font>

** 常用的2个属性

*** color：设置文字的颜色

有3种表示方式.：

(1)：直接使用英文单词进行表示red green yellow......

(2)：使用十六进制数字进行表示#fffffff

** 通过RGB

(3)：使用RGB颜色值配置rgb(255,0,0)

*** size：设置文字的大小（文字大小值范围：1-7，超过7之后，使用的还是7的效果）

2. 标题标签

标题标签可以自动换行，从h1到h6到字体的大小依次变小的

3. 水平线标签：<hr/>

4. 注释标签：

5. 特殊字符： 空格

三，列表标签

1. 有上下层关系的

<dl></dl>：定义列表的范围

<dt></dt>：定义上层内容

<dd></dd>：定义下层内容

2. 有序列表<ol></ol>

ol标签是有序列表的范围，上面有属性值type，里面有可以定义具体的排序方式：1 a i

在ol标签里面：<li></li>：封装具体内容

3. 无序列表标签<ul></ul>

ul标签上的type值能设置特殊符号：disc circle square

之后再ul标签的<li></li>里面封装具体的内容

四，图形标签

1. 在html中显示图片

2. 标签：<img src="图片的路径名称">

3. 属性：

src：图片的路径名称

width：图片宽度

height：图片的高度

border：图片边框的粗细

alt：显示图片上的内容（鼠标移动到上面，稍等片刻出现文字；如果图片找不到，显示alt内容；这个属性在某些浏览器不能显示的）

五，超链接标签

1. 什么是超链接：点击打开新的内容

2. 标签：<a href="链接到的地址">显示在页面上的内容</a>

3. 属性：

href：链接到的地址

target：超链接的打开方式

target里面的值：_self，当前页面打开（默认）；_blank，在新标签页打开

六，表格标签

操作技巧：首先数表格里面有多少行，数每行里面有多少单元格

1. 什么是表格：对数据进行格式化，使数据显得更加清晰，结构分明

2. 标签：

<table></table>：表格的范围

* 属性：

border：设置表格里的线

bordercolor：设置表格线的颜色

cellspacing：设置单元格之间的距离

cellpadding：设置文字和单元格之间的距离

width：设置表格的宽度

height：设置表格的高度

* 在table标签里面表示行：<tr></tr>

** 属性：align：设置对齐方式：left，center，right

* 在tr标签里面表示列：<td></td>

* 在tr标签里表示单元格：<th></th>，实现居中和加粗的效果

3. 合并单元格

rowspan：跨行

colspan：跨列

4. 标题标签：<caption>标题内容</caption>

七，表单标签

1. 什么是表单？把输入的数据提交到服务器上，这个过程称为表单

2. 使用表单标签实现数据提交到服务器上的这个过程

3. form标签：如果写表单，首先定义表单的范围

属性：

action：提交的服务器的地址

method：表单的提交方式（有很多种，常见的有2种：get和post）

get提交方式会在地址栏携带数据，安全性很差

post提交方式不会携带数据，安全性比较高，数据在请求体里面

4. 输入项：可以输入内容或者选择内容的地方

要求1：输入项里面必须要有name属性

要求2：在单选输入项和复选输入项下拉选择输入项界面都需要有属性value，设置的值

· 输入项需要写到form标签里面：

· 大部分输入项是通过标签input进行封装的：<input type="输入项的类型"/>

(1)普通输入项<input type="text"/>

(2)密码输入项<input type="password"/>

(3)单选输入项<input type="radio"/>：单选输入项必须要有name属性，且name属性值相同；设置默认使用属性checked="checked"

(4)复选输入项<input type="checkbox"/>：和单选输入项的要求差不多

(5)文件输入项<input type="file"/>：用来上传文件

(6)隐藏项<input type="hidden"/>：这个值不会显示在页面上，但是可以可以提交到服务器上。一般通过value传递值

(7)普通按钮<input type="button">

5. 下面的输入项不是使用input标签进行封装的

(8)下拉选项：<select></select>确定范围，<option></option>确定一项的值。使用selected="selected"默认选中

(9)文本域：<textarea cols="10" rows="5"></textarea>

6. 提交按钮和其他按钮

· 提交按钮：<input type="submit"/>，value设置提交按钮显示的内容

· 重置按钮：<input type="reset"/>，属性value设置重置按钮显示的内容

八，其他标签的使用

1. pre：原样输出；p：段落标签；s：删除线；u：下划线；b：加粗；i：斜体

2. div：自动换行；span：在下一行显示

CSS

一，css的简介

1.什么是css？层叠样式表

· 样式表：有很多的属性和属性值

· 层叠：一层一层的，样式的优先级（最终以谁为准）

使用css的目的是：把网页的内容和样式进行分离，利于代码的维护

· 想要使用css，不能单独使用，要和html结合使用

二，css和html的结合方式

1. css和html有4种结合方式：

(1)使用html标签里的属性：style="css代码"

代码：<div style="background-color:red;color:blue;">

(2)使用html标签：<style type="text/css">css代码;</style>

(3)使用html标签实现link，写在head里面

① 首先创建css文件，在css文件里面写css代码

② 在html中使用link标签引入css文件

· 代码：<link rel="stylesheet" type="text/css href="1.css"">

(4)使用html的style标签，在标签里面使用语句样式操作

· 首先创建css文件，在css文件里面写css代码；写style标签，在标签里面 @import url(css路径);

三，css的选择器

1. css优先级：在一般情况下，优先级是后加载的优先级高

2. 格式规范：属性名称1：属性值1;属性名称2：属性值2;

3. 选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）

css有3个选择器：

①使用标签名做为选择器：

div {

background-color:red;

}

②class选择器：每个html标签上面都有一个属性class，通过设置class属性的值

<div class="haha">你好</div>

设置class选择器，可以设置div.haha，表示在div上的haha，如果直接设置.haha，就是所有的class值

.haha {

background-color:red;

}

③id选择器：每个html标签都有一个属性id，通过设置id的属性值（格式与class选择器同理）

#hehe {

background-color:blue;

}