signed

QiShunwang

“诚信为本、客户至上”

HTML CSS

2021/4/26 21:03:25   来源:

目录

第一部分  HTML

第一章  html结构:

第二章  HTML基本标签:

第三章 

表单标签

 

标签

Get请求和post请求

第四章  img标签

路径知识:

标签

第五章  a标签

创建锚点和锚链接

第六章 

表格标签

 

第七章  列表

第八章  frameset框架

第九章  XHTML

第十章  HTML5

视频和音频

 

第二部分  CSS

第十一章  CSS样式表的语法

第十二章  CSS选择符

伪类选择器

第十三章  CSS的引入方式

样式的优先级

第十四章  CSS中几种颜色的表示方法

第十五章  CSS文字文本属性

第十六章  盒子模型


第一部分  HTML

HTML:Hyper Text Markup Language  超文本标记语言

第一章  html结构:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

DOCTYPE html:文档类型 html

lang="en":language="english"

meta charset="UTF-8":源 编码字符集="utf-8"

html标签:单标签 双标签

 

第二章  HTML基本标签:

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> - <h6> 标题字体从大到小 默认加粗

<hr> 标尺线

<p> 段落标签

 

第三章  <form>表单标签

登陆、注册 表格 等需要提交的场景  用于收集用户数据

action  表单提交路径  

method 提交的方式

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<input> 标签

<input type=" " name=" "  value=" " />

常用type类型:

Text  文本框

Password 密码框

Checkbox 多选框

Radio 单选框

button 按钮

Submit  提交按钮

Reset 重置按钮

File  文件上传

Get请求和post请求

Method的提交方式来源于HTTP协议

表单提交时 默认情况下为 Get请求 method为get时为 Get请求  method为post 时为Post请求

Get请求和Post请求有什么区别?

Post请求提交时路径上没有属性的信息 相对安全

Get 请求提交时路径上存在属性的信息   不安全

get请求在路径的地址上存在属性值 url的地址是有限制的 最大为64kb

什么时候使用get请求 什么时候使用post请求?

根据数据性质  热数据 安全度不重要的数据  使用get和post都可以

如果数据的性质需要安全性比较高时  那么一定要使用post   在写文件上传的功能时必须是post的提交方式

 

第四章  img标签

图片格式 jpg png gif

<img src=" " alt=" " width=" " height=" " />

src=" "图片路径 设置图片的url数据

alt=" "图片含义 提供给搜索引擎搜索的

路径知识:

绝对路径 从磁盘出发的路径

相对路径 相对于当前文件的路径

/开头表示根目录; ./表示当前目录; ../表示上级目录;

<map> 标签

定义一个客户端图像映射(带有可点击区域的一幅图像)。area 元素可定义图像映射中的区域。
定义某个圆形区域范围:用截图工具找图片某个区域的像素比  例如250x167 再除以电脑屏幕缩放比 例如本电脑为150%,就是除以1.5,得到167,111, 再定义一个半径比如200
例如:

<img src="./image/2.jpeg" alt="莱茵河" usemap="#first" border="2px">
<map id="first" name="first">
<area shape="circle" coords="167,111,200" href="https://www.baidu.com/"></area>
</map>

在图片中的这个圆形区域内点击一下就会跳转到百度

 

第五章  a标签

a标签进行页面跳转  属于get请求方式

href属性 设置跳转的网页地址

target属性 设置跳转的目标

<a> 标签的使用:

1.使用a标签进行外部跳转  外链接

2.使用a标签跳转到网页的内部  锚点

创建锚点和锚链接

1.创建锚点<a name="锚点名称"></a>

2.创建锚链接<a href="#锚点名称">内容</a>

 

第六章  <table>表格标签

<table> 定义一个表格

<tr>行标签 定义表格中的一行 一个<tr></tr>表示一行

<td>单元格标签 定义表格中的一个单元格  一个<td></td>表示一个单元格

 

第七章  列表

1.<ul>无序列表  <li>列表的选项

列表符号: type="circle" 空心圆    type=“disc” 实心圆(默认值)  type="square" 方块符

2.<ol>有序列表   <li>列表的选项

列表符号:type="A"  A B C D   type="a"  a b c d   type="1" 1 2 3 4 (默认值) type=”I”  I II III

3.<dl>定义列表

<dl>  表示定义列表

<dt>  定义的项目

<dd>  定义项目的描述

dd是对dt的解释

< dl>< /dl>用来创建一个普通的列表

< dt>< /dt>用来创建列表中的上层项目

< dd>< /dd>用来创建列表中最下层项目

< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

 

第八章  frameset框架


<frameset>  </frameset>用来定义一个框架  不能和 <body> 一起使用
rows、cols属性

rows 定义行表示框架有多少行
cols  定义列表示框架有多少列
frame子框架  每一个窗口都是一个frame

<frame>  表示框架中的某一个部分 单标签

src 显示的网页的路径
name 框架名
frameborder 边框线(取值 0 / 1)

 

第九章  XHTML

XHTML 可扩展超文本标记语言

XHTML 它是html4.01版本后出现的一个更严谨语法更纯粹的一个版本   从语法上对html进行更严谨的规范

XHTML 是以 XML 应用的方式定义的 HTML

XML 标签 可以用任意单词来进行定义

HTML也可以存在 任意的单词的标签  默认把他们当成文本标签  

DTD的命名规范 规范了标签的内容

 

第十章  HTML5

HTML5 是最新的 HTML 标准

HTML5 拥有新的语义、图形以及多媒体元素

