文章目录
web开发(一)
第一章
web开发简介
web概念：
- 全称：Word Wide Web
- 简称：web，www
web开发
- 进行网页页面制作
网站访问过程
- web服务器
- URL
- web浏览器
第二章
网页文件
- 文本文件
- 扩展名.html
- 文本内容为HTML代码和文本内容
HTML语法基础
- 超文本标记语言
- 标记语言是一套标记标签
HTML标签的三个要点
- 词汇（标签）
- 语法（标签使用规范定）
- 语义（浏览器“理解”的标签含义）
HTML基本结构
<!DCOTYPE html> <!--文档声明-->
<html> <!--html文件-->
<head>
<meta charset="UTF-8"/>
<title>demo</title>
</head>
<body>
Hello World!
</body>
</html>
- html标签语义：定义整个HTML文档，表示其中的内容为HTML语言
- head标签语义：定义文档头部，是所有头部元素的容器，包含网页的基本相关信息，比如文档的标题，不直接显示在网页内容上
- body标签语义：定义文档的主题，即网页内容的主要内容，包含文本，超链接，图像，表格和列表等
标签的分类
- 双标签：成对使用，代表标签作用范围
- 单标签：开始标签的结束而结束，无需表达范围，仅在标签出现处有效
HTML元素
- 元素指的是从开始标签到结束标签的所有代码
#####标签书写规范
-
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，比如：
科学
-
HTML标签对大小写不敏感
标签属性
- HTML标签可以拥有属性——为HTML元素提供附加信息
- 属性书写形式：name==“value"
- 属性书写位置：开始标签
- 不同标签具有不同属性
标题标签和段落标签
网页元素
- 网页元素是指构成网页的各项内容
- 网页元素有：文字，超链接，列表，图片······
标题标签
- 标题
…
段落标签
- 段落：网页中的一段文字
-
…
图片标签，相对路径和绝对路径
- 图片：
- 属性：
- src：指明存储图像的位置（图片的路径）
- alt：为图片添加替换文本
- 路径：
- 绝对路径
- 相对路径
- 同级目录：src="./图片名"
- **上一级目录：**src="…/图片名"
- 下一级目录：src=“目录名称/图片名”
- 属性：
超链接标签
- 超链接：从一个网页指向另一个目标的链接关系
- …
- 属性：
- href：必选属性，规定链接目标
- target：在何处打开目标
无序列表和有序列表
- 列表：HTML支持无需列表，有序列表
- 无序列表：
-
- 每个列表项默认用粗体圆点进行标记
-
- 有序列表：
-
- 每个列表项默认用数字进行标记
-
注意事项与编码规范
注意事项：
- 文件的扩展名要以.html结束
- 文件名由英文字母，数字或下划线组成
- 文件名不要包含特殊符号，不使用中文
编码规范：
- 所有标签必须关闭
- 所有标签和属性的名字都必须小写
- 所有标签东都必须合理嵌套
- 所有属性必须赋值，所有的属性值都必须用引号括起来
第三章
网页中插入表格
- 表格的相关概念：
- 表头
- 行
- 单元格
- 相关标签：
-
定义一个“表格”
- ，定义“一行”
- ，定义”表头“
- ，定义表格中的一个单元格
-
表格的相关属性
属性
作用
boeder
表格边框的宽度
bordercolor
表格边框的颜色
background
表格背景图
bgcolor
表格背景颜色
cellpadding
单元边缘与其内容之间的距离
cellspacing
单元格之间的空白
clospan
跨列
rowspan
跨行
网页中插入表单
- 表单是一个包含表单元素的区域
表单标签
- * 语义：定义一个”表单“
- 所有表单控件都必须在标签之间
表单控件
-
文本框
-
密码框
-
单选框
- **同组单选框name属性值必须相同
-
复选框
- 同组复选框name属性值需要一致，value属性值需要不同
-
文件控件
-
按钮
- 提交按钮：type=“submit”
- 重置按钮：type=“reset”
- 普通按钮：type=“button”
-
多行文本域
- 标签：
- 相关属性：
- rows：规定文本区内可见行数
- cols：规定文本区内可见列数
-
下拉列表
- ，元素定义下拉列表
- ，定义待选择的选项
CSS
CSS简介
什么是CSS？
- CSS指的是层叠样式表
- 样式定义如何显示HTML元素
- 样式通常存储在样式表中
- 把样式添加到HTML中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可层叠为一
CSS语法
- 属性是您希望设置的样式属性。每个属性有一个值，属性和值被冒号分开
- css声明总是以分号;结束，声明组以大括号{}括起来
CSS注释
- CSS注释以"/*“开始，以”*/"结束
CSS Id和Class
id和class选择器
id选择器
-
id选择器可以为标有特定id的HTML元素指定特定的样式
-
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
-
以下的样式规则应用于元素属性 id=“para1”:
#para1 { text-align:center; color:red; }
class选择器
-
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
-
class选择器正在HTML中以class属性表示，在CSS中，类选择器以"."显示
-
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;} -
你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {text-align:center;}
CSS 创建
插入样式表
- 外部样式表
- 内部样式表
- 内联样式表
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
多重样式
如果某些属性不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对 h3 选择器的三个属性：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
**即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。 **
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个HTML元素被不止一个样式定义时，一般而言，所有样式会根据下面的规则层叠与一个新的虚拟样式表中，其中数字4拥有最高的优先权
- 浏览器缺省设置
- 外部样式表
- 内部样式表
- 内联样式（在HTML元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
**提示:**如果你使用了外部文件的样式在 中也定义了该样式，则内部样式表会取代外部文件的样式。
CSS背景
CSS背景属性用于定义HTML元素的背景
CSS属性定义背影效果：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
background-color属性定义了元素的背景颜色
页面的背景颜色使用在body的选择器中：
body {background-color:#CCC;}
CSS中，颜色通常以以下的方式定义：
- 十六进制，如："#ff0000"
- RGB，如：“rgb(250,0,0)”
- 颜色名称，如：“red”
背景图像
background-image属性描述了元素的背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
页面背景图片设置示例：
body {background-image:url('papre.gif);}
背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺
背景 - 简写属性
当使用简写属性时，属性值得顺序为：:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
附加：CSS 背景属性
Property
描述
简写属性，作用是将背景属性设置在一个声明中。
背景图像是否固定或者随着页面的其余部分滚动。
设置元素的背景颜色。
把图像设置为背景。
设置背景图像的起始位置。
设置背景图像是否及如何重复。
CSS Text文本格式
text color
颜色属性被用来设置文字的颜色
颜色是通过CSS最经常的指定：
- 十六进制值 - 如"＃FF0000"
- 一个RGB值 - “RGB（255,0,0）”
- 颜色的名称 - 如"红"
一个网页的背景颜色是指在主体内的选择：
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本对齐方式
文本排列属性是用来设置文本的水平对齐方式
文本可居中或对齐到左或右,两端对齐
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
例如：
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration属性用来设置或删除文本的装饰
文本转换
文本转换属性用来指定在一个文本中的大小写字母，可用于所有的字句变成大小写，或者单个单词首字母大写
附加：所有CSS文本属性。
属性
描述
设置文本颜色
设置文本方向。
设置字符间距
设置行高
对齐元素中的文本
向文本添加修饰
缩进元素中文本的首行
设置文本阴影
控制元素中的字母
设置元素的垂直对齐
设置元素中空白的处理方式
设置字间距
3862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
