web知识清单

声名随笔中的实例链接到另一个博客是我本人的另一个博客号

模块一：HTML

1.html是什么：

　　hyperText markup language超文本标记语言

超文本：比文本更丰富的内容

所有的浏览器都认识html的语法

2.html的结构

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

        <title>第一个网页</title>

    </head>

    <body>中国</body>

</html>

对html的结构解释：

　　html文档以html后缀或者htm后缀

　　<!DOCTYPE HTML>：html5的文档声明
　　<html>：根标签
　　<head>：存放属性或者标题等信息
　　<body>：可以在网页显示的内容
　　<meta/>：通知浏览器用哪种语言进行解析
　　<title>: 网页的标题

3.html的语法

　　HTML是一门标记语言, 标记也叫做元素/标签, 标签分为开始标签和结束标签, 如果标签内没有内容要修饰, 可以合并一个自闭标签.

　　如: <meta/> <br/> <hr/> <input/> <img/>等等

注释:

如何在网页中做一个空格或者做一个换行?

由于在网页中多个连续的空白字符会被当成一个空格来显示, 所以

如果要做一个空格, 可以用转义字符  来代替;

如果要做一个换行, 可以用<br/>标签来代替;

HTML 和 XML的区别:

xml对语法的要求非常严格, 如区分大小写, 标签不能交叉嵌套,标签一定要关闭等

　　HTML对语法的要求非常不严格. 如: 标签名可以大小写混用, 标签即使没有结束或者交叉嵌套, 可能也会被浏览器正常解析

　　(最好按照规范来书写!!)

　　xml中允许用户自己定义标签

　　HTML中的标签都是预定义好的, 不允许用户自己定义

4.html标签

4.1快标签

　　1. h1-h6;

<h1 align="left">我是标题标签</h1>

<h2 align="center">我是标题标签</h2>

<h3 align="right">我是标题标签</h3>

　　2. hr;
　　3. p;
　　4. ul-li;
　　5. ol-li;
　　6. dl-dt-dd 用于展示携带标题的内容
　　7. div

　　实例视频

4.2:行标签

　　1. span
　　2. img 呈现图片内容
　　3. alt 路径不存在时用于提示用户说明文字
　　4. src 图片路径
　　5. width 当前标签展现的宽度
　　6. height
　　7. title 停在图片上提示文字

　　实例链接

4.3：超链接 <a></a>

　　a 点击每个内容跳到指定页面
　　href 链接地址
　　target 呈现方式 _self(在当前页面打开) _blank(默认在新窗口打开) _top(回到顶部)　

　　如果想要到当前页面的固定位置，可以在此位置添加<a name="abc"></a>标签

　　实例链接

4.4：表格标签<table>

　　table:定义一个表格；

　　　tr　 :定义一行

　　　td :定义一个单元格

　　 th :定义一个表头单元格

table的属性：

　　align="center" :表格的位置

　　bgcolor="pink" 背景颜色

　　background="地址" 背景图片

　　border="1px" 边框粗细

　　cellspacing="0" 单元格之间的距离

　　cellpadding="10px" 单元格和内容之间的距离

　　width="10px"

　　height="10px"

td的属性：

　　colspan 横跨的列数

　　rowspan 竖跨的行数

实例链接

4.5：表单标签<form>

　　4.5.1 浏览器向服务器发送数据的两种方式

　　　 a. 通过超链接向服务器发送数据

　　　　其实就是在超链接后面通过?拼接参数将数据带给服务器

　　　　参数和参数值之间用等号分隔, 参数可以有多个, 多个参数之间用&分隔, 并且参数的名字可以重复

　　 b.通过表单向服务器发送数据

　　　　其实里通过表单及表单项标签, 用户可以通过表单项输入数据, 通过提交表单向服务器发送数据.

　　4.5.2 form标签 <form action=”http://www.baidu.com” method=”GET”></form>

　　　　　　action 必须存在的属性, 用来指定表单提交的目的地地址

　　　　　　method 可选属性, 用来指定以何种方式来提交表单, 如果不指定, 默认是GET提交

　　　　　　　　　　HTTP协议中规定了7种提交方式, 其中5种都不常用, 只用GET和POST.

