HTML
Posted PearSakura
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML相关的知识，希望对你有一定的参考价值。
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" />
<img src="./img/meinv02.jpg" />
通过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"]{}
以上是关于HTML的主要内容，如果未能解决你的问题，请参考以下文章