HTML的基本语法

还可以跳转到其他页面的某个锚点<a href="页面地址"#锚点名>

图片

1. 相关标签

2. 在页面中引入图像

<img src="图片地址" alt="图片的描述信息" height="高度">

3. 图片与超链接配合使用

<a href="http://www.baidu.com">	<img src="图片地址" alt="图片描述信息" height="你想要的高  	度"></a>

4. 图像映像

<img src="图片地址" alt="描述信息" usemap="#map标签的名字"><map name="自己起个名字">	<area shape="circle" coords="坐标数字" href="想链接的网址" target="_blank" title="标签点上会显示的map>

列表标签

1. 无序列表

<ul>    <li>列表项</li>    <li>列表项</li>    <li>列表项</li></ul><!-- li里面还可以在套一个<ul>--><ul>    <li>        江苏    	<ul>            <li>列表项</li>            <li>列表项</li>            <li>列表项</li>        </ul>    </li></ul>

注意：

无序列表在页面中非常常用，如导航、新闻列表、商品列表等

一组具有相关的内容放在一起，一般使用无需列表

2.有序列表

<ol>    <li>列表项</li>    <li>列表项</li></ol>

注意：

使用有序列表的场景：最热新闻排名，音乐排行榜 等

3. 定义列表

<h2>商品分类</h2><dl>    <dt>家用电器</dt>    <dd>电视</dd>    <dd>空调</dd>    <dd>洗衣机</dd>    <dd>电冰箱</dd>        <dt>电脑/办公</dt>    <dd>电脑整机</dd>    <dd>电脑配件</dd>    <dd>外部设备</dd></dl>

4. 列表标签总结

表格

1. table 标签

（ table 是 表格

? 他包裹着

? thead（表格头）

? tbody（表格主体）

? tfoot（表格注脚）

）

表格的整体包裹元素，有如下属性：

• width 指定表格的宽度
• height 指定表格的高度
• border 指定表格边框的宽度
• cellspacing （桑柏森） 指定单元格和单元格之间的距离
• cellpadding 指定单元格边框和内容之间的距离
• 都建议用css指定

2. 表格标题

使用 caption 表格标签， caption 标签内还可以在嵌套h标签

<caption>	<h2> 标题 </h2></caption>

3. 表格的结构组成

<!-- table 是表格标签 所有的表头表主体啥的都写在里面--><table>    <caption>标题</caption>    <!-- 表头 -->    <thead>        <!-- 一行 -->    	<tr>        	<th>表头单元格</th>            <th>表头单元格</th>            <th>表头单元格</th>        </tr>    </thead>    <!-- 表格主体 -->    <tbody>        <!-- 行 -->    	<tr>            <!-- 普通的单元格-->        	<td></td>        </tr>    </tbody>    <!-- 表格注脚 -->    <tfoot></tfoot></table>

4. 单元格内容的对齐方式

使用 align 属性设置水平对齐方式，值可以选为 left（左）、right（右）、center（中）	可以给 thead、tbody、tfoot 进行设置、会对里面的单元格都起作用	可以给 tr 进行设置，对该行的单元格起作用	可以给 td、th 进行设置，只对当前设置的单元格起作用使用 valign 属性设置垂直对齐方式，值可以选择为 top（上）、bottom（下）、middle（中）	可以给 thead、tbody、tfoot 进行设置，会对里面包含的单元格都起作用	可以给tr进行设置，对该行内的单元格起作用	可以给td、th 进行设置，只对当前设置的单元格起作用

5. 设置单元格宽高

给 td 或 th 设置宽度，同列的单元格都会按照设置的宽度，其实是设置列宽给 td 或 th 设置高度，同行的单元格都会按照设置的高度，其实设置行高也可以给 tr 设置高度，设置的是行高

6. 跨行和跨列

用于定义特殊的表格

给td或者 th设置 colspan用于跨列

给td或者 th 设置rowspan用于跨行

7. 表格标签总结

表单

1. form 标签

是表单的包裹元素，表单中所有的东西都要写在form标签里面

具有如下属性：

? action 指定要提交的地址

? method 指定提交方式

? target 指定新打开的页面在那个窗口打开

（它们没有样式，如果只想要个样子也可以不写）

disabled属性 任何一个表单都可以用，会显示不能用

2. 表单控件

①文本输入框

