HTML+CSS基础知识简单版

一、HTML概述

HTML：超文本标记语言，其实就是用来开发网页的一门语言；
CSS：层叠样式表，可以用于渲染网页、美化网页、做网页。

1、HTML介绍

HTML：超文本标记语言

超文本：超过文本、超级文本；
HTML不仅可以包含文本，还可以包含图片、音频、视频等各种格式的文件；
标记：标签、元素，指的是用尖括号括起来的一组内容，例如：<div>,<img>,<h1>,</h1>,</div>等。
其实就是用于开发网页的一门语言。

关于HTML:

HTML开发的网页文档，通常是以.htm、.html为后缀。
HTML开发的网页文档，可以通过浏览器打开并显示（浏览器就是一个HTML解析器）。
HTML本质就是一个文档。

2、HTML结构

<!-- 用于声明当前文档是一个html格式的网页,并且版本是html5.0版本 -->
<!DOCTYPE html>
<!-- 根标签,所有的HTML内容都应该放在根标签内部 -->
<html><!-- 头部分,用于存放网页的基本属性信息(例如网页标题,网页编码,引入的css样式,js文件等) --><head><!-- 通知浏览器当前使用的编码,若不指定可能会出现乱码现象 --><meta charset="utf-8"><!-- 用于指定网页标签的标题 --><title>我的第一个测试网页</title></head><!-- 体部分,用于存放网页的可视化内容 --><body><!-- h1、h2等用于指定网页内容的标题 --><h1 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h1><h2 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h2><h3 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h3><h4 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h4><h5 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h5><h6 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h6><!-- 生成一条水平线，边框为5px实线红色 --><hr style="border: 5px solid red;"/></body>
</html>

3、HTML语法

标签、标记、元素：就是用尖括号（<>）括起来的一组内容，例如：<head>、<body>、<h1>、<img>、<a>等。标签由开始标签()和结束标签()组成, 开始和结束标签之间可以包含其他的内容。
自闭标签：有些标签内部不需要写内容，通常可以写成自闭标签。例如：
<br/> 、<hr/>、 <input/>、 <img/>、 <meta/>等
属性：
<input type="text" id="username" class="xxx"/>
- 属性必须要声明在标签上,不能独立存在
- 属性可以声明多个,多个属性之间可以用空格隔开
- 属性的值可以使用双引号或者单引号引起来.
  <input type="text" id="username"/>
  <input type='text' id='username'/>
  <img src="xx" id="xx" name="xx"/>
  <img src='xx' id='xx' name='xx'/>
注释格式：
注释作用：（1）为代码添加解释说明 ;(2)将一些暂时不需要执行的代码注释。
空格和换行
在html中,多个连续的空白字符(空格/换行/制表符)会被解析成一个空格来显示。
- 如果要实现多个空格,可以使用  或 &emsp;
- 如果要做换行,可以使用 <br/>标签;

二、HTML标签

1、图像标签

img标签可以在网页中插入一幅图像,例如：
<img src="img/meinv01.jpg" width="40%"/>
其中,src属性: 用于指向图片的路径(相对路径,网络路径)

width属性: 指定图片的宽度
height属性: 指定图片的高度

关于路径问题:

不建议写带盘符的绝对路径,因为将来换一个发布环境,这个路径很可能是错的,所以不建议
<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg" width="40%"/>
建议写相对路径
./: 表示当前文件所在的位置,可以省略不写
…/: 表示当前文件所在目录的上一级目录

<img src="./img/meinv01.jpg" width="40%"/>
表示在当前文件(html)所在的目录找img目录,在目录下找meinv01.jpg文件

2、超链接标签

a标签用于在网页中实现一个超链接
点击超链接后,会跳转到另外一个位置(网页、图片、下载地址等),例如:
<a href="http://www.baidu.com" target="_blank">百度一下,你就不知道</a>

其中href属性,用于指向所跳转到的url地址
target属性,用于指向以何种方式打开超链接
- self: 在当前窗口打开超链接
- blank: 在新窗口中打开超链接

3、表格标签

