HTML基础学习,，基础的语法规则和使用

最新推荐文章于 2021-06-17 07:28:49 发布

刘豆豆呀

最新推荐文章于 2021-06-17 07:28:49 发布

阅读量349

点赞数

分类专栏：爪洼学习文章标签： html

本文链接：https://blog.csdn.net/weixin_43907440/article/details/106314670

版权

这篇博客介绍了HTML和CSS的基础知识，包括HTML的超文本标记语言概念、W3C标准，以及CSS的选择器、美化网页元素、盒子模型和定位等内容。特别强调了CSS的三种导入方式和属性选择器的重要性。

摘要由CSDN通过智能技术生成

HTML

HTML:超文本标记语言Hyper Text Markup Language——HTML5

W3C：万维网联盟 World Wide Web Consortium

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cXEuMwyo-1590301700382)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503145102188.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qC7TszE3-1590301700384)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503152815474.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bLrzpN9m-1590301700385)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503155529274.png)]

块元素：比如换行，段落，标题等都会自动更换行，一行内无法显示多个

行内元素：不添加换行分段等操作的时候标签可以在一行内展现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r13Hiz7O-1590301700386)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503161022389.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PYnZKvrm-1590301700387)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503164536121.png)]

表单元素属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jtiQbsgU-1590301700387)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503183922539.png)]

CSS

HTML+CSS+JavaScript

结构+表现+交互

如何学习：
1：CSS是什么

2：CSS怎么用

3：CSS选择器（♥♥♥♥♥）

4：美化网页（文字，阴影，超链接，列表，渐变）

5：盒子模型

6：浮动

7：定位

8：网页动画（特效效果）

1.1、什么事CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

1.2、发展史

CSS 1.0

CSS 2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变简单 SEO

CSS 2.1 浮动定位

CSS 3.0 圆角，阴影，动画…浏览器兼容性

1.3、快速入门

CSS和HTML嵌套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写CSS代码-->
    <!--语法：
      选择器{
         声明1：
         声明2；
         声明3；
      }
      每个声明用“；”结尾
    -->
    <style>
        h1{
    
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标签</h1>
</body>
</html>

CSS和HTML分离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NMvKzU9n-1590301700388)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200504083230458.png)]

CSS优势：
1：内容和表现分离

2：网页结构表现同意，可以实现复用

3：样式十分丰富

4：建议使用独立于html的CSS文件

5：利用SEO，容易被搜索引擎收录

1.4、CSS的三种导入方式

行内样式，内部样式，外部样式，三者的优先级按照就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
    
            color: red;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<!--三种样式的优先级：就近原则，谁离标签近就显示谁-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: yellowgreen">我是标签</h1>
</body>
</html>

拓展，外部样式两种写法

链接式

html

    <!--外部样式-->

最低0.47元/天解锁文章

刘豆豆呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习,，基础的语法规则和使用

HTMLHTML:超文本标记语言Hyper Text Markup Language——HTML5W3C：万维网联盟 World Wide Web Consortium[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cXEuMwyo-1590301700382)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20200503145102188.png)][外链图片转存失败,源站可能有防盗链机制
复制链接

扫一扫