web部分资料整理

Zimerence

于 2022-05-04 23:44:05 发布

阅读量789

点赞数 2

本文链接：https://blog.csdn.net/u011727500/article/details/124578585

版权

web部分资料整理

CSS文本外观属性

1.color 属性用于定义文本的颜色，取值如下:
(1) 预定义的颜色，如: red, green, blue 等。
(2) 十六进制，如: #FF6600, #29D794 等。实际中，十六进制是最常用的定义颜色方式。
(3) RGB 代码，如红色可以表示为rgb(255,0,0) 或rgb(100%,0%,0%)(如果使用百分比颜色值，取值为0时也不能省略百分号，必须写为0%)。
2.letter-spacing:字间距
3.line-height:行间距
4.text-decoration:文本装饰
none:没有装饰
underline:下划线
line-through:删除线
5 .text-align：水平对齐方式
left:左对齐
right:右对齐
center:居中对齐
仅适用块元素。
图像水平对齐，像添加一个父标记，如<p></p>或<div></div>，然后对父标记应用 text-align 属性，即可实现图像的水平对齐。
6. text-indent：首行缩进(单位em)

CSS字体样式属性

1.字号:
font-size:14px;
2.行高:
line-height:24px;
3.字体:
font-family:“宋体”

CSS优先级

CSS 优先规则1: 最近的父样式比其他父样式优先级高。
CSS 优先规则2:"直接样式"比"父样式"优先级高。
例:

	<div class = "第一层" style="color:red">  
		<div class = "第二层" style="color:blue">  
			<div class = "第三层" style="color:yellow">
			</div>  
		</div>  
	</div>

优先级:第三层>第二层>第一层
第三层的样式优先级>第二层的样式
CSS基础选择器:
ID 选择器，如 #id{}
类选择器，如 .class{}
属性选择器，如 a[href=“segmentfault.com”]{}
伪类选择器，如 :hover{}
伪元素选择器，如 ::before{}
标签选择器，如 span{}
通配选择器，如 *{}
CSS 优先规则3:优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
后代选择符: .father .child{}
子选择符: .father > .child{}
相邻选择符: .bro1 + .bro2{}

CSS层叠性和继承性

继承性:给父元素设置一些属性，子元素/后代也可以使用。
只有以color/font-/text-/line开头属性才可以继承。
a标签的文字颜色和下划线不能继承的
h标签的文字大小不能继承的
层叠性:CSS处理冲突的一种能力。
在多个选择器中“同一个标签”，又设置了“相同的属性”的时候，就会发生层叠性，由优先级来确定

CSS复合选择器

选择器	名称	说明
*	通用选择器	选择所有元素
	元素选择器	选择指定类型的元素
#	id选择器	选择指定 id 属性的元素
.	class选择器	选择指定 class 属性的元素
[attr]系列	属性选择器	选择指定 attr 属性的元素
s1,s2,s3…	分组选择器	选择多个选择器的元素
s1 s2	后代选择器	选择指定选择器的后代元素
s1 > s2	子选择器	选择指定选择器的子元素
s1 + s2	相邻兄弟选择器	选择指定选择器相邻的元素
s1 ~ s2	普通兄弟选择器	选择指定选择器后面的元素
::first-line	伪元素选择器	选择块级元素文本的首行
::first-letter	伪元素选择器	选择块级元素文本的首字母
::before	伪元素选择器	选择元素之前插入内容
::after	伪元素选择器	选择元素之后插入内容

1.分组选择器
p,b,i,span { color: red;}
解释:将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。
2.后代选择器
p b { color: red;}
解释:选择元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。
3.子选择器

ul > li { border: 1px solid red;}
<ul>
    <li> 我是儿子 <ol>
            <li> 我是孙子 </li>
            <li> 我是孙子 </li>
        </ol>
    </li>
    <li> 我是儿子 </li>
    <li> 我是儿子 </li>
</ul>

