声名随笔中的实例链接到另一个博客是我本人的另一个博客号
模块一：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-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