前端初学之准备篇（二）

最新推荐文章于 2022-08-19 10:14:29 发布

梨花不负韶

最新推荐文章于 2022-08-19 10:14:29 发布

阅读量74

点赞数

分类专栏：前端学习篇文章标签： html css html5 前端 css3

本文链接：https://blog.csdn.net/emmmmm__/article/details/110942581

版权

前端学习篇专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML与CSS基本语法与结构

一、html基本语法与结构

1、html定义与后缀名

hyper text markup language （超文本标记语言），不是编程语言
.html

2、html基本语法

标签结构：
- 开始标签开始，结束标签结束，内部可以包含文字或者其他标签。
  - 例如：<html><\html> <body><body>
- 空标签，只有开始标签，没有结束标签。
  - 例如：<hr> <br>

<关键字>
    文字内容
    <关键字>
    	文字内容
	</关键字>
</关键字>

标签属性：标签的属性只能设置在开始标签
- 例如：<div class="box"><\div>

3、html基本结构

<!-- 不是标签，是一个声明，告诉浏览器以那种规范解析文档，此为html5的写法 -->
<!DOCTYPE html> 
<!-- html是文档的最大标签 -->
<html lang="en">

<!-- head 头部标签，内部写：css样式，元信息，标题 -->
<head>

    <!-- 
        设置字符编码格式
        gb2312 中文简体
        GBK 中文简体和繁体
        UTF-8 万国码 中英日法韩
     -->
    <meta charset="UTF-8">

    <!-- 配置窗口信息（移动端需配置） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 文档标题 -->
    <title>Document</title>
</head>
<body>
    <!-- body身体标签，内部写，所有文档结构标签 -->
</body>
</html>

二、语义化

概念：运用合适的标签和特定的属性去格式化文档（合适标签和属性要用在合适的场合）
优点：
- 易于开发和维护
- 用户体验比较好
- 易于seo,易于爬虫抓取关键字，能和搜索引擎建立良好的沟通。
- 即使在没有css样式的情况下，也能呈现良好的效果

三、css

1、css简介

cascanding style sheets （层叠样式表）（级联样式表）
作用：
- 文本内容：文本大小，文本颜色，对齐方式。。。。
- 标签的样式：背景色，边框宽度颜色
- 页面的布局：浮动，定位

2、css引入方式——三种

行内式
- 行内式只作用于当前标签
- ```
<div style="width: 200px;height: 200px;background-color: red;">1</div>
```
- 特点：代码冗余，结构层与表示层不分离。

内嵌式（文本内部引入）

只作用于当前文档

<head>
    <style>
        /* 标签选择器 */
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

特点：代码相对清晰，结构层与表示层不完全分离

外链式（文本外部引入）
- 可以作用于任何文档，需要link标签引入
- ```
<link rel="stylesheet" href="./css/index.css">
```
- 特点：代码非常清晰，结构层与表示层完全分离
行内式最优先，内嵌式和外链式后引入生效

3、css语法

属性名：属性值；属性名：属性值；属性名：属性值；属性名：属性值；。。。
属性名：属性值；-----一个css样式声明
color:red;

4、基础选择器

通配符选择器
- 格式：
  
  * {
  
  属性名:属性值;
  
  属性名:属性值;
  
  属性名:属性值;
  
  ……
  
  }
  
  * 代表所有标签

* {
	 width: 200px;
     height: 200px;
     background-color: yellow;
}

标签选择器
- 格式：
  
  关键字 {
  
  属性名:属性值;
  
  属性名:属性值;
  
  属性名:属性值;
  
  ……
  
  }

div {
	 width: 200px;
     height: 200px;
     background-color: yellow;
}

类选择器
- 格式：
  
  .类名 {
  
  属性名:属性值;
  
  属性名:属性值;
  
  属性名:属性值;
  
  ……
  
  }

.box {
	background-color: red;
}

id选择器
- 格式
  
  #id名 {
  
  属性名:属性值;
  
  属性名:属性值;
  
  属性名:属性值;
  
  ……
  
  }

#div1 {
	font-size:20px;
}

优先级
- id选择器>类选择器>标签选择器>通配符选择器

梨花不负韶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端初学之准备篇（二）

前端初学之HTML篇一、html基本语法与结构html定义与后缀名hyper text markup language （超文本标记语言），不是编程语言 .htmlhtml基本语法标签结构：开始标签开始，结束标签结束，内部可以包含文字或者其他标签。例如：<html><\html> <body><body> 空标签，只有开始标签，没有结束标签。例如：<hr> <br> &..
复制链接

扫一扫