bluemsun第一周预习

最新推荐文章于 2024-09-14 18:46:05 发布

lemdry

最新推荐文章于 2024-09-14 18:46:05 发布

阅读量1k

点赞数 27

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/lemdry/article/details/136919364

版权

一.html的结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>这里是标题</title>
</head>
 
<body>

</body>
 
</html>

二.常用标签

HTML标签分为单标签（如<hr> 只有一个）和双标签（如<p></p> 成对出现）两种。
<font>字体标签，双标签，用于展示效果中修饰文字样式

使用格式：<font 属性名="属性值">文字</font>

属性名：

size:控制字体大小.

color:控制字体颜色.

<br/>换行标签，用于展示效果换
<h1> </h1>：标题标签,有<h1>~<h6>,字体是默认加粗的。
<hr>水平线标签
<img src=“图片路径” alt=“替换文本”>：图片标签，文本在图片无法显现时显示。
<a href=“相对路径”> </a>：超链接标签，若相对路径处为“#”则代表空链接。
<p> </p>段落标签
<b> </b> <strong> </strong>加粗标签,其中strong标签为加强语气，更为广泛
<u> </u> 下划线标签
<s> </s> 删除线标签
<ol> </ol>有序列表标签，其中嵌套的标签项<li>是有序的
<ul> </ul>无序列表标签，其中嵌套的标签项<li>是无序的
&nbsp空格标签，用于展示效果中显示一个空白的位置

三.全局属性

1、accesskey属性

accesskey属性规定激活元素的快捷键。accesskey="accesskey",使用ALT+accesskey(shinft+alt+accesskey)来访问带有指定快捷键的元素。

2、id、class属性分别是为元素命名唯一id和类名。

3、tabindex属性

tabindex属性规定tab键控制次序(tab键用于导航时)，当按tab键时，元素聚焦的次序。tabindex="number"，"number"代表聚焦的次序

4、hidden属性

hidden属性规定元素为隐藏，表示该元素不相关，为布尔值。

5、contenteditable属性

contenteditable属性规定元素内容是否可编辑的，"true"表示可编辑，"false"表示不能编辑。

6、其它的全局属性，如：style、title、lang、spellcheck、translate、dir、draggable、dropzone等

四.CSS引入格式

1.行内样式

2.内嵌样式

3.外部样式

3.1.链接样式（推荐）

3.2.导入样式（不建议使用）

4. 链接式和导入式的区别

5.四种CSS引入方式的优先级

五.CSS选择器

1.元素选择器

2.类选择器

3.ID选择器

4.属性选择器

5.派生选择器

六.CSS简单样式

Css样式定义在样式表中
样式的定义方式
选择器{样式1：样式值1；样式2：样式值2；……}

样式表的分类

1、行内样式表
在html标记内，使用style属性定义css样式。
如：`<p style=”color:#00ffdc;”></p>`

2、内嵌式样式表将css添加到`<head>与</head>`之间。

<style></style>标记声明的一种样式。
　　语法如下：
<style>
　　/*这里写css内容*/
</style>

3、外部定义css样式表，通过`<link/>`链接标记链接到页面中的一种样式。

语法：

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

4、在外部定义css样式表，通过导入方式链接到页面中的一种样式。

语法：

<style>
　　 @import url();
</style>

七.简单定位方法

1.静态定位：

设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。

2.相对定位：

设置方式为position: relative;相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，相对定位的盒子是相对自己在标准流中的位置进行偏移，但是盒子在页面中占据的位置是不会改变的。

两个相对定位的盒子，默认的情况下第二个盒子层级比第一个盒子层级高，即第二个盒子可以覆盖第一个盒子，如果想让第一个盒子覆盖第二个盒子，可以通过设置z-index属性实现。

3.绝对定位：

设置方式为position: absolute;绝对定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，绝对定位的盒子是相对设置了定位属性（静态定位不算）的最近的父级盒子的位置进行偏移，如果没有设置了定位的父级盒子，则是相对于body标签进行偏移。

绝对定位的盒子可以通过设置z-index属性改变层级。

4.固定定位：

设置方式为position: fixed;固定定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动，固定定位的盒子永远显示在浏览器窗口，不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。

固定定位的盒子可以通过设置z-index属性改变层级。

固定定位的盒子默认的宽高由其内容决定。