table: 用于定义一个表格,其中可以包含tr标签
tr(table row): 用于定义表格中的行, tr中可以包含td/th
td/th(table data cell): 用于定义表格中的单元格
th(table header cell): 用于定义表头中的单元格，其中的文本默认会加粗并且居中。
colspan属性：设置单元格横跨的列数,例如:
<td colspan="2">11</td>
colspan=“2”: 设置当前单元格横跨两列
rowspan属性：设置单元格竖跨的行数
<td rowspan="2">21</td>
rowspan=“2”: 设置当前单元格竖跨两行

4、表单标签

4.1.表单的作用

表单的作用: 用于向服务器发送数据
向服务器发送数据的两种方式:
1)使用表单向服务器发送数据
表单中往往存在表单项标签(用户名、密码、昵称、邮箱、验证码等)，在表单项中可以输入数据，再提交表单就可以将输入的数据提交给相应的服务器。
2)使用超链接也可以向服务器发送数据
http://www.baidu.com?user=张三&age=20&like=篮球
在URL地址后面可以拼接问号,问号之前是url地址,问号之后可以拼接参数,参数包括参数名(user，age，like)，和参数值（张三，20，篮球）,多个参数之间用&分隔。在输入地址后访问服务器,就可以将地址后面拼接的参数一并带给服务器

4.2.form标签

<form action="http://www.baidu.com" method="GET|POST"> ... </form>
其中action属性:用于指定表单中的数据将会提交到哪个地址。
例如：action属性指向百度服务器的网址，就意味着，表单中的所有数据都会提交到百度服务器。
method属性:指定提交方式,常用提交方式为GET和POST(区别后面会讲到)
如果不指定method,默认是GET提交。

5、表单项标签

1)文本输入框(用户名/验证码/邮箱/昵称)
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="text" name="nickname"/>
2)密码输入框(密码/确认密码)
<input type="password" name="psw"/>
<input type="password" name="repsw"/>

3)单选框(性别/单选题选项)
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
4)多选框/复选框(多选题选项/岗位/爱好)
<input type="checkbox" name="like"/>篮球

5)下拉选框(省份/城市/市区选择)
<select name="prov"> <option>北京市</option> <option>上海市</option> <option>广东省</option> ... </select>

6)多行文本输入框
<textarea name="desc"></textarea>

7)按钮/提交按钮
<input type="button" value="换一张"/>
普通按钮本身没有功能,可以通过js为按钮添加功能(比如点击后,换一张图片)

<input type="submit" value="提交/登录/注册"/>
提交按钮用于提交表单,将表单中的数据提交给action属性所指向的服务器。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>欢迎注册</title><!-- style标签内部用于书写css样式、css注释 --><style>*{/* 选中所有元素 */font-family: "微软雅黑";}table,td,th{/* 设置边框 */border: 2px solid red;border-collapse: collapse;}table{/* 设置位置 *//* 设置背景 */background-color: lightgray;/* 设置左右外边距自适应(始终保持相等) */margin-left: auto;margin-right: auto;}td,th{/* 设置内边距(元素边框和内容之间的距离) */padding: 5px;}h1{text-align: center;}</style></head><body><h1>欢迎注册</h1><table><tr><td>用户名:</td><td><input type="text"/></td></tr><tr><td>密码:</td><td><input type="password"/></td></tr><tr><td>性别:</td><td><input type="radio" value="boy" checked name="sex"/>男<input type="radio" value="girl" name="sex"/>女</td></tr><tr><td>爱好:</td><td><input type="checkbox" value="basketball" name="hobby" />篮球<input type="checkbox" value="basketball" checked name="hobby" />足球<input type="checkbox" value="basketball" name="hobby" />排球</td></tr><tr><td>城市</td><td><select><option value="beijing">北京</option><option value="guangzhou" selected="">广州</option><option value="shenzhen">深圳</option><option value="shanghai">上海</option></select></td></tr><tr><td>自我描述:</td><td><textarea name="desc" cols="30" rows="5" placeholder="请输入描述信息..."></textarea></td></tr><tr><td colspan="2" style="text-align: center;"><input type="submit" value="提交" /></td></tr></table></body>
</html>

6、表单细节问题

1、提交表单时，表单中的数据为什么没有被提交？

对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略。例如：

