web网页开发的基本知识
2022/05/03 16:42:16
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 设置字间距
原文链接：https://blog.csdn.net/qq_53358173/article/details/115971714