目录
一、HTML
1. html 概念
HTML(HyperText Markup Language)就是超文本标记语言。”超文本”就是表示页面内可以包含非文字元素,如:图片、链接、音乐等等。
2. 分类
基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。
3. 基本语法
3.1 html 标签
(1) <标签名>
单标签,不设置属性值。
<br/>、<hr/>
(2) <标签名称 属性=”属性值”>
单标签(也叫空元素),设置属性值。
<hr width=”800”/>
(3) <标签名称>…</标记名称>
双标签,不设置属性值。
<title>…</title>
(4) <标签名称 属性=”属性值”>…</标记名称>
双标签,设置属性值
<body bgcolor=”red”>…</body>
<font size=”7”>…</font>
(5)标签的分类
HTML 中标签元素三种不同类型:块状元素,行内元素,行内块状元素。
- 块级元素特点: 元素都从新的一行开始,并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可设置;元素宽度在不设置的情况下,是它本身父容器的 100%(和父元素的宽度一致),除非设定一个宽度。
- 行内元素特点 :和其他元素都在一行上;元素的高度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的文字或图片的宽度,不可改变。
- 行内块状元素的特点:和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置。
他们的属性不是固定不变的,后期也可以通过 CSS 进行修改。
3.2 html 整体结构
(1)概念
HTML 的内容都是由一对一对的标签组成,标签不能混乱,页面有页面的整体架构和规则,标签和标签之间有需要正确嵌套。
<html>
<head></head>
<body></body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 文档的基本结构</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
</body>
</html>
(2)<html>…</html>
<html>标志用于 HTML 文档的最前边,用来标识 HTML 文档的开始。而</html>标志放在HTML 文档的最后边,用来标识 HTML 文档的结束,两个标志必须一块使用。
(3)<head>…</head>
- <head>和</head>构成 HTML 文档的开头部分。<head>和</head>标志对之间的内容是不会在浏览器的框内显示出来的,两个标志必须一块使用。
- 在此标志对之间可以使用<title></title>、<script></script>、<meta>、<link>等标签。
- <meta>:用来提供关于文档的信息,起始属性为:charset="utf8"。表示告诉浏览器页面采用的什么编码,一般来说我们就用 utf8。当然,文件保存的时候也是 utf8,而浏览器也设置utf8 即可正确显示中文。
- <link>:用来引入 css 文件
- <script>:用来引入 js 文件或编写 js 代码。
(4)<title>…</title>
- <title>定义文档的标题。浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
- 注意:<title>标签位于<head>标签内,是<head>标签中唯一要求包含的东西。
(5)<base>
- <base> 标签为页面上的所有链接规定默认地址或默认目标。
- 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
- 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的URL。
(6)<body> …</body>
- 一般情况下浏览器上显示的内容的都放在 body 中,不排除其他标签可以不用 body,比如frameset 框架集标签。
- <body>和</body>是 HTML 文档的主体部分,在此标志对之间可包含<p>…</p>、<h1>…</h1>、<br>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。
(7)常用属性
属性 | 值 | 描述 |
---|---|---|
bgcolor | rgb(x,x,x):red、green、blue,x:0-255 #xxxxxx:十六进制的数字,00-ff Colorname:Red、Green... | 规定文档的背景颜色,以后可以用样式取代它 |
text | rgb(x,x,x) #xxxxxx colorname | 规定文档中所有文本的颜 色,以后可以用样式取代它 |
3.3 html 解析标准
由于使用的场景或者版本的更替间,HTML 使用的标准不同,所以需要浏览器按照不同的标准来解析 HTML 文本内容,这就需要告知浏览器我当前的 HTML 页面是按照那种方式进行编写的,需在html文件的最顶端写上<!DOCTYPE>
4. 常用标签
HTML 页面是由标签组成,不同的标签浏览器对其进行不同样式和内容的渲染 ,我们需要记忆常用的标签即可。大致可分为如下几类:头标签、标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span、格式化文字的。
4.1 标题和水平线
- <h1> - <h6> 标签可定义标题,标题依次递减,由于 h 元素拥有确切的语义,因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。
- 相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
- <h999>这样的标签不产生错误,但是不具有标题的效果。
- h1 标签可以为搜索引擎获取,便于页面在被搜索的时候检索到,但是一个页面最好只有一个 h1 标签,否则可能进入搜索引擎的黑名单。
<h1></h1>
<hr /> 标签在 HTML 页面中创建一条水平线(horizontal rule)可以在视觉上将文档分隔成各个部分。在 HTML 中,<hr> 标签没有结束标签。
<hr />
常用属性
4.2 段落和换行
<p>标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
各个段落之间会有大的空隙。
<p></p>
br 标签为换行符号,<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。
注意:<br> 标签只是简单地开始新的一行,而当浏览器遇到 <p> 标签时,通常会在相邻的段落之间插入一些垂直的间距。请使用 <br> 来输入空行,而不是分割段落。
<br />
4.3 图片
img 元素向网页中嵌入一幅图像。
注意:从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
行内:
<img src=”” alt=””>
必须属性
常用属性
4.4 a 标签
- <a>标签定义超链接,用于从一张页面链接到另一张页面。
- <a>元素最重要的属性是 href 属性,它指示要链接的目标位置,同时没有 href 属性 a 标签内的内容与普通文本没有区别,也就失去了超链接的功能。
- 若是想要跳转到当前页面,那么 href 的值为#。被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)。
<a href=”http://www.baidu.com”>百度</a>
利用 a 标签的 name 属性:<a name="top"></a>
一般标签的 id 属性:div id=""、a id=""等:
<div id="top"></div>、<a id="top"></a>
<a href="#top">返回首部</a>
常用属性
4.5 div 和 span
- <div>是一个块级元素,通常与 css 配合使用,用于布局。
- <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
- <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
<div>content</div>
常用属性
<span>标签被用来组合文档中的行内元素 ,span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化
<span>content</span>
4.6 表格
- <table></table> 标签定义 HTML 表格。
- <tr></tr>标签定义表格的行。tr 元素包含一个或多个 th 或 td 元素
- <td></td>标签定义 HTML 表格中的标准单元格。
- <th></th>定义表格内的表头单元格。th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。
理解:table 相当于一个表格的外框,tr 为行,td 为一个一个单元格,th 为有标题作用的单元格,th 中的内容同时有加粗的效果。
table 常用属性
tr 常用属性
<td>的 colspan 和 rowspan 分别规定单元格横跨的列数和行数
4.7 列表
(1)有序列表
由<ol></ol>和<li></li>标签组成。
<ol>
<li></li>
<li></li>
......
</ol>
常用属性
(2)无序列表
由<ul></ul>和<li></li>标签组成。
<ul>
<li></li>
<li></li>
......
</ul>
4.8 fom表单
- 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea、fieldset、legend 和 label 等 元素。
- <form> 标签用于为用户输入创建 HTML 表单。
- 表单用于向服务器传输数据。form 元素是块级元素,其前后会产生折行。
(1)常用属性
(2)提交方式
- method:表单提交方式:get、post
- get:默认,主动的获取方式,数据放在 url 上,数据的容量有限,安全性差,有缓存
- post:数据放在请求实体中,数据量理论上没有限制,相对安全,没有缓存
(3)<input>
- <input> 标签用于搜集用户信息。
- 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
常用属性
若上传文件,请求方式为 post,且表单添加一个属性:enctype="multipart/form-data"
注意:
- 没有 name 属性的属性是无法提交到后台的!!!!
- Radio 单选按钮以 name 相同为一组。
- Checkbox 复选按钮以 name 相同为一组。
<label></label>
- <label> 标签为 input 元素定义标注(标记)。
- label 元素不会呈现任何的特殊效果。label 标签的 for 属性应当与相关元素的 id 属性相同。
<label for="username">用户名:</label>
<input type="text" id="username" name="username"/>
<button></button>
<button> 按钮 </button>
常用属性
<select></select>
<select>用于定义下拉列表。
<select name="cars" >
<option value="audi">Audi</option>
<option value="qq">QQ</option>
<option value="bmw">BMW</option>
</select>
select 常用属性
option 常用属性
<textarea></textarea>
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols 规定文本区内的可见宽度。rows 规定文本区内的可见行数。
<textarea>content</textarea>
4.9 格式化文字的标签
<font>
规定文本的字体、字体尺寸、字体颜色。
<b>(粗文本)、<i>(斜体文本)、<u>(下划线文本)、 < del >(中划线文本)、<sub>(下标文本)、<sup>(上标文本)
5. HTML 常用字符实体
- 在 HTML 中,某些字符是预留的。
- 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
- 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(characterentities)。
实体名称对大小写敏感!
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 |  ; |  ; | |
< | 小于号 | <; | <; |
> | 大于号 | >; | &; |
© | 版权 | © | ©; |
<body>
<
>
©
</body>
二、CSS介绍
CSS(Cascade Style Sheets)层叠样式表, 是一种用来表现 HTML或 XML等文件样式的计算机语言。CSS是用来写样式的,必须依附HTML来展示其功能。
2. 基础语法
2.1 基本格式
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器名{
属性 : 属性值;
......
}
div{
background-color : red;
}
注意:
- css 声明要以分号 ; 结束,声明以{}括起来
- 建议一行书写一个属性
- 若值为若干单词,则要给值加引号,如 font-family: "agency fb";
2.2 CSS注释
css的注释只有一种,同Java的多行注释相同。
/*
这里的内容是css注释
*/
3. CSS的使用方式
3.1 行内样式
使用style属性引入CSS样式。
(1)示例:
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行内样式</title>
</head>
<body>
<!--使用行内样式引入CSS-->
<h1 style="color:red;">Leaping Above The Water</h1>
<p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>
(2)适用场景
行内式式将样式定义在具体 html 元素的 style 属性中。以行内式写的 CSS 耦合度高,只适用于当前元素,在设定某个元素的样式时比较常用。
3.2 内联样式(嵌入式)
在style标签中书写CSS代码。style标签写在head标签中。
(1)示例:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表</title>
<!--使用内部样式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>我是一个div</div>
</body>
</html>
(2)适用场景:
如果需要添加的样式比较多,行内样式的耦合性太高,使用内联样式可以利用合理的选择器给一些html添加相同的样式,减少了代码的重复性,并且可以时html界面变得简洁。
3.3 外联样式(外部引入)
CSS代码保存在扩展名为.css的样式表中,HTML文件引用扩展名为.css的样式表。
(1)示例
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>外部样式表</title>
<!--链接式:推荐使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
(2)有点与使用场景
很多时候,大量的 HTML 页面使用了同一个 CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中,然后通过<link>元素去引入它。使用外联样式使html代码与css代码分离开来,使结构与样式相分离,增强了代码的可读性,方便了后期的优化与修改。
4. 选择器
4.1 基础选择器
(1)通用选择器
使用通配符 * 来表示,表示所有的属性都可以使用,一般使用在css文件的头部,来进行页面结构的初始化。
*{
margin:0;
padding:0;
list-style:none;
}
(2)ID选择器
使用符号 # 加 id名来表示,同一个元素只能有一个id值,id不可重复。
#only{
background-color:red;
}
(3)类选择器
使用 .class 就可以找到具有clss选择器的元素了,一个class可以对应多个元素。
<div class="demo">123</div>
<div class="demo">abc</div>
.demo{
backround-color:green;
}
(4)标签选择器
使用标签名加大括号表示,可以选中此标签下的所有元素。
<span>123</span>
<div>
<span>abc</span>
</div>
span{
corlor:red;
font-size:5px;
}
(5)属性选择器
使用 [属性名]{ } 来表示,选取带有指定属性的元素。
[id]{
color: red;
font-size: 20px;
}
4.2 复杂选择器
(1)分组选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,可以消除代码的耦合性,简化代码。
可以写成一行,建议换行竖着写。
div,
#id,
.class
{
background-color:pink;
font-weight:bold;
}
(2)派生选择器
用于选择指定标签元素下的后辈元素,以空格分隔。所有后辈都可选中。
div .class #id{
border: 1px solid red;
}
(3)子元素选择器
用于选择指定标签元素的所有第一代子元素,以大于号 > 分隔。与派生选择器不同的是只能选中第一级子元素。
div>.class{
border: 1px solid red;
}
(4)并列选择器(兄弟选择器)
1)相邻兄弟选择器
可选择紧接在另一元素后的元素,且二者有相同父元素。以加号分隔
#d + div {
border: 1px solid red;
}
2)普通兄弟选择器
选择紧接在另一个元素后的所有元素,而且二者有相同的父元素,以波浪线分隔
li ~ li {
background-color : yellow;
}
(5)伪类选择器(伪元素选择器)
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
4.3 选择器的权重
选择器的权重不同,css的展示优先级也不同。权重越高,优先级越高。
5. 常用属性的设定
5.1 css背景
(1)背景颜色
使用 background-color 来设定。
body {
background-color:black;
}
(2)背景图片
使用 background-img 来设定。
body {
background-image:url(“图片路径地址”);
}
- 设置元素的背景图像,默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。
- 使用 background-repeat 可以用来设置是否以及如何重复背景图片。
- repeat:默认。图片将同时在水平和垂直方向上重复。
- repeat-x repeat-y :可以分开设置在水平和垂直方向上的重复情况。
- no-repeat:背景图片仅显示一次。
body {
background-image: url(图片地址);
background-repeat: no-repeat;/*表示不允许重复*/
}
5.2 文本
(1)文本颜色
直接使用 color 来设置文本的颜色。
div {
color:blue;
}
.class {
color:#fff;
}
#id {
color:rgb(255,255,255);
}
(2)文本对齐方式
text-align 用来设置文本对齐方式,center(居中),left(左对齐),right(右对齐)
(3)文本修饰
text-decoration 用来规定添加到文本的修饰,属性值:none、underline、overline、line-through
(4)文本缩进
text-indent 用来设置首行缩进
.ident {text-indent: 2em;}
/*
这里的 em 也是一个相对单位,2em 表示缩进2个字符。
*/
5.3 字体
5.4 列表(list-style)
list-style 简写属性在一个声明中设置所有的列表属性。
可以按顺序设置如下属性:
list-style-type | 设置列表项标记的类型。参阅:list-style-type 中可能的值。 |
list-style-position | 设置在何处放置列表项标记。参阅:list-style-position 中可能的值。 |
list-style-image | 使用图像来替换列表项的标记。参阅:list-style-image 中可能的值。 |
inherit | 规定应该从父元素继承 list-style 属性的值。 |
常用的列表样式值(list-style-type)。
最常用的是:list-style = none 用于进行css样式的初始化。
5.5 盒子模型
(1)盒子的组成
盒子模型是虚拟的,由四部分组成。
- A 盒子壁 border
- B 盒子内边距 padding
- C 盒子内容 content=width+height
- D 盒子外边距 margin
(2)模型图
(3)常用属性
(4)注意事项
- 使用 padding 并不会缩小元素,而是向外扩大盒子,但是盒子会产生变形。
- 使用 margin 会使盒子外边距增大,增大的只是盒子与其他元素之间的距离,并不会改变盒子的尺寸。
6. 定位与浮动
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
6.1 position(绝对定位与相对定位)
- static:元素框正常生成。作为文档流的一部分(默认值)
- relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
- absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
6.2 flooat(浮动)
当元素应用了 float 属性后,将会脱离普通流,其容器(父)元素将得不到脱离普通流的子元素高度。
- 会将元素的 display 属性变更为 inline-block。
- 浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)
- 浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示,必须让两个块状元素都应用 float)。
注意:只有横向浮动,并没有纵向浮动。