html+css基础1

最新推荐文章于 2023-02-10 11:25:35 发布

快乐的小小编

最新推荐文章于 2023-02-10 11:25:35 发布

阅读量434

点赞数

分类专栏： html+css 文章标签： html基础 css基础 css盒子

本文链接：https://blog.csdn.net/xiaobianjava/article/details/48576473

版权

html+css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

（1）web前端主要包括：

1.html 文档标记语言，属于页面的结构

2.css 层叠样式表，属于样式修饰页面结构的

3.js 网页脚本语言，主要是增加用户与页面的交互行为

（2）html

<!DOCTYPE html>
<!--文档类型声明-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--
    主要用来提供有关页面的元信息，比如针对浏览器引擎和更新频度的描述和关键词，
    位于文档的头部，标签属性用来定义了与文档相关联的名称/值对。

    指定浏览器以utf-8的形式来解析此文本，所以文本文件的编码方式要和此相对应。
    保证文本文件的编码与浏览器解析的编码方式相对应
  -->
  <title>index</title>
</head>
<body>
  <h1>index首页</h1>
</body>
</html>

（3）css

css样式表放的位置有3种;

1.行间样式表，拥有最高的优先级

2.内部样式表

3.外部样式表

三种样式表中以行间样式表为最高优先级，内部样式表和外部样式表，根据浏览器加载文本时的顺序来确定，相同属性名称的以后出现的为主，

但是如果css样式中含有!important的话，相同的命名规则最后一个!important优先。

（4）css 样式零碎

1.padding 内边距 : 会影响盒子本身的大小

2.margin 外边距：

a. 上下外边距会叠压

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
  <style>
    .div1{
      width: 100px;
      height: 100px;
      background: red;
      margin-bottom: 30px;
    }
    .div2{
      width: 100px;
      height: 100px;
      background: green;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
</body>
</html>

b.父子级包含的时候子级的margion-top会传递给父级

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
  <style>
    .div1{
      width: 200px;
      height: 200px;
      background: red;
      margin-top: 30px;
    }
    .div2{
      width: 100px;
      height: 100px;
      background:green;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2"></div>
  </div>
</body>
</html>

在使用上：尽量使用内边距，用父级的内边距替代子级的外边距

3.盒子居中显示

margion：0 auto

4.盒子模型

盒子大小= border + padding + width/height

5.文字属性：

font-size 文字大小（一般均为偶数）
font-family 字体（中文默认宋体）
color 文字颜色（英文、rgb、十六位进制色彩值）
line-height 行高
text-align 文本对齐方式
text-indent 首行缩进（em缩进字符）
font-weight 文字着重
font-style 文字倾斜
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距（以空格为解析单位）

6.html标签 <a> 锚点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>锚点</title>
</head>
<body>
  <div>
    <a href="#top">顶部</a>
    <a href="#mid">中间</a>
    <a href="#bottom">底部</a>
    <div id="top" style="height: 1000px">顶部</div>
    <div id="mid" style="height: 1000px">中间</div>
    <div id="bottom" style="height: 1000px">底部</div>
  </div>
</body>
</html>

7.浅析SEO：搜索引擎优化

a.页面标签语义化

b.使用SEO有利的标签：h1/h2/h3/strong/em.....

c.提高页面关键词密度

8.css选择符：

群组：

#id1 , #id2....(逗号分隔)

包含选择符：

div p { }

9.css伪类

a:link 未访问

a:hove 鼠标悬停

a:active 链接激活

a:visited 访问过后

快乐的小小编

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css基础1

（1）web前端主要包括：1.html 文档标记语言，属于页面的结构2.css 层叠样式表，属于样式修饰页面结构的3.js 网页脚本语言，主要是增加用户与页面的交互行为（2）html <!-- 主要用来提供有关页面的元信息，比如针对浏览器引擎和更新频度的描述和关键词，位于文档的头部，标签属性用来定义了与文档相关联的名称/
复制链接

扫一扫

专栏目录