<input type="text" name="username"/>
<input type="password" name="psw"/>

2、如何让多个单选框只能有一个被选中？

要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！

<td>性别:</td>
<td><input type="radio" name="gender"/>男<input type="radio" name="gender"/>女
</td>

3、为什么单选框、复选框选择某一项后提交的值都是on?

因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

4、如何设置单选框或复选框默认选中某一项?

可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：

<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

5、如何设置下拉选框默认选中某一项?

在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：

<select name="city"><option>北京</option><option>上海</option><option selected="selected">广州</option><option>深圳</option>
</select>

6、下拉选框中option选项上的value属性的作用是什么？

<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option selected="selected">广州</option><option>深圳</option>
</select>

如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。

如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容

7、其他标签

在html5之前，大多数的音频和视频是通过插件（比如flash）来播放的，html5规定了一种通过 audio和video元素来包含音频和视频的标准方法。

1、audio标签（html5）

audio标签能够播放声音文件或者音频流，例如：

<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3"></audio>

其中audio标签的属性：

src属性：用于指定要播放的音频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：音频在就绪后马上播放（自动播放）
loop="loop"：当音频完成播放后，再次开始播放（循环播放）
width、height：设置音频播放器的宽度和高度

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3">如果您可以看到此内容，说明您的浏览器不支持此标签!
</audio>

2、video标签（html5）

video标签能够播放视频流，目前支持三种视频格式：MPEG4、Ogg、WebM。

<video controls src="video/小芳_李荣浩版.mp4"  width="50%"></video>

其中video标签的属性：

src属性：用于指定要播放的视频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：视频在就绪后马上播放（自动播放）
loop="loop"：当视频完成播放后，再次开始播放（循环播放）
width、height：设置视频播放器的宽度和高度

<video> 与 </video> 之间插入的内容是供不支持 audio 元素的浏览器显示的（这里不再给出示例）

3、div、span、p标签

div、span、p元素都是非常普通、但是又很常用的标签，它们都是容器标签，可以用来包裹其他元素或文本，将样式添加在这些元素上，就可以为包含在其中的内容设置样式。

div、p：块元素，默认独占一行，可以设置宽高（其中div元素通常用于布局，而p元素通常用于定义段落）

span：行内元素，行内元素可以显示在同一行，不可以设置宽高（span用于包含文本或组合行内元素，以便于统一设置样式）

4、header、footer标签（html5）

<header>标签定义文档的页眉（介绍信息）或页面的头部分

<footer>标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

三、 CSS概述

1、什么是CSS

CSS：层叠样式表，用于修饰、渲染网页的一门技术

使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力。

2、如何在html中引入CSS

2.1.在标签上的style属性内部添加css样式
`

这是一个div…

` 这种方式是将css样式直接写在标签上的style属性内部,只对当前标签有效,无法实现代码的复用,而且容易造成页面结构的混乱,不利于后期的扩展和维护。所以不建议大量使用。

2.2.在head标签内的style标签内部添加css样式
<style type="text/css"> span{ border:2px solid green; /* 设置字体大小 */ font-size:30px; /* 设置字体粗细 */ font-weight:bolder; } </style>
这种方式是将所有的css样式在一个style标签内部统一管理,没有将css代码写在标签上,因此不会造成页面结构的混乱,而且可以实现代码的复用

2.3.通过link标签引入外部的css文件
 <link rel="stylesheet" href="demo.css"/>
这种方式是将所有的css代码写在一个css文件中统一管理,真正的实现了: 将html代码和CSS代码进行分离。可以实现代码的复用，也不会造成页面结构的混乱。
推荐使用这种方式(特别是在企业开发中)

四、CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

1、标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签

格式: 元素名/标签名{ css样式… }

/* ----- 1.标签名选择器练习 -----
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */background-color:#efbdef; font-size: 22px;font-weight: bolder;
}

2、class选择器

可以为元素添加一个通用的属性 – class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。

格式：.class值{ css样式… }

实例:

/* ----- 2.类选择器练习 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */background: #faf77b;border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */background: #5eff1e;color: #ec0e7e;
}

另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：

<span class="s1 s2" >span111</span>

表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。

如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！