解释:子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。
4.相邻兄弟选择器
p + b { color: red;}
解释:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。
5.普通兄弟选择器
p ~ b { color: red;}
解释:普通兄弟选择器匹配和第一个元素后面的所有元素。
伪元素选择器
伪选择器分为两种第一种是下节伪类选择器，还有一种就是伪元素选择器。
这两种选择器特性上比较容易混淆，在 CSS3 中为了区分，伪元素前置两个冒号(:😃，伪类前置一个冒号(😃。
1.::first-line块级首行
::first-line { color: red;}
解释:块级元素的首行文本被选定。如果想限定某种元素，可以加上前置 p::first-line。
2.::first-letter块级首字母
::first-letter { color: red;}
解释:块级元素的首行字母。
3.::before文本前插入
a::before { content: ‘点击-’;}
解释:在文本前插入内容。
4.::after文本后插入
a::before { content: ‘-请进’;}
解释:在文本后插入内容。

CSS基本选择器

(1) 标签选择器
(2) Class选择器
(3) Id选择器
基本选择器的优先级
style > id选择器 > class选择器 > 标签选择器

CSS的三种写法

内联样式:
在HTML元素中使用"style" 属性；
例:

<div style = "color:blue; font-size:15px">例</div>

嵌套样式:
在HTML文档头部 head 区域使用 style 元素来包含CSS代码；
例:

<head>
<style>div{font-size: 18px; }
</style>
</head>

外联样式:
使用外部 CSS 文件。
例:

<head>
<link href="css/tableStyle.css"/>
</head>

CSS样式规则

选择器 {属性:属性值;属性:属性值;}
如:h1 {color:red; font-size:20px;}

相对路径和绝对路径

相对路径:
如果链接到同一目录下，则只需输入要链接文档的名称.
如果链接到下一级目录，则需要先输入目录名，然后加 “ / ”，再输入文件名.
如果连接到上一级目录，则需要先输入“.．/”，然后再输入目录名、文件名.
绝对路径:
直接添加路径即可

图像标签

必需属性

属性	值	描述
alt	text	规定图像的替代文本。
src	URL	规定显示图像的 URL。

可选的属性

属性	值	描述
align	top bottom middle left right	位置属性，不推荐使用。规定如何根据周围的文本来排列图像。
border	pixels	不推荐使用。定义图像周围的边框。
height	pixels %	定义图像的高度。
hspace	pixels	不推荐使用。定义图像左侧和右侧的空白。
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。
vspace	pixels	不推荐使用。定义图像顶部和底部的空白。
width	pixels %	设置图像的宽度。

标签属性

标签较多仅提供基础部分
<head>头部标签，包含文件的标题,使用的脚本,样式定义等</head>
<!DOCTYPE html>,表示该文件为HTML文件
<html>内部是html文件属性(例如语言lang=”zh-cn”)和</html>间是HTML整体文件
以下部分都是<xxx>``````</xxx>格式
<body>定义 HTML 文档的主体。</body>
<title>包含文件的标题
<div>节标签
<h1>标题标签同时有h1,h2,h3,h4,h5,h6
<p>分段标签
<span>节
<b>加粗
<i>斜体
<u>下划线
<s>删除线
<sup>上标
<sub>下标
<li>定义列表
<ul>无序列表
<ol>有序列表
<form>表单
<button>按钮
以下部分都是<xxx/>格式
<meta />元信息
<hr/>水平线
<br/>换行
<input/>输入框，可做按钮

HTML文档头部相关标记

<html>标题</html>
<mate />页面元素信息标记
<link 属性="属性值"/>引用外部文件标记
<style 属性="属性值">内嵌CSS</style>

标题和段落标记

标题:
定义了六级标题
基本语法:
<h1 align = “left | center | right | justify”>标题文字</h1>
语法说明:
1.标题标记本身具有换行的作用，标题总是从新的一行开始；
2.align设置标题字的对齐属性，例如left靠左，center居中
空格:
 
段落:
基本语法:
<p>段落</p>
语法说明:
<p>是段落标记，可以对文字进行段落定义，它可以单独使用，也可以成对使用。

单标记和双标记

单标记:
<标记名 />
双标记:
<标记名>内容</标记名>

HTML文档基本格式

以下部分大概记忆即可

基本格式

1、<!DOCTYPE>标记:
标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，
2、<html></html>标记:
<html>标记位于<!DOCTYPE>标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档，<html>标记标志着 HTML 文档的开始，</html>标记标志着 HTML 文档的结束，在它们之间的是文档的头部和主体内容。
3、<head></head>标记:
<head>标记用于定义 HTML 文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
一个 HTML 文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
4、<meta></meta>标记:
META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的<head>和<title>之间(有些也不是在<head>和<title>之间)。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta>除了提供文档字符集(例如本例的utf-8编码格式)、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。
5、<title>``````</title>标记:
能在标题栏上显示你需要的文字
6、<body></body>标记:
<body>标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
一个 HTML 文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。

代码标签

1、<p>标签定义段落
<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间。
2、align文本水平对齐方式
语法:<td align="value">
属性:
(1) left 左对齐内容(默认值)。
(2) right 右对齐内容。
(3) center 居中对齐内容。
3、style定义文本样式
语法:<element style="value">
style_definition : 一个或多个由分号分隔的 CSS 属性和值。
4、color定义文本颜色(主要是用1-3)
color 颜色值可以通过以下方式进行设置:
(1) 颜色名称:red、blue、white…，举例:color: red;
(2) 十六进制: #RRGGBB和#RGB，#后面跟6位或者3位十六进制字符，举例:color: #000f9f;
(3) RGB:rgb(R,G,B)，取值可以是0~255的整数或者百分比，举例:color:rgb(156,96,24);；
(4) RGBA:rgba(R,G,B,a)其拓展了RGB颜色模式，它包含了阿尔法通道，允许设置透明度(a为透明度，0为透明，1为不透明)；
(5) HSL:hsl(H,S,L)，色相-饱和度-明度，色相表示一个色环的一个角度，饱和度和明度使用百分比来表示；
(6) HSLA:hsla(H,S,L,a)，其拓展了RGB颜色模式，它包含了阿尔法通道，允许设置透明度(a为透明度，0为透明，1为不透明)；
5、<u>显示的字带有下划线
6、<s>显示的字带有删除线
7、<b>加粗
8、<i>斜体
9、<sup>上标
10、<sub>下标

JavaScript事件

HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例:
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
实例

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

DOM(文档对象模型)

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。

JavaScript基础

JavaScript的基本结构

	<script type="text/javascript">
		<!—
			JavaScript 语句;
		—>
	</script >

网页中引用JavaScript的方式
1.使用<script>标签
2.外部JS文件
<script src="文件名.js" type="text/javascript"></script>
3.直接在HTML标签中
<input name="btn" type="button" value="弹出消息框"onclick="javascript:alert('欢迎你');"/>

表单

表单用于收集用户输入
<form>
</form>
表单包含表单元素:
<input>
<input>元素有很多形态，根据不同的 type 属性。

类型	定义
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

action 属性定义在提交表单时执行的动作。
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
GET: 如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息
POST: 如果表单正在更新数据，或者包含敏感信息（例如密码）
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
enctype 规定被提交数据的编码（默认:url-encoded）

超链接

1. href 属性
href 属性指定链接的目标，也就是要跳转到什么位置。href 可以有多种形式
2. target属性
在创建网页时，默认情况下，超链接在当前的浏览器窗口打开，但是我们可以使用 target 属性来改变目标窗口的打开方式。常见的打开方式如下表所示:

属性值	说明
_self	默认，在现有的窗口中打开新页面，原窗口将被覆盖。
_blank	在新的窗口中打开新页面。
_parent	在当前框架的上一层打开新页面。
_top	在顶层框架中打开新页面。

列表

ul 元素表示无序列表。列表中的项目使用 li 元素表示。
ol 元素表示有序列表。列表中的项目使用 li 元素表示。
使用 type 属性来指示每个项目旁边应显示哪个标记。

值	描述	例子
1	小数(默认)	1., 2., 3., 4.
a	小写拉丁字母	a., b., c., d.
A	大写拉丁字母	A., B., C., D.
i	小写罗马数字	i., ii., iii., iv.
I	大写罗马数字	I., II., III., IV.

背景属性

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色（bgcolor）
<body bgcolor="#000000">
背景（Background）
<body background="clouds.gif">

元素的类型

html中的标签元素大体被分为三种不同的类型:
块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
常用的内联元素有:
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
内联(行级)标签: 标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行
块状标签: 标签独占一行，可指定宽、高
内联块状元素（inline-block） 就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
inline-block 元素特点:
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置

盒子模型

HTML 页面中的每一个元素都是一个盒子或者说是被一个盒子所包围着
盒子模型
内容区（content）: 用来在 HTML 页面显示内容的区域，可以是文本内容、图片、视频或者其他后代元素等。
内边距（padding）: 指的是内容区至边框之间的空白区域。
边框（border）: 包含内容区和内边距的边界。
外边距（margin）: 指的是当前盒子模型的边框至其他盒子模型的边框之间的区域。
width 属性和 height 属性设置盒子模型的内容区在页面中所占区域。
border 属性、padding 属性和 margin 属性分别设置盒子的边框、内边距和外边距。

Zimerence

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web部分资料整理

web部分资料整理目录web部分资料整理CSS文本外观属性css字体样式属性CSS优先级CSS层叠性和继承性CSS复合选择器CSS基本选择器CSS的三种写法CSS样式规则相对路径和绝对路径图像标签标签属性HTML文档头部相关标记标题和段落标记单标记和双标记HTML文档基本格式JavaScript事件DOM(文档对象模型)JavaScript基础表单超链接列表背景属性元素的类型盒子模型CSS文本外观属性css字体样式属性CSS优先级CSS层叠性和继承性CSS复合选择器CSS基本选择器CSS的三
复制链接

扫一扫