web前端开发技术
2022-06-23 13:58:58 1 举报AI智能生成
web前端HTML及CSS模块最详细总结
作者其他创作
大纲/内容
HTML
HTML基础
结构
头部区域标签
1.<title>定义了文档的标题，该标题将显示在浏览器的标题中，收藏夹和搜索页面使用其作为标题
2.<base>描述了页面中的所有超链接的默认地址和默认目标。有两个关键属性：注意属性的值要用双引号圈起来
3.<link>通常用来说明css文档
4.<meta>用来描述文档的元信息。其中的值有，内容content，需要关联到http协议的http-equiv，还有名称name。
5.<script>用来定义javascript脚本
6.<style>标签用于为 HTML 文档定义样式信息。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
编写方法
1.打开电脑，在桌面新建一个记事本，然后打开记事本。
2.接着，在里面输入HTML语言，记得开头第一行要加上,缩进以一个“tab键”为标准，加上这些基本标签，在里面输入内容即可。
3.输入完成后，点击左上角的“文件”“另存为”，在“保存类型”中选择“所有文件”。
4.然后将文件名更改成“XXXX.html”的格式，选择好保存的地址，点击保存。接着就生成了我们开始看到的文件。
5.打开文件后，一个最简单的网页就出现了，有标签还有内容。
6.如果要更改html文件的内容，则只需编辑html文件的打开方式，用记事本打开，则可在里面修改
2.接着，在里面输入HTML语言，记得开头第一行要加上,缩进以一个“tab键”为标准，加上这些基本标签，在里面输入内容即可。
3.输入完成后，点击左上角的“文件”“另存为”，在“保存类型”中选择“所有文件”。
4.然后将文件名更改成“XXXX.html”的格式，选择好保存的地址，点击保存。接着就生成了我们开始看到的文件。
5.打开文件后，一个最简单的网页就出现了，有标签还有内容。
6.如果要更改html文件的内容，则只需编辑html文件的打开方式，用记事本打开，则可在里面修改
常用文本标签
段落和换行标签
换行在浏览器中，浏览器在显示网页时，完全采用HTML标记来进行解释的，会自动忽略多余的空格以及空行！在HTML文件中，无论你输入多少空格，都只能识别1个空格。在HTML中如果需要换行，请使用<br/>,如果需要添加空格，请你输入
<strong> 标签：和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了
em：em标签的作用是告诉浏览器把其中的文本表示为强调的内容。语法格式为“需要强调的内容”，对于所有浏览器来说，这意味着要把这段文字用斜体来显示
span：是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。
空格、特殊字符的输入及注释
HTML中注释格式：<!-- 被注释的内容 -->
文档结构标签
header:该标签用于定义页面或内容区域的头部消息
article:用于表示页面中一块独立的、完整的相关内容块，可独立与页面其他内容使用
section:用于对页面上的内容进行分块，例如将文章分为不同的章节、页面内容分为不同的内容块
nav:用于定义页面上的各种导航条，一个页面中可以拥有多个nav标签，作为整个页面或不同部分内容的导航.
aside:用于定义当前页面或当前文章的附属信息部分，可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条等内容，通常放在主要内容的两侧，因而也称侧边栏内容。
footer：主要用于为页面或某篇文章定义脚注内容，包含了于页面、文章或是部分内容有关的信息，比如文章的作者或者日期，页面的版权、使用条款和链接等内容
插入多媒体内容
设置背景音乐<bgsound>
<bgsound src="路径/文件名称" loop="循环次数">
<--loop默认情况下，背景音乐播放一次；如果取值为-1，则表示背景音乐循环不断地播放-->
嵌入音视频文件<embed>
<embed src="路径/文件名称"></embed>
属性 说明
src 文件路径
width 以像素为单位定义嵌入式对象的宽度
height 以像素为单位定义嵌入式对象的宽度
loop 设置嵌入式对象的播放是否循环不断，取值true时循环不断，否则只播放一次，默认值是false
hidden 设置多媒体播放软件的可视性，默认值是false
<bgsound src="路径/文件名称" loop="循环次数">
<--loop默认情况下，背景音乐播放一次；如果取值为-1，则表示背景音乐循环不断地播放-->
嵌入音视频文件<embed>
<embed src="路径/文件名称"></embed>
属性 说明
src 文件路径
width 以像素为单位定义嵌入式对象的宽度
height 以像素为单位定义嵌入式对象的宽度
loop 设置嵌入式对象的播放是否循环不断，取值true时循环不断，否则只播放一次，默认值是false
hidden 设置多媒体播放软件的可视性，默认值是false
列表、div标签和元素类型
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法：
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法：
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
超链接
<a></a>标签表示超链接，可以跳转到指定网页和位置
表格
<table></table> 定义表格
<tr></tr> 定义行
<th></th> 定义表头
<td></td> 定义单元格
<caption></caption> 定义表格标题
<tr></tr> 定义行
<th></th> 定义表头
<td></td> 定义单元格
<caption></caption> 定义表格标题
表格有两种线：边框(border)与分割线(rules)
属性边框(border)<table border="3"> …… </table> 0-表示无网格, 3-表示边框宽度3像素,
属性rowspan与colspan扩展单元格, 即合并单元格
属性align与valign（HTML5不再支持）布局格式, 可作用于<tr>, <th>以及<td>标签
align表示水平方向的对齐方式 取值left(默认), right, center
valign表示垂直方向的对齐方式取值top, bottom, middle, baseline
用法：<td align="left" valign="top"> ... </td>
属性cellpadding与cellspacing （HTML5不再支持）
cellspacing指定单元格与单元格之间的距离
cellpadding指定单元格内部与单元格边框的距离
属性边框(border)<table border="3"> …… </table> 0-表示无网格, 3-表示边框宽度3像素,
属性rowspan与colspan扩展单元格, 即合并单元格
属性align与valign（HTML5不再支持）布局格式, 可作用于<tr>, <th>以及<td>标签
align表示水平方向的对齐方式 取值left(默认), right, center
valign表示垂直方向的对齐方式取值top, bottom, middle, baseline
用法：<td align="left" valign="top"> ... </td>
属性cellpadding与cellspacing （HTML5不再支持）
cellspacing指定单元格与单元格之间的距离
cellpadding指定单元格内部与单元格边框的距离
表格分块
表格实际结构化分为：表头，主体，表尾，标题
表头<thead>,主体<tbody>,表尾<tfoot>,标题<caption>
表格实际结构化分为：表头，主体，表尾，标题
表头<thead>,主体<tbody>,表尾<tfoot>,标题<caption>
创建表单
CSS
css常用属性
字体属性
font-style：字体（斜体）
font-variant ：字体的变化（大小写）
font-weight ：字体粗细
font-size：字体大小
font –family：字体名称
font-variant ：字体的变化（大小写）
font-weight ：字体粗细
font-size：字体大小
font –family：字体名称
边框属性
border-radius：创建圆角边框
box-Shadow：附加一个或者多个下拉框的阴影
border-image（不支持IE）：使用图像创建一个边框
box-Shadow：附加一个或者多个下拉框的阴影
border-image（不支持IE）：使用图像创建一个边框
表格属性
1、尺寸属性（width height）
2、边框属性 （border）
3、文本格式化属性 （font-size color …）
4、背景属性 （background）
5、框模型属性（margin不能用在 td 上，只能用在 table 上）
6、vertical-align：top / center / bottom
2、边框属性 （border）
3、文本格式化属性 （font-size color …）
4、背景属性 （background）
5、框模型属性（margin不能用在 td 上，只能用在 table 上）
6、vertical-align：top / center / bottom
文本相关属性
主要包含颜色color、对齐方式text-algin、修饰效果text-decoration，行高line-height
显示相关属性
text-shadow：适用于文本阴影，可以指定是水平阴影还是垂直阴影、模糊的距离以及阴影的颜色。
box-shadow：适用于盒子阴影。可以在::after和::before两个伪元素中添加阴影效果。
text-overflow：文本溢出属性指定应向用户如何显示溢出内容
有两个属性：ellipsis（以省略号的形式隐藏内容）和clip（直接截断内容）
word-wrap：强制换行，但是单词中间不换行
word-break：单词可进行拆分然后换行
显示相关属性
text-shadow：适用于文本阴影，可以指定是水平阴影还是垂直阴影、模糊的距离以及阴影的颜色。
box-shadow：适用于盒子阴影。可以在::after和::before两个伪元素中添加阴影效果。
text-overflow：文本溢出属性指定应向用户如何显示溢出内容
有两个属性：ellipsis（以省略号的形式隐藏内容）和clip（直接截断内容）
word-wrap：强制换行，但是单词中间不换行
word-break：单词可进行拆分然后换行
显示相关属性
隐藏元素的方法：
（1)Display:none,可以隐藏，并且不占位置
（2)visibility: hidden; 可以隐藏，但是位置还在
Display可以设置元素的显示模式
Display: inline-block变成行内块标签：可以设置width和height，不会占满一行
Display: inline变成行内标签，width和height设置无效，其空间取决于内容
Display: block
（1)Display:none,可以隐藏，并且不占位置
（2)visibility: hidden; 可以隐藏，但是位置还在
Display可以设置元素的显示模式
Display: inline-block变成行内块标签：可以设置width和height，不会占满一行
Display: inline变成行内标签，width和height设置无效，其空间取决于内容
Display: block
背景属性
background-image：添加背景图片。不同的背景图像和图像用逗号隔开。
background-size：指定背景图像的大小，可指定像素或者百分比的大小，是相对于父元素的宽度和高度的百分比的大小。
background-origin：指定了背景图像的位置区域
background-clip：背景裁剪属性是从指定位置开始绘制。
background-size：指定背景图像的大小，可指定像素或者百分比的大小，是相对于父元素的宽度和高度的百分比的大小。
background-origin：指定了背景图像的位置区域
background-clip：背景裁剪属性是从指定位置开始绘制。
动画属性
盒子模型
Margin：外边距，清除边框外的区域，外边距是透明的。
Border：边框，围绕在内边距和内容外的边框。
Padding：内边距，清除内容周围的区域，内边距是透明的。
Content：盒子的内容，显示文本和图像
Border：边框，围绕在内边距和内容外的边框。
Padding：内边距，清除内容周围的区域，内边距是透明的。
Content：盒子的内容，显示文本和图像
网页元素css排版
浮动排版
float:left或者right或者none或者inherit
left：让元素向左浮动
right：让元素向右浮动
none：让元素不浮动
inherit：让元素从父级继承浮动属性
left：让元素向左浮动
right：让元素向右浮动
none：让元素不浮动
inherit：让元素从父级继承浮动属性
清除浮动
clear属性值：
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
定位排版
1. position: relative;相对定位
2. position: absolute;绝对定位
3. position: fixed;固定定位
fixed生成固定定位的元素，相对于浏览器窗口进行定位。
4. position:static：默认值
默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5. position: sticky 粘性定位
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
6. position: inherit
规定应该从父元素继承 position 属性的值。
7. posiyion: initial
initial 关键字用于设置 CSS 属性为它的默认值。
initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。
2. position: absolute;绝对定位
3. position: fixed;固定定位
fixed生成固定定位的元素，相对于浏览器窗口进行定位。
4. position:static：默认值
默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5. position: sticky 粘性定位
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
6. position: inherit
规定应该从父元素继承 position 属性的值。
7. posiyion: initial
initial 关键字用于设置 CSS 属性为它的默认值。
initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。
0 条评论
下一页
