HTML,CSS,JS,JQuery学习笔记

一.HTML概述

1.1 HTML是什么?

HTML(Hyper Text Markup Language): 超文本标记语言

    超文本:超级文本(文本、图片、视频、音频等)
    标记(标签/元素/节点):就是由尖括号括起来的一组内容
         
等 就是用于开发网页的最基础的语言

关于HTML需要注意的是:

    1) 通过HTML开发的网页文件通常是以 .htm 或 .html为后缀
    2) 通过HTML开发的网页文件由浏览器负责解析并显示
    3) HTML本质就是一个文档(txt,word,html,ppt)

1.2 HTML的结构

1.2.1.例:



    
        
        网页
    
    
   

1.2.2.HTML结构详解

(1) 文档声明, 用来声明HTML文档所遵循的HTML规范和版本 上面是html5.0的声明, 也是目前最常用的版本 

(2) 根标签, 用于包裹所有的网页内容(除了文档声明)

 (2) 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.

 (3) 体部分, 用来存放可视化的网页内容. 即真正的网页数据

 (4) 声明网页的标题 

(5) 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

1.3 HTML语法(了解)

1.3.1、html标签
标签:也叫做标记、元素等,标签分为开始标签,例如:

和结束标签,例如:

开始标签和结束标签之间还可以包含其他内容。


    声明网页的标题
    

有些标签开始标签和结束标签之间没有内容要包裹,通常可以写成自闭标签,例如:



1.3.2、html属性
在标签上可以声明属性(属性不能独立存在,必须声明在标签上)

这是一个div元素

标签上可以声明多个属性,多个属性之间用空格分隔

标签上的属性的值可以使用单引号或者双引号引起来


1.3.3、html注释
格式:

注释的作用:
(1)为代码添加解释说明

(2)将一些暂时不需要执行的代码注释

浏览器对于html注释中的内容不会解析,也不会显示!
1.3.4、html空格和换行
在浏览器中,多个连续的空白字符(空格、制表符tab、换行)会被浏览器显示为一个空格。那么:

如何在网页中做一个换行:可以使用
标签做换行

如何在网页中做一个空格:可以使用 做空格

补充: HTML中是不区分大小写的!

HTML中对语法要求非常不严格!(比如大小写混用,或者标签只有开始没有结束,或者标签的不合理嵌套),但是我们在书写HTML时要按照规范来写。

2.HTML标签

2.1.图像标签:

代替图片显示的文本

注意:  不推荐写带盘符的绝对路径,因为将来项目发布,位置会改变,到时还要修改图片的路径

./  表示当前目录(当前文件所在的目录)(可省略)

../  表示当前目录的上一级目录里(也就是当前目录的父目录)

../../  表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目 录)

2.2.超链接标签:

超链接就是a标签,通过a标签可以在网页中创建指向另外一个文档的超链接 点击超链接可以跳转到另外一个网页(图片/下载路径等)

这里可以包裹文本或图片

其中 href 属性用于指定点击超链接后将要跳转到的URL地址

target属性用于指定以何种方式打开超链接

_self:默认值, 表示在当前窗口中打开超链接

_blank:表示在新的窗口中打开超链接

2.3.表格标签:

table:定义一个表格

tr(table(表格) row(行)): 定义表格中的行

td(table data cell): 定义表格中的单元格

th(table header cell): 用于定义表头中的单元格,其中的文本默认加粗并居中

2.4.表单标签

表单的作用:
用于向服务器提交数据, 此外在超链接或者url地址的后面拼接参数也可以向服务器提交数据!

向服务器提交数据的两种方式:

(1)通过表单向服务器提交数据

action属性:指定表单的提交地址 method(方法)属性:指定提交方法,常用的提交方式为GET和POST,若不指定提交方式,默认为GET方式.

(2)通过超链接向服务器提交数据

http://www.baidu.com?username=张三&pwd=123&like=篮球

百度一下,你就不知道!

在地址栏URL地址的后面通过问号(?)可以拼接参数,参数可以有多个,多个参数之间用&分隔,参数还分为参数名(例如:username/pwd/like)以及参数值(例如:张三/123/篮球),在回车后访问百度服务器的同时,就可以将问号后面拼接的参数一并带给百度服务器。

2.5.表单项标签

1、input元素:
(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)

(2)密码输入框(比如:密码/确认密码等)

input type="password" name="pwd"/>

(3)单选框(比如:性别/部门等)

(4)复选框/多选框(比如:爱好/岗位等)

(5)普通按钮(比如:换一张图片)


普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为~~~~

(6)提交按钮(比如:提交/注册/登录)


提交按钮用于提交表单中的数据到服务器中!

2、select、option标签:

select用于定义一个下拉选框

option用于定义下拉选框上的选项

selected设置当前option选项默认被选中