　　　　　　　　　　只有使用表单, 并且明确的指定了提交方式为POST时, 才是POST提交, 其他方式都是GET提交

　　　　　　　　　　GET和POST提交的区别: 主要区别在于请求参数传输过程的不相同

　　　　　　GET提交:

通过在地址栏拼接参数将数据发送给服务器

数据显示在地址栏, 非常不安全

通过地址栏发送数据, 数据量不能太大, 不能超过1kb或者4kb

　　　　　　POST提交:

通过底层的流将数据发送给服务器

没有将数据显示在地址栏, 相对更安全

没有通过地址栏发送数据, 数据量理论上没有限制

　　4.5.3表单中的项

　　　　表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它

　　a.<input> 输入框

　　　　type属性: type属性的值可以有多个, 当type属性的值不同时, input标签的功能效果也不同

　　　通过size属性设置框的宽度

　　　　type="text" 文本输入框

　　　　type="password" 密码输入框

　　　　type="radio" 　　单选框多个单选框的name属性值必须一致才可以单选, 并且需要通过value属性指定被提交时的值

　　　　type="checkbox" 　复选框(多选框) 需要通过value属性指定被提交时的值

　　　　type="submit" 提交按钮用来提交表单

　　　　type="reset"　　　重置按钮, 将表单项重置到初始时的状态

　　　　type="button"　　普通按钮

　　　　type="file" 　　　文件上传项, 可以选择文件进行上传

　　　　type="hidden" 　隐藏域，一般在信息修改的时候用来隐藏用户id　

　　通用的属性:

　　　　readonly=”readonly” 设置表单项为只读, 只能读不能写, 但是可以被提交

　　　　disabled=”disabled” 设置表单项为禁用, 不能被提交.

　　b.<textarea> 文本域 <textarea name="chen" rows="10" cols="50">chen</textarea>

　　　　属性:

　　cols 设置列数, 即输入框的宽度

　　rows 设置行数, 即输入框的高度

　　c.<select> <option>标签

　　select 定义一个下拉选框

option 用来定义下拉选框中的选项

　　select属性:

name属性 -- name指定该项提交时参数的名字

size属性 –- 指定可见选项的个数

multiple –- 指定支持多选

实例链接

4.6 文本标签 <font>

　　属性：size：大小

face：字体

color：颜色，注意：不要用rgb三基色，可以用16色或者单词

<font size="1" face="黑体" color="red">我是文本标签</font><br />

<font size="5" face="宋体" color="#ff0000">我是文本标签</font><br />

<font size="7" face="楷体" color="rgb(255,0,0)">我是文本标签</font><br />

html流程图

模块二：css

1.css概述

　　层叠样式表，美化html页面的。增强了网页的显示能力，而且css代码可以和html代码分离。

　　a.选中

b.修饰

2.html中引入css

　　a.通过style属性引入(案例一)

　　b.通过style标签引入(案例二)

　　　　在head中添加style标签引入css

　　　　初步实现了css代码和html代码的分离

　　c.引入外部的css文件(案例三)

　　　　通过link标签引入外部的css文件

　　　　完全实现了css代码和html代码的分离

3.div，span ，p 标签　

　　都可以看作一个容器

div：独占一行，可以把页面分成几块

span：多个span同行显示

p：独占一行，但是在其前后会有一些空白，段落标签

4.选择器

4.1.基本选择器（案例4）

1)标签名（元素名）选择器

格式：标签名｛css属性｝

2)类（class）选择器

格式：.类名｛css属性｝

需要在希望选中的标签上添加class属性

一个标签属于多个类：<span class="c1 c2">

3)id选择器

格式：#id值｛css属性｝

注意：id一定不要重复

需要在希望选中的标签上添加id属性

4.2.扩展选择器（案例5）

1）后代选择器

可以选中父元素中所有选中的后代

格式：父选择器后代选择器｛css属性｝

2）子元素选择器

可以选中父元素中一层子元素

格式：父选择器>子元素选择器｛css属性｝

3)分组选择器

可以将所有选择器选中的标签一起修饰

格式：选择器1, 选择器2, 选择器3,.....{css属性}

4)属性选择器

根据属性条件选中元素

格式：选择器[属性条件]{css属性}

号外：*为通配符，属性条件可以只给key或者key=”value”

5）相邻兄弟选择器

