简单了解html和css
2024-03-07 09:27:22 0 举报AI智能生成
登录查看完整内容
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两种基本技术。HTML是一种标记语言，用于创建网页的结构，包括文本、图片、链接等元素。而CSS则是一种样式表语言，用于描述网页的外观和布局，如颜色、字体、间距等。通过HTML和CSS的结合使用，可以创建出具有丰富内容和吸引人的视觉效果的网页。
作者其他创作
大纲/内容
HTML全称：Hyper Text Markup Language(超文本标记语言)
简单一句话：HTML是一门用来创建网页的标记语言。
HTML概述
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。
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的发展
<!--文档声明：告诉浏览器使用HTML5版本 --><!DOCTYPE html><html>
<!--网页的头部 --> <head>
<!--设置页面的字符集编码 --> <meta charset=\"utf-8\" />
<!--设置页面的标题 --> <title>第一页面</title>
</head> <!--网页的主体 -->
<body> <!--需要展示的信息-->
页面内容 </body></html>
HTML基本结构
HTML简介
<html></html>:根标签 \t
<head>：头标签\t\t \t \t <title></title>:页面的标题\t\t </head>\t
<body></body>：主体标签：网页内容
属性：\t\t color:文本的颜色 <font color=\"red\">内容</font> bgcolor:背景色\t\t<body bgcolor=\"bisque\"> </body> background:背景图片
颜色的表示方式： 第一种方式：使用颜色名称: red green blue\t 第二种方式：RGB模式 #000000 #ffffff #325687 #377405
结构标签
注释标签：<!--注释-->
换行标签：<br/>
段落标签：<p>文本文字</p> \t 特点：段与段之间有行高（行间距） 自带换行。\t 属性：align对齐方式\t(left：左对齐 center：居中 right：右对齐)
水平线标签:<hr/> 属性: width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示) \t size: 水平线的粗细 (像素表示，例如：10px) color:水平线的颜色 align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
排版标签
<h1></h1>—-<h6></h6> 随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行
标题标签
<div></div>:块级标签，独占一行，换行
<span></span>:行级标签，所有内容都在同一行 作用： <div></div>:主要是结合css页面分块布局 <span></span>:进行友好提示信息
容器标签
ul （unorder list）
无序列表
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\"
链接标签
查询xxx表中所有信息SELECT * FROM xxx;看起来便捷，效率低，可读性差SELECT 所有列名 FROM xxx;
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
(th)表格的表头
colspan 属性 表格的列合并
rowspan属性 表格的行合并
表格标签
<b> \t定义粗体文本。 <big> \t定义大号字。 <em> \t定义着重文字。 <i> \t定义斜体字。 <small> \t定义小号字。 <strong> \t定义加重语气。 <sub> \t定义下标字。 <sup> \t定义上标字。 <ins> \t定义插入字。 <del> \t定义删除字。
文本格式化标签
HTML基本标签
常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理 method:请求方式：get 和post enctype:表示是表单提交的类型\t\t\t 默认值：application/x-www-form-urlencoded 普通表单 multipart/form-data 多部分表单(一般用于文件上传) text/plain 普通文本
post： 1.地址栏没有数据：请求参数单独处理。 2.安全可靠 3.效率低 4.post请求大小理论上无限。使用情况：一般用于插入修改等操作\t
form标签
type: 以下为type可能要取的值： 1.1 text 文本框 输入内容 1.2 password 密码框 密文或者掩码 1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据表示同一组中只能选中一个( checked =\"checked\" 表示选中) 1.4 checkbox 表示多选 ，name必须一致，表示同一组中可以选多个，返回值是个数组( checked =\"checked\
name属性：表单元素名字，只有name属性才能提交给服务器。
value属性：提交给服务器的数据
placeholder：提示信息
input标签
<!--select标签添加该属性multiple=\"multiple\"表示多选 、size表示显示的个数-->
<!--option表示下拉列表项-->
<!--selected=\"selected\"表示选中该项-->
select 元素
需要指定输入的区域位置大小
<textarea cols=\"100\" rows=\"5\"> 表示5行100列的区域可以输入内容，该元素没有value属性
textarea元素
HTML表单标签
框架结构标签，把body删掉，使用framset代替body
框架结构标签（<frameset>）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/cols 的值规定了每行或每列占据屏幕的面积
frameset
frame 标签定义了放置在每个框架中的 HTML 文档。
frame
1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
2. 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize=\"noresize
3 frameset的属性 frameborder=\"1|0|yes|no\" 表示是否有边框 border=\"1\" 表示边框的粗细 bordercolor表示边框颜色
基本的注意事项
HTML框架标签
<!--该网页的关键字-->\t\t<meta name=\"keywords\" content=\
<!--该网页的描述-->\t\t<meta name=\"description\" content=\"this is my page\">
<!--该网页的编码-->\t\t<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\"> html4.01
<!--该网页的编码--> <meta charset=\"UTF-8\"> html5
<!-- href：引入css文件的地址-->\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"./styles.css\">
<!--src：js的文件地址-->\t\t<script type=\"text/javascript\" src=\"\"></script>
其它标签
< 小于号 < > 大于号 > & 与字符 & \" 引号 " ® 己注册 ® © 版权 © ™ 商标 ™ 空格
特殊字符
HTML的其它标签和特殊字符
HTML
层叠样式表(英文全称：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简介
把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：<div style=\"color:blue;font-size:50px\">This is my HTML page. </div>
好处:可以单独设置某个元素样式，缺点：不利于样式重用
内联方式
好处：可以控制页面中多个元素样式，缺点：只能一个页面使用
内部方式
将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标签{属性:属性值}，
<style type=\"text/css\"> span{color: red;font-size: 100px}</style>
标签选择器
给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}
具体示例如下:创建id选择器： <div id=\"s1\
id选择器
给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: \t.class名{属性:属性值}
创建class选择器： <div class=\"s1\
备注:以上基本选择器的优先级从高到低:id >class >标签
class选择器
格式为: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 span{....} 表示 div中有一个span， span是子代 相邻兄弟 div+ p 表示div同级别后边的相邻的p标签 通用兄弟 div~p 表示div同级别后边的所有的p标签
层级选择器
基本选择器
CSS选择器
1>.font-size:设置字体大小
4>.font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。 100 对应最细的字体变形，900 对应最粗的字体变形。 数字 400 等价于 normal，而 700 等价于 bold。备注： 斜体（italic）是对每个字母的结构有一些小改动，来反映变化的外观。 倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
简写： font: italic bold 30px \"幼圆\
文字属性
1>.color:设置文本颜色
3>.text-decoration: none:会关闭原本应用到一个元素上的所有装饰 underline: 添加下划线 overline:在文本的顶端画一个上划线 line-through:在文本中间画一个贯穿线 blink:让文本闪烁(无效果)
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); \t
背景属性
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)
元素框的表现类似于将 position 设置为 absolute，不过其位置相对于视窗本身。
固定定位(fixed)
定位属性
CSS属性
border-style:边框样式，值有以下情况： solid:实线 double:空心线 dashed:虚线组成的边框 dotted:圆点组成的边框
border-color:边框颜色
border-width:边框宽度
简写 border: 1px solid red;
边框属性
margin:四个方向的距离(top right bottom left)margin-top:margin-bottom:margin-left:margin-right:
外边距属性
盒子模型的实际的宽度：width+2*（padding+border+margin）
盒子模型的实际的高度：height+2*（padding+border+margin）
内边距属性
CSS盒子模型
1.border-radius
圆角属性 示例：\tborder-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;\">\t</body>
4.background-image为指定元素使用多个背景图像
5.text-shadow可向文本应用阴影
CSS3扩展属性
CSS
JavaWeb
0 条评论
回复 删除
下一页
