HTML 总结:
一、HTML 概述
0、HTML+CSS
HTML：超文本标记语言，其实就是用来开发网页的一门语言
CSS：层叠样式表，能够用于渲染网页、丑化网页
做网页 建房子
HTML 标签搭建网页的构造 砖块：搭建房子的构造
CSS 款式：对网页进行丑化 石灰、油漆：对房子进行丑化
1、HTML 介绍(理解)
HTML：超文本标记语言
超文本：超过文本、超级文本
不仅能够蕴含文本，还能够蕴含例如图片、音频、视频等各种格局
标记：标签、元素，指的是用尖括号括起来的一组内容，例如：<div>,<img>,<h1>,<table>
<div></div>
其实就是用于开发网页的一门语言
对于 HTML:
1)HTML 开发的网页文档, 通常是以 .htm、.html 为后缀
2)HTML 开发的网页文档, 能够通过浏览器关上并显示(浏览器就是一个 HTML 解析器)
3)HTML 实质就是一个文档(html/txt/word/ppt 等)
2、HTML 构造
HBuilderX 快捷键:
ctrl+ 鼠标滚轮, 能够放大或放大字体
ctrl+insert, 能够将鼠标所在的行，或者将鼠标选中的行疾速赋值到下方
ctrl+/ 或 ctrl+shift+/, 能够疾速生成正文符号
<!DOCTYPE html>: 用于申明以后文档是一个 html 格局的网页, 并且版本是 html5.0 版本。<html>: 根标签, 所有的 html 内容都应该放在根标签外部
<head>: 头局部, 用于寄存网页的根本属性信息(例如: 网页题目, 网页的编码, 引入的 css 文件, 或 JS 文件)
<body>: 体局部, 用于寄存网页的可视化内容
<title> 我的第一个网页 </title>: 指定网页标签的题目
<h1>~<h6>: 指定网页内容的题目, 例如文章 / 新闻等题目
<meta charset="utf-8">: 告诉浏览器以后网页应用的编码, 如果不指定这一行, 网页文件保留应用 utf-8, 浏览器在关上这个网页时, 如果不应用 utf-8, 就可能会呈现乱码问题。3、HTML 语法
1）标签、标记、元素：就是用尖括号 (<>) 括起来的一组内容, 例如:
<head>,<body>,<h1>,<img>,<a> 等
2）标签分为开始标签 (<head>) 和完结标签(</head>), 通常开始和完结标签之间还能够寄存其余内容。<head>
<title> 题目 </title>
</head>
3）自闭标签: 有些标签外部不须要写内容, 通常能够写成自闭标签
<img/>,<input/>,<br/>,<hr/> 等
<img/> == <img></img>
4）属性: 属性必须申明在标签上, 属性能够有多个, 多个属性之间用空格隔开
属性包含属性名和属性值, 属性名和属性值两头用等号连贯
属性的值用双引号或者单引号引起来。<img src="xx" id="xx" name="xx"/>
<img src='xx' id='xx' name='xx'/>
5）正文格局: <!-- 正文内容 -->
正文作用:a)为代码增加解释阐明
b)将一些临时不须要执行的代码正文
c)html 正文中的内容浏览器不会解析, 更不会显示
6）如何在网页中输出空格和换行
因为浏览器会将多个间断的空白字符 (空格、换行、制表符) 解析成一个空格来显示，因而如果要想做空格或者换行须要用其余符号代替。a)能够应用 实现空格
b)能够应用 <br/> 标签实现换行
二、HTML 标签
1、图像标签
img 标签能够在网页中插入一幅图像, 例如：<img src="img/meinv01.jpg" width="40%"/>
其中,src 属性: 用于指向图片的门路(相对路径, 网络门路)
width 属性: 指定图片的宽度
height 属性: 指定图片的高度
对于门路问题:
1)不倡议写带盘符的绝对路径, 因为未来换一个公布环境, 这个门路很可能是错的, 所以不倡议
<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg" width="40%"/>
2)倡议写相对路径
./: 示意以后文件所在的地位, 能够省略不写
../: 示意以后文件所在目录的上一级目录
<img src="./img/meinv01.jpg" width="40%"/>
示意在以后文件 (html) 所在的目录找 img 目录, 在 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 属性所指向的服务器
6、注册表单案例
表单项的细节问题:
1)表单项上的 name 属性有什么作用?
<input type="text" name="user"/>
<input type="password" name="psw"/>
要提交数据的表单项 (例如: 用户名 / 明码 / 性别 / 喜好 / 昵称 / 邮箱 / 验证码等) 都必须得有 name 属性, 如果没有 name 属性, 在表单提交时, 该项会被疏忽(即无奈提交数据)
2)为什么单选框能够多选?
所有单选框的 name 属性值必须雷同, 值雷同则阐明是一个组, 一个组中的单选框只能选一个(即单选)
<input type="radio" name="gender"/> 男
<input type="radio" name="gender"/> 女
3)为什么单选框或复选框提交时的值为 on?
因为单选框或复选框不像文本输入框, 输出在框中的内容就会作为 value 提交
单选框或复选框不能输出, 所以只能通过 value 属性来指定提交时的值
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
<input type="checkbox"
name="like" value="basketball"/> 篮球
4)如何设置单选框或复选框默认选中某一项?
<input type="radio" checked name="gender" value="male"/> 男
<input type="checkbox" checked
name="like" value="football"/> 足球
在单选框或复选上能够增加 checked 属性来设置某一项默认被选中
5)如何设置下拉选框中的某一项默认被选中?
下拉选框默认选中第一项, 如何要设置第一项以外的其它选项默认被选中
能够在 option 标签上增加一个 selected 属性。<select name="city">
<option> 北京 </option>
<option> 上海 </option>
<option selected> 广州 </option>
<option> 深圳 </option>
</select>
6)option 标签上的 value 属性的作用是什么?
例如: 如果 "上海" 选项被选中, 而 "上海" 的 option 下面没有 value, 则会提交 city= 上海;
如果在 "上海" 选项上有 value 属性, 在 "上海" 被选中被提交时, 就会提交 value 属性的值。<select name="city">
<option> 北京 </option>
<option value="shanghai"> 上海 </option>
<option selected> 广州 </option>
<option> 深圳 </option>
</select>
7、音频、视频标签
7.1. 音频标签
audio 能够在网页中插入音频流
<audio controls src="audio/ 沙漠骆驼_展展与罗罗.mp3">
如果您看到这段内容, 则阐明您的浏览器不反对此标签
</audio>
src 属性: 指定所要插入的音频的 url 地址
controls 属性: 为用户增加播放、暂停、音量控制等插件
autoplay 属性: 在音频加载实现后, 立刻播放(自动播放)
width、height: 设置元素的宽度和高度
7.2. 视频标签
video 能够在网页中插入视频流
<video autoplay controls src="video/ 小拳拳.mp4">
如果您看到这段内容, 则阐明您的浏览器不反对此标签
</video>
src 属性: 指定所要插入的视频的 url 地址
controls 属性: 为用户增加播放、暂停、音量控制等插件
autoplay 属性: 在视频加载实现后, 立刻播放(自动播放)
width、height: 设置元素的宽度和高度
7.3.div/span/ p 标签
div/span/ p 标签是十分一般的然而又很罕用的标签
这三个元素都是容器标签, 能够用来包裹其余的标签或者文本
在标签上设置款式, 就能够作用在其中的内容上。<div style="color:red;font-size:30px">
<span> 文本文本文本 </span>
<input />
<p> 这是一个 p 元素 </p>
</div>
div、p：是块元素，默认独占一行, 都能够设置宽高
同是块元素的还有: h1~h6,form,table,div,p 等
span：是行内元素，多个行内元素能够显示在同一行，不能设置宽高
同是行内元素的还有: span,b,i,u,input,img
CSS 总结:
一、CSS 概述
1、什么是 CSS
CSS：层叠样式表，是用于丑化、渲染网页的一门语言
和传统的 html 标签属性设置款式相比，应用 CSS 设置款式能够实现：将展现数据的 html 代码和设置款式的 CSS 代码进行拆散，能够加强网页的展现能力。2、如何在 html 中引入 CSS
2.1. 在标签上的 style 属性外部增加 css 款式
<div style="border:2px solid #FF0000;font-size:26px;background:pink;">
这是一个 div...
</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 文件
<!-- 引入内部的 demo.css 文件 -->
<link rel="stylesheet" href="demo.css"/>
这种形式是将所有的 css 代码写在一个 css 文件中对立治理, 真正的实现了: 将 html 代码和 CSS 代码进行拆散。能够实现代码的复用，也不会造成页面构造的凌乱。举荐应用这种形式(特地是在企业开发中)
二、CSS 罕用选择器
所谓的选择器, 就是能够帮咱们在 html 中选中元素进行润饰的一门技术1、元素名 / 标签名选择器
通过元素的名字或者标签的名字选中指定名称的所有标签
格局: 元素名 / 标签名{css 款式..}
span{} -- 选中所有的 span 元素
div{} -- 选中所有的 div 元素
2、class 类选择器
能够在标签上增加一个通用的属性 --class, 为元素设置所属的分组,class 值雷同的则为一组, 通过 class 值能够选中这一组的元素。格局: .class 值{css 款式..}
.s1{} -- 选中所有 class 值为 s1 的元素
另外，一个元素能够同时设置多个 class 值，例如：<span class="s1 s2">span111</span>
示意以后这个 span 元素同时属于 s1 分组和 s2 分组，如果 s1 和 s2 给这个 span 设置背景（但值不同），写在前面的会笼罩后面的（针对同一类选择器）。如果是不同类的选择器，例如：应用元素名、类选择器、id 选择器选中同一个元素，设置雷同的属性，但值不同，优先级程序是：id 选择器(100)> 类选择器(10)> 元素名选择器(1)
如果一个选择器中蕴含多个选择器类别, 能够通过权重值相加, 权重值大的优先级高
如果权重值雷同, 书写在前面的会笼罩后面的!
3、id 选择器
在标签上能够增加一个通用的属性 --id,id 是编号, 要求在整个网页中是举世无双的。通过 id 值，能够惟一的选中一个元素。格局：#id 值{css 款式..}
4、后辈选择器
在父选择器选中的元素外部, 选中指定的后辈元素
格局: 父选择器 后辈选择器{css 款式...}
div span{} -- 选中所有 div 外部的 span 元素
#d1 p{} -- 选中 id 值为 d1 元素外部的 p 元素
5、属性选择器
能够通过元素的属性或属性值匹配元素
格局: 选择器[属性条件][属性条件]..{css 款式}
input[type="password"]{} -- 选中所有的明码输入框
input[type="checkbox"]{} -- 选中所有的复选框
div[id]{} -- 选中所有具备 id 属性的 div 元素
三、CSS 罕用属性总结
1、文本、字体相干属性
text-align：设置文本程度排列形式
left（居左, 默认）、center（居中）、right（居右）text-indent：设置文本首行缩进，百分比或像素值
text-shadow：设置字体暗影
letter-spacing：设置字符距离 / 间距
font-siz：设置字体大小
font-weight：设置字体粗细，100~900，bold，bolder，normal
font-family：设置字体，"微软雅黑","宋体","楷体" 等
color：设置字体色彩
2、背景相干属性
background 是一个综合属性, 能够同时设置背景色彩 / 背景图片 / 背景图片是否反复 / 背景图片的地位等
background-color: 设置背景色彩
background-image: 设置背景图片
background-repeat: 设置背景图片是否以及如何反复排列
backgronnd-position: 设置背景图片的地位
backgournd-size: 设置背景图片的大小3、边框属性
border: 2px solid red; -- 同时设置边框的宽度、款式、色彩
border-width: 2px;
border-style: solid;
border-color: red;
border-radius: 设置圆角边框
4、其余属性
width: 设置元素的宽度
height: 设置元素的高度
--------------------------------
margin: 设置元素的外边距
margin-top: 设置元素的上外边距
margin-left: 设置元素的左外边距
margin-right: 设置元素的右外边距
margin-bottom: 设置元素的下外边距
margin: 10px 20px 30px 40px; /* 上 右 下 左 */
margin: 10px 20px 30px; /* 上 左右 下 */
margin: 10px 20px; /* 高低 左右 */
margin: 10px; /* 上下左右 */
--------------------------------
5、补充内容：色彩取值形式
形式一: 应用色彩的名称(英文单词)
red green blue black yellow pink
形式二: #六位十六进制数(AABBCC==ABC)
#FF0000 #00FF00 #0000FF #000000 #FFFF00 #FFFFFF
#F00 #0F0 #00F #000 #FF0 #FFF
形式三: rgb(255,255,255)
rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)
四、网页综合实战：京淘登录页面
具体见代码！