HTML初识

最新推荐文章于 2024-05-03 16:09:15 发布
最新推荐文章于 2024-05-03 16:09:15 发布
阅读量137 收藏
点赞数
分类专栏： html 样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tw368WJZ/article/details/79381887
版权
html 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
样式
2 篇文章 0 订阅
订阅专栏

HTML初识

1.什么是html
超文本标记语言
</>
标记分两种:单标记 双标记
标记特点:要闭合 大小写不敏感 有属性
标记语法<标记名 属性名="属性值"/>
双标记语法<前标记名 属性名 = "属性值"></后标记>

html模板
1.版本控制
2.html文档控制
3：文档包含头部(head)和身体(body)
4：头部包含编码格式(meta utf-8)和标题（title）
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一天</title>
    <!-- style标记是在html文档中创建一块书写css的区域 -->
    <style>
        div{
            border: 10px red solid;
        }
        span{
            border: 2px blue solid;
        }
    </style>
</head>
<body>
    <!-- body内部只允许包含标签 -->
    <div>asdasdasda1</div>
    <div>asdasdasda2</div>
    <div>asdasdasda3</div>
    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span>
</body>
</html>

2.css层叠样式表单

css语法：
    样式名称:样式值;

样式：
    边界：
        border：给当前标记设置边界(默认上下左右)
        border-left: 给当前标记设置左边界
        border-right: 给当前标记设置右边界
        border-top: 给当前标记设置上边界
        border-bottom: 给当前标记设置下边界

        border-width: 给当前标记设置边界粗细 ex:1px
        border-left-width: 
        border-right-width: 
        border-top: 
        border-bottom: 


        border-color: 给当前标记设置边界颜色 ex:red
        border-left: 
        border-right: 
        border-top: 
        border-bottom: 

        border-style: 给当前标记设置边界的类型  ex:dotted
                    solid 实线
                    dotted 点状线
                    dashed 虚线
        border-left: 
        border-right:       
        border-top:
        border-bottom: 


        组合写法：
        border:border-width border-color border-style

3.常用css引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入外部文件的标记 可以引入多个样式表-->
    <link rel="stylesheet" href="index.css"/>
</head>
<body>
    <div>我是div</div>
</body>

3.文本样式

     文本颜色 color:颜色值; 
     文本位置 text-align:left(靠左对齐，默认) | right(靠右对齐) | center(居中对齐); 
     字号大小 font-size:;单位是px 
     文本修饰 text-decoration:underline(下划线)| line-through(中划线)

     div{
    border: 1px red solid;
    width: 400px;
    height: 400px;
    color: yellow;
    text-align: center;
    font-size: 40px;
    text-decoration: line-through;
}

4.样式-尺寸

     width:样式标签的宽度 单位是px
     height:样式标签的高度 单位是px 
     尺寸样式 块级标签支持，行级标签不支持

5.选择器优先级

        选择器的优先级
        1：标签(名)选择器
        2：id选择器
        3：class选择器
        4：后代选择器

        优先级
        1：相同选择器，样式冲突的情况下，后面覆盖前面

        标签(名)选择器优先级是1
        类选择器的优先级是10
        id选择器的优先级是100
        style行间样式的优先级是1000
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        #div1{
            border: 10px red solid;
        }
        .div1{
            border: 2px black solid;
        }

        div div div div div div div div div div div{
            border: 2px red solid;
        }

    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div style="border:1px yellow solid;" class="div1" id="div1">
                                                我是div11
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

6.1基础选择器-后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*基础选择器-后代选择器*/

        #div1 .div5{
            border: 1px red solid;

        }
    </style>
</head>
<body>
    <div id="div1">
        <div>
            <div>
                <div>
                    <div class="div5">
                        wo shi div5
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

6.2类选择器

        一个标记可以起多个class名，建议不超过7个
        所有的div都需要3px red solid,但是第三个div,要求颜色是蓝色的
        优点：可以减少代码冗余，把相同样式的标记总结在一起
        缺点：会略微的破坏html结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        .hongse{
            border: 3px red solid;
        }
        .wangermazi{
            border: 5px gold dotted;
        }
        .lanse{
            border: 3px blue solid;
        }

    </style>
