

首页  思维导图  详情



简单了解html和css

2024-03-07 09:27:22   0  举报





AI智能生成

HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两种基本技术。HTML是一种标记语言，用于创建网页的结构，包括文本、图片、链接等元素。而CSS则是一种样式表语言，用于描述网页的外观和布局，如颜色、字体、间距等。通过HTML和CSS的结合使用，可以创建出具有丰富内容和吸引人的视觉效果的网页。

JavaWeb

模版推荐

作者其他创作

大纲/内容

HTML

HTML简介

HTML概述

HTML全称：Hyper Text Markup Language(超文本标记语言)

简单一句话：HTML是一门用来创建网页的标记语言。

HTML特点

简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

可扩展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。

平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。

通用性：HTML是网络的通用语言,一种简单、通用的标记语言。

HTML的发展

超文本标记语言（第一版）--在1993年6月作为互联网工程工作小组（IETF）工作草案发布(并非标准)

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2——1997年1月14日，W3C推荐标准

HTML 4.0——1997年12月18日，W3C推荐标准

HTML 5——2014年10月29日，W3C推荐标准

HTML基本结构

<!DOCTYPE html> <html>

<head>

<meta charset="utf-8" />

<title>第一页面</title>

</head>

页面内容 </body> </html>

HTML基本标签

结构标签

<html></html>:根标签

<head>：头标签 <title></title>:页面的标题 </head>

<body></body>：主体标签：网页内容

属性：        color:文本的颜色 内容        bgcolor:背景色 <body bgcolor="bisque"> </body>        background:背景图片

颜色的表示方式：        第一种方式：使用颜色名称: red green blue        第二种方式：RGB模式 #000000 #ffffff #325687 #377405

排版标签

注释标签：

换行标签：

段落标签：文本文字 特点：段与段之间有行高（行间距）自带换行。 属性：align对齐方式 (left：左对齐 center：居中 right：右对齐)

水平线标签:<hr/> 属性:        width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示) size: 水平线的粗细 (像素表示，例如：10px)        color:水平线的颜色        align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)

标题标签

<h1></h1>—-<h6></h6> 随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

容器标签

<div></div>:块级标签，独占一行，换行

:行级标签，所有内容都在同一行 作用： <div></div>:主要是结合css页面分块布局            :进行友好提示信息

列表标签

无序列表

ul （unorder list）

无序列表标签： <ul></ul> 属性：type :三个值，分别为circle(空心圆) ,disc(默认,实心圆),square(黑色方块) 列表项：<li></li>

有序列表

ol（order list）

有序列表标签：<ol></ol> 属性：type：1、A、a、I、i（数字、字母、罗马数字） 列表项： <li></li>

定义列表

dl (defination list) 定义列表

dt (defination title) 定义标题

dd (defination description) 定义描述

列表嵌套

图片标签

<img/>独立标签

属性:       src：图片地址：相对路径（同一个网站）绝对路径（不同网站）       width:宽度       height:高度       border:边框       align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）       alt:图片的文字说明当图片未能正确加载，才显示       title:图片的悬停显示       hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

链接标签

超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<a>文本或图片</a>

属性：       href:跳转页面的地址(跳转到外网需要添加协议)       target:_self(自己) _blank(新页面，之前页面还存在) _parent _top 默认_self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。

name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值 每一个a标签有name属性，给定值需要点击跳转的 href="#name"

表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

查询xxx表中所有信息 SELECT  *  FROM  xxx;看起来便捷，效率低，可读性差 SELECT 所有列名  FROM xxx;

(table,tr,td)

(th)表格的表头

colspan 属性  表格的列合并

rowspan属性  表格的行合并

文本格式化标签

定义粗体文本。 <big> 定义大号字。 定义着重文字。 定义斜体字。 定义小号字。 定义加重语气。 定义下标字。 定义上标字。 <ins> 定义插入字。 <del> 定义删除字。

HTML表单标签

form标签

常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理        method:请求方式：get 和post        enctype:表示是表单提交的类型 默认值：application/x-www-form-urlencoded 普通表单        multipart/form-data 多部分表单(一般用于文件上传)        text/plain 普通文本

get:      1.数据存在地址栏中,请求参数都在地址后拼接 path?name="张三"&password="123456"      2.不安全      3.效率高      4.get请求大小有限制，不同浏览器有不同，但是大约是2KB使用情况：一般情况用于查询数据。

post：        1.地址栏没有数据：请求参数单独处理。        2.安全可靠        3.效率低        4.post请求大小理论上无限。使用情况：一般用于插入修改等操作

input标签