视频和音频

<video> 视频    <audio> 音频

<video src="./video/1.mp4"  controls="controls"></video>

<audio src="./music/1.mp3"  controls="controls"></audio>

 


第二部分  CSS

CSS:Cascading Style Sheets 层叠样式表

CSS内的注释:/*注释内容*/

CSS 是一种描述 HTML 文档样式的语言

CSS 描述应该如何显示 HTML 元素

第十一章  CSS样式表的语法

CSS规则由两个主要的部分构成:要添加样式的盒子名或者标签名、和要添加的样式。

盒子名或者标签名{属性:值;}

 

第十二章  CSS选择符

什么是选择器:css选择器就是要改变样式的对象  选择器{属性:值; 属性:值;}

1.标签选择符  以标签命名的选择符  页面中所有的标签都是一个选择器 

p{
          color:gold;
      }

2.id选择符  通常用于描述一个标签具有唯一的样式  标识是 #    id选择器唯一

<p id="first">难以忘记初次见你  一双迷人的眼睛</p>
#first{
          color:green;
      }

3. class选择符 通常用于修饰一组或者一系列具有相同样式的标签 标识是 .   class类选择符可以重复利用

<p class="blue">在我脑海里你的身影  挥散不去</p>

<p class="blue">握你的双手感觉你的温柔</p>

<p class="blue">真的有点透不过气  你的天真 我想珍惜</p>
.blue{
          color:blue;
      }

群组选择器  选择多个元素,以逗号隔开 

h1, h2, p {
  text-align: center;
  color: red;
}

通用选择器  选择页面上的所有的 HTML 元素

* {
  text-align: center;
  color: blue;
}

包含选择器  选择某元素的后代元素,也称后代选择器,父类与子类间以空格隔开

属性选择器  选择包含某一属性的元素

 

<a>伪类选择器

a:link {color:#FF0000;}   未访问的链接(只用于a标签)

a:visited {color:#00FF00;}  已访问的链接(只用于a标签)

a:hover {color:#FF00FF;}  鼠标移动到链接上  (可和其他标签结合一起用)

a:active {color:#0000FF;}  选定的链接

伪类选择器的排序:a:link  a:visited  a:hover  a:active  记作lvha

输入伪类选择器(针对表单)

input:focus{color:red;}  键盘输入焦点

其他伪类选择器

p:first-child{color:red;}  第一个p

:before 在元素之前添加内容

:after 在元素之后添加内容

 

第十三章  CSS的引入方式

1.行内样式

在标签中写入style属性  <h1 style="color:red">情非得已</h1>

2.内嵌样式

当单个页面需要设置样式时,就应该使用内部样式表。

<style type="text/css">
	  p{
	  	color:gold;
	  }

	  #first{
	  	color:green;
	  }

	  .blue{
	  	color:blue;
	  }

	</style>

3.外链样式

当样式需要应用于很多页面时,就需要用到外部样式表,首先需要创建一个css文件,然后引用到我们的页面中。

<link rel="stylesheet" type="text/css" href="./css/1.css">

4. 导入样式

是内嵌样式和外链的样式的混合 不太常用

<style type="text/css">
     @import url(./css/1.css);

	</style>

样式的优先级

优先级不是固定的 就近原则 离被设置元素越近优先级别越高

行内样式(标签内部) > 内嵌样式 (当前文件中) > 外链样式 (外部文件中) > 导入样式 (外部文件中

行内样式 > Id选择符 > class选择符 > 标签选择符

 

第十四章  CSS中几种颜色的表示方法

1.用颜色名表示 

2.用十六进制的颜色值表示 

3.用rgb(r,g,b)函数表示 如:rgb(255,255,0)

4.用rgba(r,g,b,a)函数表示 其中a表示的是改颜色的透明度,取值范围是0~1,其中0代表完全透明

 

第十五章  CSS文字文本属性

文字属性

设置字号font-size:12px
设置字色color:#000000
设置字体font-family:Arial,'宋体'
设置行高line-height:150%     line-height:1.5em
设置字体的粗细

font-weight:normal[正常]   bold[粗体] 

 

 

 

 

 

 

 

文本属性

设置对象中文本缩进text-indent:2em  可以为负值
文本水平对齐方式text-align:left[左]    center[中]    right[右]
对象中空白处理

white-space:normal[自动换行]     pre[换行和空白受保护]

nowrap[强制在同一行显示]

文本大小写控制text-transform:none[正常大小]   capitalize[每个单词的第一个字母转换成大写]  uppercase[转换成大写]      lowercase[转换成小写]
元素的垂直对齐方式

vertical-align:sub[设置文字为下标]    super[设置文字为上标]

top[把元素的顶端与行中最高元素的顶端对齐] 

text-botton[把元素的低端与父元素字体的低端对齐]

 

 

 

 

 

 

 

 

第十六章  盒子模型

盒子模型就是一个有高度和宽度的矩形区域

所有html标签都是盒子模型   div标签自定义盒子模型

盒子模型组成

Content  内容

Padding  内边距

Border  边框

Margin  外边距

padding和margin的用法相似

一个参数时 表示 上 下 左 右

二个参数时 表示 上下 和 左右

三个参数时 表示 上,左右,下

四个参数时 表示 上 右 下 左

单独属性:

padding-top:
padding-right:
padding-bottom:
padding-left:

border 边框

常见写法 border:1px solid #f00;
单独属性:

border-width:
border-style:
dotted 点状虚线
dashed 虚线
solid 实线
double 双实线
border-color  颜色