HTML常用标签+CSS基本语法

HTML 常用标签

1.创建站点

1.1 站点的作用

描述：

用来归纳网站上所有的网页，素材以及他们之间的联系

1.2 命名规则

描述：

用英文不用中文

名字全部用小写英文字母、数字、下划线的组成必须用

英文字母开头

首页必须命名为:index.html

2. 常用标签

2.1文本标题

<h1></h1>~<h6></h6>从大到小

2.2段落标记

<p>段落内容</p>

2.3空格

 (站位跟字号有关系)

2.4文字加粗

<b>文字内容</b>，<strong></strong>

2.5文字倾斜

<em>文字内容</em> <i></i>

2.6强制换行：<br/>

2.7水平线：<hr/>

2.8列表标签

<ul><li></li></ul> 无序列表（常用）

<ol><li></li></ol> 有序列表

<dl><dt><dd></dd> 自定义列表</dt></dl>

2.9插入图片

<img src=”文件的路径” alt=”图片不显示时显示的图片” title=”图片标题给搜索引擎看得”/>

 

 

2.10超链接

<a href=”文件的路径”></a>

target:_self默认在当前页面显示

Target:-blank;在新窗口打开

 

这里src和href一定要区分开来

注：Href 的用处比较多

3.表格 table

3.1 table的属性

width 宽

height 高

border 边框

background-color 背景颜色

cellspacing 单元格与单元格之间的间距

cellpadding 单元格与内容之间的空隙

水平对齐方式 align=”left/center/right”

3.2 tr的属性

rowspan=”所要合并单元格的行数” 合并行；

3.3 td的属性

colspan=”所要合并单元格的列数” 合并列；

 

 

4.表单 form

4.1表单的作用(提交用户信息)

注：form所有表单元素都要放在form（表单）标签里面

action属性：表单提交到后台地址

method 属性：提交的方式get、post

name 属性：给表单起名,因为页面有可能不止一个比表单

<form action=”#” method=”get” name=”study”></form>

 

 

4.2表单控件 input

4.1type属性：规定表单控件的类型

text文本框   password密码框  submit提交按钮button普通按钮

reset重置按钮   radio单选框   checkbox多选框

 

4.2 value 属性：改变表单框里面的初始内容

 

4.3 name 属性：给该控件元素起名（让控件之间建立起联系）

 

4.4 checked属性：默认被选中(在多选或单选的类型下使用)

 

 

4.3下拉控件 select

1) select的属性

selected 默认被选中

name 起字

2) option 选项

 

4.4文本域 textarea

1) textarea的属性

cols = 列数

rows = 行数

 

 

 

CSS基础语法

1. 格式

描述：选择器 {css属性：属性值}

2. 选择器

2.1标签选择器

描述：将html标签名当作选择器来使用

例：div{ color：red；}

这样是对html文档中所有div属性做修改

2.2类选择器

描述：添加一个类名，相当于给该元素添加一个名字可以重复使用。

例：<div class=”header”></div> .header{}

通过类名获取一个元素，在类名前加个点。

2.3id选择器

描述：添加一个id名，相当于给该元素添加一个省份证不可重复使用。

<div id=”header”></div>  #header{}

通过id名获取一个元素。在id名前加#.

2.4群组选择器

描述：是将多个选择器组合在一起用逗号隔开，通常用来设置这些选择器中共有的属性。

例：body,div,p,.adc,#ip{}

群组之间的选择器可以是任意选择器

2.5后代选择器

描述：选择器之间是层级关系用空格隔开，假如你给父元素设置样式，子元素默认会在继承父元素的样式。

例：div a{ } 该选择器是对div下面的全群a标签设置样式

2.6通配符选择器

描述：页面上所有的元素都会被获取到。

例：*{

margin：0；设置外边距为0

padding：0；设置内边距为0

}

 

3.样式表

3.1内部样式

描述：通过style标签设置页面元素的样式，写在head标签内。

例:<style rel=”text/css”></style>

3.2外部样式

描述：通过link标签的href属性去链接到css文件 写在head标签内。

一个外部样式可以同时被多个html文件使用。

例：<link rel=”stylesheet” href=”css/”>

3.3内联样式，行内样式

描述：将style作为html属性，将声明的css属性值当作为html的属性值

在当前元素设置内联样式仅对当前元素有用。对于其他元素不生效

4.优先级

1) 内联样式 大于 内部样式 和 外部样式

2) 内部样式与外部样式作比较，写在下面的样式将覆盖上面的样式表。

3) 层叠的意思是在不同的选择器或是不同的样式表给同一个元素添加相同的css属性，那么该元素被会优先级高的样式所覆盖。

4) 优先级顺序：（important最高级）内联选择器>id选择器>类选择器>标签选择器>通配符选择器

 

5.权重

5.1选择符的权重

描述：css中用四位数字表示权重，权重的表达方式如：0 , 0 , 0 , 0 ;

1) 类型选择符的权重为0001

2) class选择符的权重为0010

3) id选择符的权重为0100

4) 子选择符的权重为0000

5) 属性选择符的权重为0010

6) 伪类选择符的权重为0010

7) 伪元素选择符的权重为0010

8) 包含选择符的权重：为包含选择符的权重之和

9) 行内样式的权重为1000

10) 继承样式的权重为0000