<input type="text">	type 指定表单控件的类型			属性：		type  设置为 text		name  属性指定名字（向后端提交数据的时候使用）		value 属性指定默认的值		maxlength  指定输入框最大可输入的长度

②密码输入框

   <!--password（怕死我的） 单词本身就是密码--><input type="password">	属性：		type 设置为 password		name 属性指定名字（向后端提交数据的时候使用）		value 属性指定默认值		maxlength  指定输入框最大可输入的长度

④单选按钮

<input type="radio">（ruai得奥）	属性：		type 设置为 radio		name 指定属性名字，多个单选按钮要实现单选的效果，它们的name属性值要一致（向后端提交数据的时候使用）		value 属性指定真正向后端提交的数据		checked 属性，设置默认选中，使用的时候，不需要给值

⑤隐藏域

<input type="hidden">用于向后端提交隐藏信息				（黑den）	属性：		type 设置为 hidden		name 属性指定名字（向后端提交数据的时候使用）		value 属性指定向后端提交的数据

⑥提交按钮

<input type="submit" value="提交">				（撒泼麦特）	属性：		type 设置为 submit		value 设置按钮上的文字或者<button>按钮上的文字</button>或者<button type="submit">按钮上的文字</button>

⑦重置按钮

<input type="reset" value="重置">	属性：		type 设置为 reset		value 设置按钮上的文字或者<button type="reset">按钮上的文字</button>

⑧普通按钮

<input type="button" value="按钮">普通按钮没有任何功能，只有按钮的样子	属性：		type 设置为 button		value 设置按钮上的文字或者<button type="button">按钮上的文字</button>

⑨文本域

<textarea></textarea>属性;	name 属性指定名字（）向后端提交数据的时候使用	disabled属性	设置表单控件不可用	rows 指定默认显示的行数，影响到本文的高度	cols 指定默认显示的列数，影响文本域的宽度

⑩下拉选项

<select name="">    <option value="">选项文字</option>    <option value="">选项文字</option>    <option value="">选项文字</option>    <option value="">选项文字</option>    <option value="">选项文字</option></select>select 的属性：	name	属性指定名字（向后端提交数据的时候使用）		option （表示下拉选项框）的属性：		value 指定真正向后端提交的数据		selected  设置默认选项（不用给值）

3. label 标签

label 标签用于表单控件做关联，label 中通常包含表单控件的说明文字

好处：

? ①有利于SEO,让文字与表单控件关联了

? ②点击与表单控件关联的文字可以让表单控件获取焦点

用法：

<!--用于 文本输入框、密码输入框、文本域、下拉选项--><label for="username">用户名：</label><input type="text" id="username"><!-- 用于单选按钮 或者 复选项 --><label>	<input type="radio">文字</label><label>	<input type="radio">文字</label>

4. fieldset 和 legend 标签

fieldset 可以在表单控件的周围加一个边框

legend 指定表单的标题，出现在边框的上面

<form>    <fieldset>        <legend>表单标题 </legend>         表单控件。。。。    </fieldset></form>

5. disabled 属性

所有的表单控件，都可以设置属性 disabled，设置该属性，表单控件就变为不可用的状态

6. 表单总结标签

框架标签

实体标签

空格 	&nbsp；<	 &lt;>	 &rt;&	 &amp;￥    &yen;?    &copy;×    &times;÷    &divide;

html的全局属性

class	给元素设置类名id		给元素设置id名，元素的id名不能重复style	用于设置 css 样式dir		设置文字的方向tutle	设置一个文字提示，超链接和图片用的比较多lang	设置内容的语言

css的基本语法

1. css 与 html 的关系

css	为某个 html 元素设置样式css	的样式作用在某个html元素上

2. 元素和元素之间的关系

父元素祖先元素子元素后代元素兄弟元素  具有相同父元素的称之为兄弟元素

3. 在html中使用css的三种方式

① 行内元素

<p style="css代码..."></p>

② 内嵌式

<style>	css 代码...</style>

style 标签一般放在 head 标签内

③ 外链式

css 代码写在单独的 css 文件中，在 html 中使用 link 引入 css 文件

<link rel="stylesheet" href="css文件的地址">

注意：

内嵌式与外链式优先级是相同的， 后面的覆盖前面的

行内式的优先级大于其他两个

4 基本语法结构

① 在内嵌式和外链式中

选择器： 选择到一个或多个元素。

