web（一）基础知识-CSDN博客

本文链接：https://blog.csdn.net/qq_53358173/article/details/115971714

文章目录

web开发(一)
- 第一章

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元素

元素指的是从开始标签到结束标签的所有代码

标签书写规范

标签与标签之间是可以嵌套的，但先后顺序必须保持一致，比如：

<div> <p>科学</p></div>

HTML标签对大小写不敏感

标签属性

HTML标签可以拥有属性——为HTML元素提供附加信息
- 属性书写形式：name==“value"
- 属性书写位置：开始标签
- 不同标签具有不同属性

标题标签和段落标签

网页元素

网页元素是指构成网页的各项内容
网页元素有：文字，超链接，列表，图片······

标题标签

标题<h1>…</h1>

段落标签

段落：网页中的一段文字
<p>…</p>

图片标签，相对路径和绝对路径

图片：<img/>
- 属性：
  - src：指明存储图像的位置（图片的路径）
  - alt：为图片添加替换文本
- 路径：
  - 绝对路径
  - 相对路径
    - 同级目录：src=“./图片名”
    - 上一级目录:src=“…/图片名”
    - 下一级目录：src=“目录名称/图片名”

超链接标签

超链接：从一个网页指向另一个目标的链接关系
<a href = " ">…</a>
属性：
- href：必选属性，规定链接目标
- target：在何处打开目标

无序列表和有序列表

列表：HTML支持无需列表，有序列表
无序列表：
- <ul>
- 每个列表项默认用粗体圆点进行标记
有序列表：
- <ol>
- 每个列表项默认用数字进行标记

注意事项与编码规范

注意事项：

文件的扩展名要以.html结束
文件名由英文字母，数字或下划线组成
文件名不要包含特殊符号，不使用中文

编码规范：

所有标签必须关闭
所有标签和属性的名字都必须小写
所有标签东都必须合理嵌套
所有属性必须赋值，所有的属性值都必须用引号括起来

第三章

网页中插入表格

表格的相关概念：
- 表头
- 行
- 单元格
相关标签：
- <table boder=“1”></table>定义一个“表格”
- <tr></tr>，定义“一行”
- <th></th>，定义”表头“
- <td></td>，定义表格中的一个单元格

表格的相关属性

属性	作用
border	表格边框的宽度
bordercolor	表格边框的颜色
background	表格背景图
bgcolor	表格背景颜色
cellpadding	单元边缘与其内容之间的距离
cellspacing	单元格之间的空白
clospan	跨列
rowspan	跨行

网页中插入表单

表单是一个包含表单元素的区域

表单标签

<form></form>
- 语义：定义一个”表单“
所有表单控件都必须在<form><form>标签之间

表单控件

文本框
- <input type=“text” name=“名称” value=“文本”/>
密码框
- <input type=“password” name=“名称” value=“文本”/>
单选框
- <input type=“radio” name=“名称” value=“文本”/>
- **同组单选框name属性值必须相同
复选框
- <input type=“checkbox” value=“good1” name=“goods”/>
- 同组复选框name属性值需要一致，value属性值需要不同
文件控件
- <input type=“file” name=“files”/>
按钮
- 提交按钮：type=“submit”
- 重置按钮：type=“reset”
- 普通按钮：type=“button”
多行文本域
- 标签：<textarea></textarea>
- 相关属性：
  - rows：规定文本区内可见行数
  - cols：规定文本区内可见列数
下拉列表
- <select><\select>，元素定义下拉列表
- <option></option>，定义待选择的选项

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 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

Remark 提示: 如果你使用了外部文件的样式在中也定义了该样式，则内部样式表会取代外部文件的样式。

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	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

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文本属性。

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距