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/thtd/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,imgCSS总结:
一、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，normalfont-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) 四、网页综合实战：京淘登录页面
具体见代码！