3、textarea多行文本输入区域:

cols属性: 用于设置文本输入框的列数(宽度)

rows属性: 用于设置文本输入框的行数(高度)

placeholder属性: 设置输入框中的提示消息!

3.表单细节问题

3.1、提交表单时,表单中的数据为什么没有被提交?
对于表单中的表单项标签,只要是需要向服务器提交数据,该表单项上必须添加name属性;如果表单项标签上没有name属性,在表单提交时,该项将会被忽略。例如:


3.2、如何让多个单选框只能有一个被选中?
要求多个单选框必须具有相同的name属性值,如果多个单选框name属性值相同,则说明是一个组的内容,一个组中的单选框只能选择其中的一个!

性别:

    

3.3、为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择,不同于用户名、密码输入框,可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on),例如:

3.4、如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性,就可以让当前单选框或复选框默认被选中。例如:


篮球
足球
排球

3.5、如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性,可以让当前option选项默认被选中,例:

3.6、下拉选框中option选项上的value属性的作用是什么?
如果某一个选项被选中,并且该选项上添加了value属性,在提交表单时,将会提交value属性的值。

如果某一个选项被选中,该选项上没有添加value属性,在提交表单时,将会提交标签中的内容

3.7、音频,视频标签
音频标签:

audio{
    border-radius: 20px;  设置圆角边框
}
audio:focus{ /* 获取焦点audio元素 _/
/_ 设置元素的外围(包在边框外的线) */ 
outline: none; 
}



autoplay="autoplay"    页面加载完毕后自动播放
controls属性:为用户添加播放,暂停,音量控制等插件

视频标签:

audio{
    border-radius: 20px;  设置圆角边框
}
video:focus{  /* 获取焦点audio元素 _/
/_ 设置元素的外围(包在边框外的线) */ 
    outline: none;
}



autoplay="autoplay"    页面加载完毕后自动播放
controls属性:为用户添加播放,暂停,音量控制等插件

4.元素类型

div/span/p 都是一个容器标签,用于包裹其他内容(这些元素本身不具备太多的样式!)

p: 块级元素,默认独占一行,用于包裹一段文本(写文章时用于p标签包裹每一段内容)

div: 块级元素,默认独占一行,用于包裹其他内容,将样式设置在div上,就可以作用在div的内容上。

span:行内元素,默认可以和其他元素显示在同一行。 同是行内元素的还有:b,i,u,input,img(这两个可以设置宽高)

(1)块级元素(block)
默认情况下,块级元素独占一行

可以设置宽和高,如果设置了就是设置的宽和高

如果不设置宽和高,其中宽是默认填满父元素,而高是由内容决定(由内容支撑)

比如: div/p/h1~h6/form/table/div/p 等元素都是块级元素

(2)行内元素(inline)
默认情况下,多个行内元素可以处在同一行

不能设置宽和高

比如: span/input/img/i/b 等元素都是行内元素

(3)行内块元素(inline-block)

既具备行内元素的特征(可以同行显示),还具备块级元素的特征(可以设置宽和高)

二.CSS

1.css概述?

CSS:层叠样式表,是用于美化,渲染网页的一门语言和传统的html标签属性设置样式相比,使用CSS设置样式可以实线:将展示数据的html代码和设置样式的CSS代码进行分离,可以增强网页的展示能力.

2.CSS的三大特性

2.1.层叠性

是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉.

一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准.
1.样式冲突,遵循的原则是就近原则.那个样式离结构近,就执行那个样式.
2.样式不冲突,不会层叠

2.2.继承性

所谓的继承性是指书写CSS样式表时,子标签会集成父标签的某些样式.

注意:恰当的使用继承可以简化代码,降低CSS样式的复杂性.子元素可以继承父元素的样式(text- , font- , line- 这些元素开头的都可以继承,以及color属性)

2.3.优先级关系

定义CSS样式时,经常出现两个或更多规则应用在同意元素上,这时就会出现优先级的问题.

优先级: !important>内联样式(1000)> id选择器(100)>class选择器(10)>元素名选择器(1)>通用选择器>继承(0)>默认 如果一个选择器中包含多个选择器类别,可以通过权重值相加,权重值大的优先级高如果权重值相同,书写在后面的会覆盖前面的.

权重形同时,CSS遵循就近原则.也就是说靠近元素的样式具有最大的优先级,或者说排在最后面的样式优先级最大.

3.引入CSS

3.1.引入CSS方式一

在标签上添加一个style属性,在style属性内部,可以设置css样式,例如:

这是一个div...

当css代码特别多时,容易造成页面结构的混乱,而且代码无法复用,不利于后期的扩展和维护。这种方式不推荐使用!

3.2.引入CSS方式二

在head标签内部添加一个style标签,在style标签内部可以添加CSS样式.