type: 以下为type可能要取的值： 1.1 text 文本框输入内容 1.2 password 密码框密文或者掩码 1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据表示同一组中只能选中一个( checked ="checked" 表示选中) 1.4 checkbox 表示多选，name必须一致，表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中) 1.5 file ：表示上传控件 以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取) 以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性 1.6 submit 提交 1.7 reset 重置 1.8 image 图片提交按钮 1.9 button 普通按钮 1.10 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上) 1.11 email 表示邮箱格式的数据

name属性：表单元素名字，只有name属性才能提交给服务器。 

value属性：提交给服务器的数据

placeholder：提示信息

select 元素

textarea元素

需要指定输入的区域位置大小

<textarea cols="100" rows="5"> 表示5行100列的区域可以输入内容，该元素没有value属性

HTML框架标签

frameset

框架结构标签，把body删掉，使用framset代替body

框架结构标签（<frameset>）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/cols 的值规定了每行或每列占据屏幕的面积

frame

frame 标签定义了放置在每个框架中的 HTML 文档。

基本的注意事项

1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用

2. 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize

3 frameset的属性 frameborder="1|0|yes|no" 表示是否有边框 border="1" 表示边框的粗细 bordercolor表示边框颜色

HTML的其它标签和特殊字符

其它标签

<meta name="keywords" content="keyword1,keyword2,keyword3">

查询xxx表中所有信息 SELECT  *  FROM  xxx;看起来便捷，效率低，可读性差 SELECT 所有列名  FROM xxx;

<meta name="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01

<meta http-equiv="refresh"content="2;URL=https://www.baidu.com">

<meta charset="UTF-8"> html5

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

<script type="text/javascript" src=""></script>

特殊字符

< 小于号  &lt; > 大于号  &gt; & 与字符  &amp; " 引号  &quot; ® 己注册  &reg; © 版权  &copy; ™ 商标  &trade;   空格  &nbsp;

CSS

CSS简介

CSS概念

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS作用

1. 修饰美化html网页。

2. 外部样式表可以提高代码复用性从而提高工作效率。

3. html内容与样式表现分离，便于后期维护。

CSS特点

1 丰富的样式定义        CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2 易于使用和修改        CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。        另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

3 多页面应用        CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4 层叠        简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

5 页面压缩        在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间

CSS语法规则

基础语法：选择器｛属性：值;属性:值….. ｝

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明.

每条声明由一个属性和一个值组成。

CSS使用方式

内联方式

把CSS样式嵌入到html标签当中，类似属性的用法，示例如下： <div style="color:blue;font-size:50px">This is my HTML page. </div>

好处:可以单独设置某个元素样式，缺点：不利于样式重用 

内部方式

在head标签中使用style标签引入css,示例如下: <style type=“text/css”> //告诉浏览器使用css解析器去解析       div{color:red;font-size:50px} </style>

好处：可以控制页面中多个元素样式，缺点：只能一个页面使用

外部方式

将css样式抽成一个单独文件，谁用谁就引用，好处：多个页面可以同时使用。 示例如下：        单独文件div.css: 内容示例：div{color:green;font-size:50px}        引用语句写在head标签内部，

链接式：        <link rel="stylesheet" type="text/css" href=“div.css"></link>        rel:代表当前页面与href所指定文档的关系        type:文件类型，告诉浏览器使用css解析器去解析        href:css文件地址

导入式： <style type="text/css">       @import url("div.css") </style> 该内容放在head标签中

备注:link和@import区别：        1.link所有浏览器都支持，@import某些版本低的IE不支持        2.@import是等待html加载完成才加载，link解析到这个语句，就加载        3.@import不支持js动态修改

优先级：内联样式>内部样式>外部样式，就近原则。

CSS选择器

基本选择器

标签选择器

在head中使用style标签引入在其中声明标签选择器: html标签{属性:属性值}，

id选择器

给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}

具体示例如下: 创建id选择器：        <div id="s1">hello,everyone!</div>        <div id="s2">hello,everyone!</div>        <div id="s3">hello,everyone!</div> 根据id选择器进行html文件修饰        <style type="text/css">                  #s1{color: red;font-size: 100px}                  #s2{color: green;font-size: 100px}                  #s3{color: blue;font-size: 100px}        </style>

class选择器

给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}

创建class选择器：        <div class="s1">hello,everyone!</div>        <div class="s2">hello,everyone!</div>        <div class="s3">hello,everyone!</div> 根据id选择器进行html文件修饰        <style type="text/css">               .s1{color: purple;font-size: 100px}               .s2{color: pink;font-size: 100px}               .s3{color: yellow;font-size: 100px}        </style>

备注:以上基本选择器的优先级从高到低:id >class >标签

属性选择器

根据元素的属性及属性值来选择元素。在head中使用style标签引入其中声明,

格式为:html标签[属性='属性值']{css属性:css属性值;}            或者html标签[属性]{css属性:css属性值;}

a[href^=‘www’]{         a标签href属性的值是由www开头的 }

