Web编程设计

置顶爱吃芒果的小孩

已于 2023-01-07 14:16:21 修改

阅读量107

点赞数 3

分类专栏： web 文章标签： html css web

于 2023-01-06 22:45:57 首次发布

本文链接：https://blog.csdn.net/qq_73221795/article/details/128585036

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML

超文本标记语言
特点：用来描述网页的信息和结构，用开始和结构标签包围文本内容，把每个标签的名字称为元素
语法：<元素>内容</元素>
块元素：
段落（p）：<p> </p>
标题（h1-h6）：<h1> </h1>
水平线（hr）：<hr />
注释：不能嵌套 <!-文本-->
行内元素：
图像（img）：src属性指出图片的URL(网址)，alt属性描述图片
链接（a）：href属性指定目标URL(绝对or相对)
换行（br）：<br />
强调（em，strong）：<em><em/>倾斜 <strong></strong>加粗
列表：
无序列表：ul 代表一个无序列表，li 代表列表中一个单独的项
有序列表：ol 代表一个项目编号列表
定义列表：dl表示列表术语的定义 dt表示每一个术语 dd对应的术语描述
表格：
table：表格 caption：表标题 tr：行 td：单元格 th：列标题
引用：
块引用：<blockquote> </blockquote>
行内引用：<q> </q>
字符实体引用：&实体名 &#实体数
预格式化文本：<code> </code> <pre> </pre>
音频：<audio src=""> </audio>
视频：<vidio src=""> </vidio>
HTML5：

css

层叠样式表
特点：控制网页样式并允许样式信息与网页分离
外观布局：CSS 内容：HTML
语法：单选择器：selector{ property: value; ...... property: value; }
多选择器：selector1,selector2......,selectorN{ property: value; ...... property: value; }
引入方式：
行内引入：连在一块
内嵌式引入：把样式文件放在head中，通过style加入具体样式
链接式引入：<link href=“style.css” type="text/css" rel="stylesheet" />
优先级：行内>内嵌>链接
注释：/* */
颜色：color文本前景色 background-color元素的背景色
表示方法：预定义的颜色名称orange
RGB颜色代码rgb(255,165,0)
十六进制颜色代码#ffa500
半透明RGBA代码rgba(255,165,0,0.5) (CSS3)
HSL代码HSL(128,128,64) (CSS3)
标准颜色名称aqua(浅绿)
Font属性：font-family字体名称 font-size字体尺寸 font-weight加粗 font-style倾斜
text属性：text-align水平对齐方式 text-decoration下划线 text-indent缩进 text-shadow阴影
background属性：background-image图片 background-repeat重复 background-position位置
list属性
样式继承与冲突：多种样式应用将被继承最后显示最近的样式(后面的优先)
ID和ID选择器：每个元素只能有唯一ID
类和类选择器：class可以多次被使用以 . 开始伪类选择器以：开始
上下文选择器：
后代选择器（包含选择器）外部选择器内部选择器{property:value;}
子元素选择器：外部选择器>内部选择器{property:value;}
页面布局：
->盒模型：每个元素的布局由四部分组成：
元素的内容显示区、围绕着元素的边界、内容和边界的距离、边界和其他内容外边界的距离
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
float属性：浮动使元素向左或向右移动，其周围的元素也会重新排列。
清除浮动：使用clear属性：指定元素的哪一侧不能出现浮动元素
position定位：
static：默认值
relative：相对于其正常位置的偏移量
absolute：绝对定位相对于static定位以外的第一个父元素进行定位
fixed：绝对定位相对于浏览器窗口进行定位
diaplay属性：
隐藏元素：display:none 或 visibility:hidden(后者仍会占用空间)
opacity属性：透明度