内容补充：选择器优先级顺序：

（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。

（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)

3、id选择器

通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。

格式：#id值{ css样式 }

/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */font-size:24px;color: #a06649;text-indent: 20px;
}

<p id="p1">这是一个p元素!!!</p>

4、后代选择器

选中指定元素内部的指定后代元素

格式: 祖先后代{ css样式… }

/* ----- 4.后代选择器练习 -----
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */font-size:18px;color: red;background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */

<p id="p1">这是一个p元素!!!<span>这是一个span元素!!!</span>
</p>

5、属性选择器

在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素

格式：选择器[属性条件1][属性条件2]…{ css样式 }

/* ----- 5.属性选择器 -----
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */background: #FF7CCC;font-size: 22px;text-indent: 15px;
}
input[type='text'][name='email']{ /* 选中所有的input并且type值为text、并且name为email的元素 */background : yellow;
}

五、常用属性总结

1、文本属性

1、text-align：设置元素内的文本水平对齐方式，其常用取值为:

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2、text-decoration：设置文本的下划线样式，其常用取值为:

underline: 有下划线
none: 没有下划线

3、text-indent：设置文本首行缩进，单位: 像素/百分比

4、letter-spacing：设置字符间隔/间距，其常用取值为:

normal
像素值

5、text-shadow：设置字体阴影，其取值为:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

2、字体属性

font-size：设置字体大小

font-weight：设置字体粗细 normal、bold、bolder 100/200/300…/900

font-family：设置字体，比如微软雅黑、黑体、楷体等

color：设置字体颜色

3、背景属性

background-color：设置背景颜色

background-image：设置背景图片，url(‘图片的路径’);

background-repeat：设置或检索对象的背景图片是否及如何排列，常用取值：

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position：设置或检索对象的背景图片位置

background: 背景颜色背景图片背景图片是否重复背景图片的位置

4、边框（border）

border:2px solid red; – 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

border属性可以拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

5、其他属性

width：设置元素的宽度

height：设置元素的高

margin: 设置元素的外边距

margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;

6、补充: 颜色设置

颜色取值方式常见的方式有三种:

方式一：设置颜色名，例如：

red、green、blue、yellow、cyan、pink、white、black等

方式二：设置#加上六位的十六进制数值

#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等

方式三：设置rgb颜色值 ( 课间休息：14：46-15：06 )

rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan）

7、display属性

display用来设置元素的类型，常用取值：

block：块级元素的默认值默认情况下独占一行可以设置宽高
inline：行内元素的默认值默认情况下多个行内元素可以处在同一行一般不能设置宽高
inline-block：行内块元素多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

8、元素类型(了解)

div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）

p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）

div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。

span：行内元素，默认可以和其他元素显示在同一行。

(1)块级元素（block）

默认情况下，块级元素独占一行

可以设置宽和高，如果设置了就是设置的宽和高

如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)

比如: div/p/h1~h6/form/table 等元素都是块级元素

(2)行内元素（inline）

默认情况下，多个行内元素可以处在同一行

不能设置宽和高

比如: span/input/img/i/b 等元素都是行内元素

(3)行内块元素（inline-block）

既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)

9、扩展

1.CSS选择器分类

全局选择器（通配符*）
标签选择器（body，div，p，ul，li）
类选择器（.）
ID选择器（#）
组合选择器（.head .head_loge，两选择器之间用空格隔开）
后代选择器（#head .nav li ul，从父级到子孙集的选择器）
子选择器（div>p）
群组选择器（div，span，img{color：red；}，即将具有相同样式的标签分组显示）
继承选择器（div p，两选择器用空格键分开）
伪类选择器（链接样式a元素的伪类：:link(未被访问)，:visited(已访问)，:active(被选择)，:hover(当鼠标悬停在链接上)）
字符串匹配的属性选择符（^(开始)，$(中间)，*(结尾)）
css相邻兄弟选择器（如h1+p）

2.CSS选择器优先级

不同级别：！important（在样式属性后不加“;”，在!important后加分号）>行内样式>ID选择器>Class选择器>标签>通配符

相同级别：

（1）同一级别中后写的会覆盖先写的样式
（2）选择器约分