声明块：{}括起来就是声明块，用来设置 css 样式。

声明： 声明块由一条一条的声明组成，没条声明的后面加分号。

一条声明的组成： css属性名: 属性值;

选择器 {    css属性名:值;    css属性名:值;    css属性名:值;}

② 行内式语法

行内式的语法规则不需要选择器，只要把一条一条的声明写在 style 属性的值里面

<p style="css属性名：值；css属性名:值"></p>

SCSS 的基本长度单位

px 像素em 默认字体大小的倍数百分比	 注意如果width设置为百分比，参照的是父元素宽度          如果font-size设置比分比，参照默认字体大小，等同于 em

如果长度的值设置为0，可以不加单位。

长度的值如果非0，必须加单位。

css三种基本的颜色表示方式

①颜色名方式(colorname)

background-color:red

②rgb方式

计算机三原色：red、green、blue

/*用0~255之之间的数字表示每个颜色*/background-color:rgb(123,255,12);/*使用百分比表示每个颜色，0%~100%*/background-color:rgb(100%,50%，0%）;

③ 十六进制方式

/*使用6个十六进制的数字，每组两个数字是一组，原理通rgb方式一样*/background-color:#rrggbb;

注意：

三原色的数值都是一样的，表示为灰色；

数值越大，灰色越浅，如果数值最大，表示白色

数值越小，灰色越深，如果数值都是0，表示黑色

css基本选择器

1. 基本选择器

①标签名选择器（元素选择器）

标签名{    }

② id选择器

#id名{    }

注意： 元素的id的值是唯一的！

③类名选择器

.类名{    }

注意：

1. 元素的类名可以相同。
2. 一个元素可以有多个类名

④ 全局选择器

能选择到包括 thml 和body 在内所有的元素

head以及head内部的元素选择器选不到

*{    }

css的层叠性

所有能够选择到一个元素的选择器所设置的样式都会作用在这个元素上，这就是css的层叠性

基本选择器的优先级

选择器优先级：ID名选择器 > 类名选择器 > 标签名选择器 > 全局选择器如果优先级相同，后面的覆盖前面的行内式优先级高于所有的选择器（降维打击）

盒子模型

任何一个元素都会被当作一个盒子

1. 盒子模型的显示模式

① 块级元素

• 某个元素的显示模式如果是块级的，该元素称之为块级元素
• 块级元素能够独占一行
• 块级元素默认宽度取父元素宽度，默认高度被内容撑开（没内容就没高度）
• 可以对块级元素设置高度

② 行内元素

• 某个元素的显示模式如果是行内的，该元素称之为行内元素
• 行内元素不会独占一行
• 行内元素的默认宽度和高度都是被内容撑开的（没内容就没宽度）
• 无法对内元素设置宽高

③ 行内块元素

• 某个元素的显示模式如果是 inline-block 的，该元素称之为行内块元素
• 行内块元素同行内元素一样不会独占一行
• 行内块元素默认宽度和高度同行内元素一样被内容撑开（没内容就没宽高）
• 行内块元素可以设置宽高

注意：

原来的css标准中，区分行内元素和块级元素的唯一标准是：能否独占一行

如果按照这个标准，行内块元素也算作行内元素

元素默认显示的模式

①块级元素

格式排版标签（全部）：div  h1~h6   p   hr  br  pre表格：table	thead	tbody	tfoot	caption	tr表单：form

② 行内元素

文本标签（全部）：em	strong	ins	del	sup	sub无意义标签：span超链接：a

③行内块元素

图片：img表格：th	td表单：input 	textarea 	select 	button

修改元素的显示模式

display:inlne(行内)		block（块级）		inline-block（行内块）

常用属性

1. 字体属性

font-family 字体族科

常见的字体： 宋体，黑体，斜体，楷体衬线字体（serif）：横竖笔画不等宽，常见衬线字体：宋体，楷体，黑体，兰亭黑非衬线字体（sans-serif）：横竖笔画等宽，常见非衬线字体：微软雅黑，黑体，兰亭黑

font-family:"黑体"，楷体，sans-serif；

font-size 字体大小

font-size：16px；

默认字体大小是16pxchrome 浏览器字体大小最小是 12px，如果设置的 font-size 比 12 小，按照12px 显示

font-style 字体风格，用于设置斜体

font-style:normal;/*默认值*/font-style：italic；/*设置为斜体 使用字体自带的斜体 推荐！*/font-style：oblique；/*设置为斜体 强制变为斜体*/

font-weight

font-weight:noeml;/*默认值*/font-weight：bold;/*粗体*/ront-weight：lighter;/*细体字*/

font-weight 的值可以指定为数字100~300： 细体400、500： 正常600~900: 粗体

font-variant 字体变形（了解）

normalsmall-caps 小型大写字母

font 字体复合属性，同时设置多个属性的值，多个值用空格隔开

/*至少设置 字体大小和字体族科，顺序固定 */font: 20px ‘Microsoft YaHei‘,sans-serif;/* 	字体大小和字体族科必须是最后两个	前面的 weight、style、variant 没有顺序要求*/font: bold 20px ‘Microsoft YaHei‘,sans-serif;font: italic bold 20px ‘Microsoft YaHei‘,sans-serif;

字体颜色

color设置字体颜色

color:#f90;

文本输入

1. letter-spacing 和 word-spacing(了解)

letter-spacing：设置字母之间的间距（汉字也会生效）word-spacing： 设置单词之间的间距（对汉字无效）

2. 文本对齐方式text-align

设置文本内容再元素内，水平方向的对齐方式

text-align:left/right/center;

3. 设置文本之间如何对齐vertical-align

① 用法

vertical-align:baseline /top /bottom /middlebaseline:沿基线对齐（默认）top：沿顶线对齐middle：沿中线对齐

②用途

第一个用途：行内元素或行内块元素与文本内容在一行显示的时候，设置如何对齐

给行内元素或行内块设置 vertical-align

第二个用途：设置表格中单元格文字的垂直对齐方式

给td 或 th 设置 vertical-align 可以控制文本在单元格内的垂直对齐方式

4. 行高 line-hright

行高： 第一行文字的中线与第二行文字中间的距离

通过设置行高与元素的高度一只，实现文字在元素内容垂直居中对齐方式，但是，只适合只有一行文字的情况。

行高可以让文本内容的高度变大，一个元素不设置高度，只设置行高且元素内有文本内容，元素高度与行高大小一致。

font 复合属性，把行高也复合进去了

font:30px/100px ‘microsoft yahei‘;/* 其中100px 就是行高 */

5. 文本修饰 text-decoration

text-decoration:none /underline /overline /line-throuthnone:无效果（默认）underline：下划线overline：上划线line-throuth：删除线

注意：

超链接a默认有下划线，可以使用text-decoration:none 去掉a的下划线

6. 首行缩进text-indent

text-indent:2em;

背景属性

1. 背景颜色 background-color

background-color:#f89;

注意：

1.给body元素设置背景颜色，其实是设置整个页面的背景色

2.元素默认的背景颜色是透明色 transparent

2. 背景图片background-image

background=image:url(图片地址)；

使用img标签引入图片和背景图片有什么区别？

1. img标签是一个元素，图片本身就是元素；背景图片可以给任何元素添加背景图
2. 如果图片作为网页内容中的一部分，建议使用img标签；如果图片仅仅是修饰，建议使用背景图片
3. img图片是可以被搜索引擎抓取的。

3. 背景图片重复background-repeat

background-repeat:repeat;

可选值：	repeat 重复（默认）	repeat-x 只在水平方向重复	repeat-y 只在垂直方向重复	no-repeat 不重复

4. 背景图片定位backgeound-position

调整背景图片在元素上的位置

①使用方式

使用关键字	水平方向的关键字： left right center	垂直方向的关键字： top bittom center使用关键字可以设置两个值	background-position：left top；使用关键字设置一个值（另一个默认值设置为center）	background-position：left；	background-position：center；

使用具体坐标，用长度来表示元素的左上角作为坐标原点，通过坐标设置图片（左上角）在元素上的位置设置两个值	background-position：100px 10px设置一个值（100px 会被作为 x 坐标，垂直方向默认 center）	background-position:100px;	

② 使用情况

大部分情况，使用background-position的时候，背景图比元素要小但是，背景图比元素大的有些情况也需要设置background-position，往往会设置为center center

5. 背景图片附件 background-attachment

设置背景图的定位方式

background-attachment:scroll /fixed

scroll：默认值，设置背景图位置的时候，元素的左上角作为坐标原点fixed： 设置背景图片位置的时候，视口的左上角作为坐标原点如果滚动条滚动，元素会跟着滚动，但是视口不会跟着动

6. background复合属性

把所有的子属性的值写在一起，用一个css属性代替多个属性

background复合属性对值没有顺序和数量要求

background:#369 url(图片地址) no-repeat 10px 50px scroll;

鼠标光标属性cursor

设置鼠标光标华东到元素上之后，光标的样式

cursor:pointer;

值：	defalut默认值	pointer 小手（最常用）	move 移动图标（用于商品的放大镜）

列表属性

list-style-type		设置列表符号	值： disc、circle。。。。none（常用）	list-style-position 	设置项目符号在li的里面还是外面	值：	inside		  outside（默认在外面）		  list-style-image：url（图片地址）list-style 复合属性，把所有的子属性写在里面，没有数量和顺序要求

/*常见用法*/list-style：none；

表格属性

table-layou	设置列宽的计算方式		值：		auto	默认，列宽根据单元里的内容多少计算		fixed	列宽与单元格内内容多少没关系，如果去设置单元格宽度，所有列等宽		border-collspase	设置单元格边框是否合并			值：			separate 默认，独立			collspase 合并			border-spacing	设置单元格之间的距离（类似于 table 的 cellspacing 属性）			生效的前提：单元格边框不能合并			cpation-size	设置表格标题位置				值：				top 默认，在表格上面				bottom 在表格下面				empty-cells		设置是否隐藏没有内容的单元格1				值：				show  默认，显示				hide  隐藏

注意：

以上五个属性只能设置给table元素、

常用：

table-；layout、 border-collapse

选择器

1. 组合器选择

①后代选择器

选择器1 选择器2选择器1 选择器2 选择器3 选择器4....

② 子元素选择器

选择器1>选择器2选择器1>选择器2>选择器3>选择器4

③并集选择器

选择器1，选择器2选择器1，选择器2，选择器3，选择器4....

④ 交集选择器

选择器1选择器2选择器1选择器2选择器3选择器4....

伪类选择器

a：linke

选择到地址没有被访问过的超链接

a：visited

选择到地址被访问过的超链接

a：hover

选择到鼠标悬停在上面的元素

a：active

选择到激活状态（鼠标在元素上按键按下不松手）的元素

注意：

1. ：linke 和 ：visited只能用于超链接元素， ：hover 和 ：active 可以用于所有的元素
2. 4个伪类选择器一起使用的时候，注意顺序 love-hat 爱恨原则； ：link、：visted、：hover、：active
3. 其中：hover 伪类选择器非常常用

选择器优先级

如果有层级比较多的组合选择器，比较它们你的优先级，查找id选择器、类名选择器等的数量，进行权衡计算

第一档次：	ID选择器第二档次：	类名选择器、伪类选择器第三档次：	标签名选择器第四档次：	全局选择器降维打击：	行内式开挂：	！important（针对某个具体的css属性）

！important > 行内式 > ID > 类名 > 标签名 > *

盒子模型

盒子模型的三种显示模式

① 块级元素

1. 能够独占一行2. 可以设置宽高

②行内元素

1. 无法独占一行2. 无法设置宽高

③ 行内块元素

1. 无法独占一行2. 可以设置宽高

盒子模型的组成

• 内容区域（元素里面的文字内容或者是后代元素显示的区域）
• 内边距 内容和边框之间的距离（内容不会显示在内边距上）
• 边框
• 外边距，外边距不属于盒子的一部分

影响盒子大小的设置： 内容区的大小，内边距的大小，边框的大小

外边距不影响盒子大小，影响盒子位置

盒子显示模式（隐藏盒子）

① 修改盒子的显示模式

display值：	inline	inline-block	block	none	让元素隐藏

② 设置元素的可见性

visibility	设置元素的可见性值：	visible 可见的，默认的	hidden 不可见

display：none 和 visibility：hidden 区别：

元素这只为display：none，元素不在占用页面中的位置

元素设置为 visibility：hidden，元素不可见但是还是占着原来的位置。

块级元素的默认宽度

1. 如果元素没有外边距，元素的总宽度=父元素内容区域宽度
2. 如果元素设置值了左右外边距，元素的总宽度=父元素内容区域宽度-元素自己的左右外边距
3. 如果元素本身设置了内边距或边框，元素的总宽度不变，内容区域宽度会被挤压。