a[href$='com']{         a标签href属性的值是由com结尾的 }

/* 包含指定内容的不在乎顺序 */ a[href*="du"]{        color: #008000; }

伪元素选择器

主要是针对a标签

语法：       静止状态 a:link{css属性}       悬浮状态 a:hover{css属性}       触发状态 a:active{css属性}       完成状态 a:visited{css属性}

层级选择器

后代选择器        div p{...} 表示div中的p标签，所有的p,后代        div span{....} 表示div中的span标签，包括所有的span，后代

子代选择器        div span{....} 表示 div中有一个span， span是子代        相邻兄弟 div+ p 表示div同级别后边的相邻的p标签         通用兄弟 div~p 表示div同级别后边的所有的p标签

CSS属性

文字和文本属性

文字属性

1>.font-size:设置字体大小

2>.font-family:设置文字的字体,常见的值为 :黑体，宋体，楷体等

3>.font-style:规定斜体字,常见的值：               normal - 文本正常显示               italic - 文本斜体显示字体斜体               oblique - 文本倾斜显示变形斜体

4>.font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。            100 对应最细的字体变形，900 对应最粗的字体变形。             数字 400 等价于 normal，而 700 等价于 bold。 备注：        斜体（italic）是对每个字母的结构有一些小改动，来反映变化的外观。        倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

简写：        font: italic bold 30px "幼圆","黑体"; /*style weight size family swsf*/

文本属性

1>.color:设置文本颜色

2>.text-indent:缩进元素中文本的首行,取值类型如下：       1》text-indent:5em;表示此段落第一行缩进5个字符的宽度       2》text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十

3>.text-decoration:       none:会关闭原本应用到一个元素上的所有装饰       underline: 添加下划线       overline:在文本的顶端画一个上划线       line-through:在文本中间画一个贯穿线       blink:让文本闪烁(无效果)

4>.text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)

5>.word-spacing: 字符之间的间隔

6>.letter-spacing: 单词或者字母之间的间隔

7>.line-height:设置行高 line-height:25px;

背景属性

1>.background-color：设置背景颜色，默认透明

2>.background-image:url("图片路径"):设置背景图片

3>.background-repeat:repeat-y:只在垂直方向都平铺                           repeat-x:只在水平方向都平铺                           repeat:在水平垂直方向都平铺                           no-repeat:任何方向都不平铺

4>.background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center

/*简写没有顺序*/ background: red center no-repeat url(img/003.jpg);

列表属性

list-style-type:decimal;改变列表的标志类型

list-style-image: url("images/dog.gif");用图像表示标志

list-style-position: inside;确定标志出现在列表项内容之外还是内容内部

简写       list-style: decimal url(img/001.png) inside;

去掉样式: list-style:none; list-style-type:none;

尺寸显示轮廓属性

width:设置元素的宽度

height:设置元素的高度

显示属性(display)        display: none 不显示        block:块级显示默认        inline:行级显示        inline-block:行级块

轮廓（outline）       绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

常用属性：        outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);        设置轮廓的样outline-color:red;        设置轮廓的颜色outline-width:10px设置轮廓的宽度

浮动属性

      浮动(float)的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在标准文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

clear 属性 规定元素的哪一侧不允许其他浮动元素。

left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧。

inherit 规定应该从父元素继承 clear 属性的值。

定位属性

静态定位（默认定位方式）static

相对定位(relative)

相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

绝对定位(absolute)

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是视窗本身。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于视窗本身。

固定定位(fixed)

元素框的表现类似于将 position 设置为 absolute，不过其位置相对于视窗本身。

CSS盒子模型

边框属性

border-style:边框样式，值有以下情况：             solid:实线             double:空心线             dashed:虚线组成的边框             dotted:圆点组成的边框

border-color:边框颜色

border-width:边框宽度

简写       border: 1px solid red;

外边距属性

margin:外间距,边框和边框外层的元素的距离

margin:四个方向的距离(top right bottom left) margin-top: margin-bottom: margin-left: margin-right:

内边距属性

padding:内间距,元素内容和边框之间的距离((top right bottom left))  padding-left: padding-right: padding-top: padding-bottom:

盒子模型的实际的宽度：width+2*（padding+border+margin）

盒子模型的实际的高度：height+2*（padding+border+margin）

CSS3扩展属性

1.border-radius

圆角属性        示例： border-radius: 25px;

2.box-shadow

用于向方框添加阴影        示例：box-shadow: 10px 10px 5px #888888;

3.background-size

属性规定背景图片的尺寸 <body style="text-align: center;         background:url(img/1.png);         background-size: 200px 300px;         background-repeat: no-repeat;"> </body>

4.background-image 为指定元素使用多个背景图像

5.text-shadow 可向文本应用阴影