如果两个元素具有相同的父元素, 并且是紧挨着的, 这两个元素就是相邻兄弟, 可以通过相邻兄弟选择器选中A元素后的B元素.

格式：大哥+小弟｛css属性｝

6)伪元素选择器

不仅可以选中标签，还能选中标签的状态

状态分为以下几种：

　　　　　　　　:link 表示元素未被点击时的状态

　　　　　　　　:hover 表示光标(鼠标)悬停时的状态(掌握!)

　　　　　　　　:active 表示元素被点击时的状态

　　　　　　　　:visited 表示元素被点击之后的状态

a:link{

    font-size:24px;

    text-decoration: none;

}

a:hover{

    color:green;

    font-size:36px;

    text-decoration: underline;/* 有下划线 */

}

a:active{

    color:#8FBC8F;

    font-size:50px;

    text-decoration: none;/* 无下划线 */

}

a:visited{

    color:gray;

    font-size:24px;

}

5.边距、内框和外边距

a：边框
　　1.边框样式实线虚线等
　　 border-style:solid;
　　 border-right-style:dashed;
　　2.边框颜色
　　 border-top-color:red;
　　 border-right-color:blue;
　　 border-bottom-color:green;
　　3.边框粗细
　　 border-left-width:30px;
　　4.border简写
　　　border: width style color;

b：外边距
例子：
　　margin-top:20px;
　　margin-right:20px;
　　margin-bottom:30px;
　　margin-left:30px;
　　margin:20px 20px 30px 20px;
　　margin:0px auto;

c:内边距

　　例子：
　　　　padding: 50px 100px 40px 100px;
　　　　padding-top:100px;

　　注意：外边距垂直合并现象

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的　　　　　　高度中的较大者。

6：属性

　　6.1 元素类型的补充（案例8）

　　　　块级元素:

　　　　默认情况下, 块级元素可以独占一行

　　　　块级元素可以设置宽和高

　　　　如果不设置宽度: 其中宽是默认填满父元素, 高是由内容决定(由内容撑起来)

　　　　如果设置, 就是设置的宽和高.

　　　　块级元素中可以包含任何元素

　　　　给块级元素设置的外边距/边框/内边距都会起作用

　　　　行内元素:

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

　　　　不可以设置宽和高, 其中宽和高由内容决定

　　　　行内元素中只能包含行内元素

　　　　给行内元素设置的左右外边距/边框/内边距都会起作用, 但是上下外边距将不会起作用!

　　6.2.display属性 -- 设置元素的显示方式

　　　　block: 块级元素的默认值

　　　　inline: 行内元素的默认值

　　　　inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)

　　　　none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间

　　　　visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间（很少用到）

　　6.3文本格式　　

　　　　1.color:#FF8800; 十六进制 #开头前2个是红色分量中间2个是绿色分量最后2 个是蓝色分量
　　　　　　color:rgb(255,0,0);十进制表示法也是三个颜色大小范围为 0——255 red green blue
　　　　2.text-indent:300px; 首行文本的缩进
　　　　3.text-align:center; 水平对齐方式 justify:俩端对齐
　　　　4.text-decoration:line-through; 设置文本的修饰 line-through 对这行进行划线
　　　　5.text-shadow:#FF00FF 20px 20px 100px;文本阴影 color x y bur-radius( 阴影模糊半径代表阴影向外模糊的模糊范围)
　　　　6.vertical-align: middle;垂直对齐方式
　　　　7.line-height:300px;行高

　　6.4字体样式

　　　　1.font-style:italic; 字体风格 italic 斜体字
　　　　2.font-weight 字体粗细 normal(正常 400) lighter(细) bold(粗 700)
　　　　3.font-size:16px; 字体大小
　　　　4.font-family:"隶书"; 字体类型
　　　　5.font 后面的四个值就是上面的顺序

　　6.5背景属性　　　

　　1.背景图片
　　　　background-image: url("外边距.png");
　　2.背景颜色
　　　　background-color: #DDD;
　　3.背景的平铺
　　　　background-repeat: repeat/repeat-x/repeat-y/no-repeat;
　　　　水平和垂直方向平铺水平方向平铺垂直方向平铺不平铺

　　4.设置或检索对象的背景图像位置

　　　　background-position