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"]{}
发表回复