共计 6046 个字符，预计需要花费 16 分钟才能阅读完成。
HTML 概述
1、什么是 HTML
HTML（超文本标记语言）超文本：超级文本（文本、图片、视频、音频等）标记(标签 / 元素 / 节点)：就是由尖括号括起来的一组内容
<html> <div> <img> 等
就是用于开发网页的最根底的语言
对于 HTML 须要留神的是:
1) 通过 HTML 开发的网页文件通常是以 .htm 或 .html 为后缀
2) 通过 HTML 开发的网页文件由浏览器负责解析并显示
3) HTML 实质就是一个文档(txt,word,html,ppt)
2、HTML 构造
<!DOCTYPE html> -- 文档申明, 用于申明以后文档是一个 html 格局的网页, 并且版本就是 5.0
<html> -- 根标签, 用于包裹所有的网页内容(不包含文档申明)
<head> -- 头局部, 用于寄存网页的根本属性信息(编码, 题目, 引入的 css/js 文件等)
<meta charset="utf-8" /> -- 指定网页的编码, 浏览器会依据这个编码解析这个网页
<title> -- 指定网页的题目
<body> -- 体局部, 用于包裹所有的可视化内容
<!-- ctrl+shift+/: 正文快捷键 -->
3、HTML 语法
3.1.html 标签
标记(标签 / 元素 / 节点)：就是由尖括号括起来的一组内容
<html> <div> <img> 等
标签由开始标签 (<head>) 和完结标签 (</head>) 组成, 开始和完结标签之间能够蕴含其余的内容。有些标签两头没有内容要包裹，能够写成自闭标签，例如：<br/> <hr/> <input/> <img/> <meta/> 等
3.2.html 属性
<input type="text" id="username" class="xxx"/>
1) 属性必须要申明在标签上, 不能独立存在
2) 属性能够申明多个, 多个属性之间能够用空格隔开
3) 属性的值能够应用双引号或者单引号引起来.
<input type="text" id="username"/>
<input type='text' id='username'/>
3.3. 正文
html/xml 正文: <!-- ctrl+shift+/: 正文快捷键 -->
<!-- 正文内容 -->
html 正文中包裹的内容, 浏览器不会解析, 更不会显示!
java 正文: (1)为代码增加解释阐明 (2)将一些临时不须要执行的代码正文
3.4. 空格和换行
在 html 中, 多个间断的空白字符 (空格 / 换行 / 制表符) 会被解析成一个空格来显示
如果要实现多个空格, 能够应用 或  
如果要做换行, 能够应用 <br/> 标签;
四、HTML 标签
1、图像标签
<img src="img/meinv01.jpg" width="40%"/>
<img src="./img/meinv02.jpg" width="40%"/>
通过 img 标签能够在网页中插入一幅图像
其中 src 用于指定图片的门路, 图片能够在本地, 也能够在网络中
width 用于指定图片的宽度
height 用于指定图片的高度
./: 示意当前目录, 也就是以后文件的所在目录
../: 示意上一级目录, 也就是当前目录的上一级目录
另外, 不要写带盘符的绝对路径, 因为换一个公布环境, 图片很可能加载不进去
(<img src="file:///C:/Users/pc/Documents/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg"/>)
2、超链接标签
a 标签能够在网页中创立一个超链接
超链接: 点击超链接后能够跳转到另外一个地址(网页 / 图片 / 下载地址)
<a href="http://www.baidu.com" target="_blank"> 百度一下 </a>
<a href="http://www.tmooc.cn">
<img src="img/tmooc.jpg"/>
</a>
其中 href 用于指定点击超链接后, 将会跳转到哪里
target 用于指定以何种形式关上超链接
_self: 指在以后窗口关上超链接
_blank: 在新窗口中关上超链接
3、表格标签
表格标签不是一个标签, 而是一组标签
table: 定义一个表格
tr(table row): 定义表格中的行
td(table data cell): 定义表格中的单元格
th(table head cell): 定义表头中的单元格(外面的文本默认会加粗和居中)
案例: 写一个网页, 在网页中实现一个 3*3 的表格
h1~h6: 6 个题目标签, 从 h1~h6 字号顺次变小
-------------------------------------
border:2px solid red; /* 设置边框的宽度、款式、色彩 */
border-collapse: collapse; /* 设置表格边框合并(重叠) */
padding:5px; /* 设置边框和内容之间的间距 */
text-align:center; /* 设置元素内容居中 */
font-weight:bolder; /* 设置字体加粗 */
width:70%; /* 设置元素的宽度 */
background:pink; /* 设置背景色彩 */
margin-left: auto; /* 设置元素的左外边距 */
margin-right: auto; /* 设置元素的右外边距 */
4、表单标签
<form action=""></form>
action 指定表单的提交地址
form 标签的作用是向服务器提交数据, 除了 form 之外, 超链接也能够向服务器提交数据
例如: http://www.baidu.com?user=zhangsan&psw=123
<a href="http://www.baidu.com?user=zhangsan&psw=123"> 百度 </a>
不论是通过 form 表单还是通过超链接, 只有是发送给服务器的数据, 咱们都称之为是申请参数(包含参数名和参数值, 参数名 = 参数值)
5、表单项标签
5.1.input
1)文本输入框(用户名, 邮箱, 手机, 验证码等)
<input type="text" name=""value=""/>
2)明码输入框(明码, 确认明码)
<input type="password" name=""/>
3)单选框(性别, 部门, 单项抉择)
<input type="radio" name=""/>
4)复选框 / 多选框(喜好, 岗位)
<input type="checkbox" name="">
5)按钮 / 提交按钮
<input type="submit" value="设置按钮上显示的文本"/>
提交按钮作用: 用于提交表单中的数据到 action 指定的地址(服务器地址)
一般按钮: 没有性能, 但能够通过 JS 增加性能
<input type="button" value="设置按钮上显示的文本"/>
<button value=""/>
5.2.select/option
select: 用于定义一个下拉选框
option: 用于定义下拉选框中的选项
5.3.textarea: 定义一个多行的文本输出区域
<textarea cols=""rows=""></textarea>
cols: 设置列数(宽度)
rows: 设置行数(高度)
placeholder: 设置框中的提示信息
6、注册表单页面
代码略
7、注册表单中的问题:
7.1.name 属性的作用
在表单 (form) 中的所有表单项, 只有这个表单项未来须要提交数据给服务器, 每一个表单项都须要指定 name 属性. 如果不指定, 在提交时, 该项就会被疏忽(数据也就不会提交)!!
<input type="text" name="user"/>
7.2. 单选框变成多选的问题
如果多个单选框的 name 属性的值不雷同, 这个多个单选框就能够实现多选.
<input type="radio" name="gender"/> 男
<input type="radio" name="gender"/> 女
如果多个单选框的 name 属性值雷同, 这个多个单选框就是一个组, 一个组中的单选框就只能选一个(所以单选框的 name 属性值得雷同)
7.3. 单选框和复选框提交的值为 on 的问题
单选框和复选框, 如果不指定 value, 在抉择某一项之后, 提交的值都为 on
能够通过 value 属性指定每一个单选框在被选中后所提交的值, 例如:
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
7.4. 如何设置某一个单选框或复选框默认被选中
如果心愿某一个单选框或复选框在页面关上后默认就被选中, 能够在这个单选框或复选框上增加一个 checked 属性 (不必指定值) 即可!
<input type="radio" checked name="gender" value="male"/> 男
<input type="checkbox" checked name="like" value="football"/> 足球
7.5. 如何设置某一个 option 选项默认被选中
select 下拉选中的选项默认是选中第一项
能够通过在 option 标签上增加一个 selected 属性, 将以后 option 设置为默认选中
7.6.option 标签上的 value 属性的值有什么作用?
<option value="beijing"> 北京 </option>
<option value="shanghai"> 上海 </option>
<option selected> 广州 </option>
<option> 深圳 </option>
如果 option 上没有指定 value 属性, 在该 option 被选中后, 会将 option 中的文本提交到服务器
如果 option 上指定了 value 属性, 在该 option 被选中后, 会讲 value 值提交到服务器!
因而, 当咱们 option 上显示的文本和提交的值不雷同时, 须要增加 value 属性!
五、CSS 概述
1、什么是 cSS
CSS: 层叠样式表, 是用于渲染、丑化网页的一门语言
通过 CSS 丑化网页，能够将设置款式的 CSS 代码和展现数据的 HTML 代码进行拆散，能够加强网页的展现能力。2、如何引入 CSS
2.0.div、span、p 元素
div、span、p 标签就是三个容器标签，自身不具备非凡的成果
通常用于包裹其它的内容（其它标签或文本）<div style="color:red;font-size:30px;">Hello CGB2008!</div>
-----------------------------------------------------
div/ p 标签: 是块级元素, 默认独占一行
例如:h1~h6,table,form,div,p,hr 等
块级元素能够设置宽高
span 标签: 是行内元素, 多个元素能够处在同一行(除非放不下)
例如:span,img,input,b,i 等
行内元素不能够设置宽高(img/input 都能够设置宽高, 是行内块元素)
-----------------------------------------------------2.1. 引入 CSS 形式一
在标签上增加一个 style 属性, 在 style 属性外部, 能够设置 css 款式, 例如:
<div style="border:2px solid red;font-size:26px;background:pink;">
这是一个 div...
</div>
当 css 代码特地多时, 容易造成页面构造的凌乱, 而且代码无奈复用，不利于前期的扩大和保护。这种形式不举荐应用!
2.2. 引入 CSS 形式二
在 head 标签外部增加一个 style 标签, 在 style 标签外部能够增加 CSS 款式.
这种形式没有把 css 款式代码间接写在标签上, 而是写在一个 style 标签外部对立治理, 不会造成页面代码的凌乱. 而且这种形式实现了代码的复用!
不举荐大量应用!
<head>
<style>
/* ****** CSS 款式 ****** */
span{ /* 选中所有的 span 元素 */
border: 2px solid green;
font-size: 30px;
font-weight: bolder;
}
<style>
</head>
2.2. 引入 CSS 形式三
将所有的 CSS 代码写在一个 xxx.css 文件中, 在须要应用这些款式的 html 中, 引入这个 css 文件即可!
<link rel="stylesheet" href="demo.css"/>
这种形式是将所有的 css 代码放在一个 css 文件中对立进行治理, 没有造成页面构造的凌乱, 也实现了代码的复用.
真正的实现了将 css 代码和 html 代码进行拆散!
六、CSS 选择器
选择器：是帮咱们在 HTML 中选中元素进行润饰的一门技术1、元素名选择器：
依据元素的名称选中指定名称的所有元素, 例如:
span{} -- 选中所有的 span 元素
div{} -- 选中的所有的 div 元素
格局: 元素名{css 属性...}
2、class 选择器：
通过元素上通用的属性 class, 能够为元素设置所属的分组
class 值雷同的则为一组, 例如:
<span class="s1">span111</span>
<span class="s1">span222</span>
<span class="s1">span333</span>
<div class="s1">div444</div>
能够通过 class 值选中这一组的元素, 例如:
.s1{} -- 选中所有 class 值为 s1 的元素
span.s1{} -- 选中所有 class 值为 s1 的 span 元素
div.s1{} -- 选中所有 class 值为 s1 的 div 元素
另外, 一个标签的 class 属性能够设置多个 class 值, 示意这个元素同时属于多个分组。多个分组的款式会同时作用在这个元素上。<span class="s1 s2">span111</span>
如果 s1 给 span 设置背景为 red, s2 给 span 设置背景为 blue, span 最终的背景色彩是什么?
如果是同一类选择器，浏览器会依据先后顺序，依照选择器所写的地位，下面的会被上面的笼罩。如果不是同一类选择器，优先级程序是：id 选择器(100)>class 选择器(10)> 元素名选择器(1)
3、ID 选择器：
通过元素上通用的属性 id, 能够给元素设置一个举世无双的编号
通过 id 值能够惟一的定位到这个元素, 例如:
#div1{} -- 选中 id 值为 div1 的元素
格局: #id 值{css 属性...}
4、后辈选择器：
在一个元素外部的所有元素都称之为这个元素的后辈元素
能够在选中的某些元素中, 抉择指定的后辈元素, 例如:
div span{} -- 抉择所有 div 外部的 span 元素
p img{} -- 抉择所有 p 元素外部的 img 元素
格局: 先人选择器 后辈选择器{css 属性...}
5、属性选择器：
通过元素的属性条件能够匹配元素
格局: 选择器[属性条件 1][属性条件 2]..{css 属性...}
例如:
抉择所有的复选框: input[type="checkbox"]{...}
抉择所有的单选框: input[type="radio"]{}
正文完