</head>
<body>
    <div class="hongse zhangsan lisi wangermazi">我是div1</div>
    <div class="hongse">我是div2</div>
    <div class="lanse">我是div3</div>
    <div class="hongse">我是div4</div>
</body>
</html>

6.4id选择器

        #id名称{}
        特点：唯一性
        优点：可以逐个控制标记，互相的样式的不影响
        缺点：唯一性，冗余代码多。
        使用场景：JS钩子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        #liergou{
            border: 3px red solid;
        }
        #wangdamao{
            border: 10px black dashed;
        }
        #datupiaozi{
            border: 6px gold dotted;
        }
    </style>
</head>
<body>
    <div id="liergou">我是div1</div>
    <div id="wangdamao">我是div2</div>
    <div id="datupiaozi">我是div3</div>
    <!-- id一定要唯一 -->
    <span id="liergou">我是span</span>
</body>
</html>
Tw368WJZ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5初识
weixin_48152652的博客
04-07 1194
初识HTML HTML（Hyper Text Markup Language）俗称超文本标记语言 HTML发展史：目前已经发展到HTML5版本 HTML5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素，特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形，图表，图像和动画，以及不需要安装任何插件直接使用网页播放视频等。 W3C World Wide Web Consortium(万维网联盟) 成立于1994年，Web技术领域最权威和具影响力的国际中立
HTML初识基础认知 + HTML标签
12-05
HTML初识基础认知 + HTML标签
HTML 初识
m0_73070900的博客
08-01 1285
HTML基本骨架是构建网页的最基本的结果。VSCode中可以输入！再按Tab/Enter 自动生成此代码。
html初识教学反思,《初识FrontPage》教学反思
weixin_33308577的博客
06-05 302
为了加深学生们的动手能力和综合运用frontpage制作网页的能力，我特别设定了本节综合制作活动课，我想，我可以将奥运情感，带入到我的课堂教学中，同学们利用所掌握的FrontPage软件知识来制作一个简单宣传北京2008奥运的网页，来宣传奥运、支持奥运、让更多的小朋友来了解奥运。因此，我决定以奥运吉祥物为主题制作一个奥运宣传栏，同学们对此都非常的感兴趣。于是我在课前就请同学们通过网络来收集一些与关...
第一讲 HTML初识
菡萏的博客
11-25 1503
文科编程系列课程-Web开发 第一讲 HTML初识 目录1 标记（Mark）1.1 文本中的标点1.2 标点符号的特点1.3 从标点到标签2 HTML2.1 HTML的概念2.2 HTML52.3 HTML实践3 课后作业 1 标记（Mark） 1.1 文本中的标点 中国古代书籍中，一般不加标点符号，而是通过文意、语感、语气助词、语法结构等进行断句。像全国卷高考语文中的文言文题目就涉及到文章的断句。 如今，在现代汉语中，我们有一套完整的标点符号系统。在《中华人民共和国国家标准 标点符号用法》里给出了.
01-HTML初识
weixin_47175934的博客
08-30 91
网页相关，五大浏览器，vs code使用，html语法，排版系列标签，文本格式化标签，链接标签
HTML初识——网页设计html基础
qq_45864756的博客
08-29 4206
html初识
HTML-初识
最新发布
m0_73839298的博客
05-03 124
基本的HTML文档结构。
初识HTML
heliuerya的博客
01-25 1010
初识HTML
Html 初识3
长安
08-14 142
一 效果图 二 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> </style> <title>Html 初识3</title> </head> <body> <!--...
HTML第01天（HTML初识）总结.emmx
08-21
HTML第01天（HTML初识）总结.emmx
初识HTML语言
12-18
World Wide Web（万维网WWW）是一种建立在Internet上的、全球性的、交互的、多平台的、...它采用HTML语言描述超文本（Hypertext）文件。这里所说的超文本指的是包含有链接关系的文件，并且包含了多媒体对象的文件。
初识HTML5，认识html
03-05
让刚学编程的人对HTML5有所了解，认识什么是html5,知道什么是HTML5，对html感兴趣
HTML-css初识.md
01-06
HTML-css初识.md
初识html5.ppt
07-02
初识html5.ppt
初识前端，学习html+css.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
TP01-初识HTML.pptx
11-09
TP01-初识HTML.pptx
初识Vue.html
07-29
初识Vue.html
初识html：简单的hello world网页制作
06-28
### 回答1： Hello World网页制作是HTML编程的入门级别。以下是制作Hello World网页的步骤： 1. 打开文本编辑器，如记事本或Sublime Text等。 2. 在文本编辑器中输入以下代码： <!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html> 3. 保存文件，文件名为“helloworld.html”，确保文件类型为“所有文件”。 4. 在浏览器中打开“helloworld.html”文件，即可看到“Hello World!”的标题。 这个简单的网页由HTML标记组成，其中包括文档类型声明、HTML标签、标题标签和正文标签。HTML标记告诉浏览器如何显示网 ### 回答2： HTML是超文本标记语言的英文缩写，是用来制作网页的一门标记语言。在网页制作中，HTML主要用来编写网页的内容和结构，决定网页中各个元素的排列和位置。 制作HTML网页的第一步，是编写一个简单的“hello world”网页。这个网页的基本结构如下所示： <!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>Hello World！</h1> </body> </html> 该网页有三个部分组成： 1.头部（head）：用于描述文档的基本属性，包括文档类型声明、字符编码、文档title等。文档title会在浏览器的标题栏中显示。 2.主体（body）：用于展示文档内容。在body中，可以添加文本、图片、链接、表格等各种元素。 3.文本（text）：在该网页中，<h1>标签表示网页的标题，这里的标题是“Hello World！”。 当我们在编辑器中输入以上代码，保存为一个html文件，使用浏览器打开它，就可以看到“Hello World！”这个简单的网页了。 尽管这只是一个简单的网页，但它展示了HTML的基本属性，如何在HTML中描述文档的结构和展示内容，为之后学习其他更加复杂的HTML网页制作奠定了基础。 ### 回答3： HTML 是一种标记语言，是网页制作的基础。在制作网页时，首先需要创建一个 HTML 文件，并在文件中编写 HTML 代码。最简单的 HTML 代码就是 Hello World 网页。下面我来介绍一下如何制作这个网页。 首先，我们需要创建一个 HTML 文件。可以使用文本编辑器（如 Notepad++、Sublime Text 等）来创建 HTML 文件。以 Notepad++ 为例，创建一个新文本文件，将文件后缀名改为 .html，这样我们就创建了一个 HTML 文件。接下来，我们需要在 HTML 文件中编写代码。 HTML 代码由标签和内容组成。标签用来标记 HTML 文档中的不同部分，内容则是标签所包含的文本、图片、链接等等。以 Hello World 网页为例，我们可以编写以下代码： ``` <!DOCTYPE html> <!-- 文档类型声明 --> <html> <!-- html 根标签 --> <head> <!-- head 标签 --> <title>Hello World</title> <!-- title 标签，设置网页标题 --> </head> <body> <!-- body 标签，设置网页的 body 部分 --> <h1>Hello World</h1> <!-- h1 标题标签，设置网页主标题 --> <p>This is my first HTML web page.</p> <!-- p 标签，设置网页主要内容 --> </body> </html> ``` 上述代码中，第一行 ``<!DOCTYPE html>`` 是文档类型声明，告诉浏览器这是一个 HTML5 文档。接下来的 ``<html>`` 标签是 HTML 文档的根标签，所有其他标签都嵌套在它内部。``<head>`` 标签用于设置网页的头部内容，例如网页标题、样式表等等。标签内部的 ``<title>`` 标签用于设置网页标题。``<body>`` 标签用于设置网页的 body 部分，即网页中显示的内容。``<h1>`` 标签用于设置网页主标题，“Hello World” 就是我们的主标题。``<p>`` 标签是段落标签，用于设置网页主要内容。 将上述代码保存为 .html 后，我们就可以用浏览器打开它，看到我们刚刚编写的 Hello World 网页了。这是一个非常简单的网页，但它包含了 HTML 的基础标签和使用方法，对于初学者来说是非常有帮助的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值