WEB前端 --Day1（html）-CSDN博客

本文链接：https://blog.csdn.net/wx_yiyi_xixi/article/details/84865041

一、网页开发基础知识

网页文件：使用html标记语言书写的文本文件

作用：可以在浏览器中按照设计者所设计的方式显示指定的样式

网页主要由三部分组成：结构，表现和行为

结构：网页的结构和内容【一个网页包含各级标题，正文段落等】------》html

表现：设定网页的表现样式【每个组成部分的字体，颜色，字号】------》css

行为：控制网页的行为【网页可以发生变化，可以和用户进行交互】----》javascript

总之：结构决定了网页是什么，表现决定了网页是什么样子，行为决定了网页能做什么

其中：最初，html需要承担结构和表现双重任务

二、html简介

1.概念

HyperText Markup Language, 超文本标记语言，是最基础的网络编程语言，是解释性的语言

超文本：超出文本的范畴

标记：html中所有的操作都是通过标记实现的，标记就是一个标签

2.第一个html程序

代码演示：

<html>
    <head>
        <title>网页标题</title>
    </head>

    <body>
        这是<font size="5" color="red">第一个</font>html程序<br />和Python的区别
        <hr />
        
        hellohello
    </body>
    
</html>

<!--文档声明。表示当前文件为html文件 -->
<!DOCTYPE html>
<html>
    <head>
        <!--设置当前页面的编码格式，为utf-8,避免在浏览器中出现乱码的情况-->
        <meta charset="utf-8" />
        <!--设置当前网页的标题-->
        <title>第一个html程序</title>
    </head>
    <!--
        设置需要显示的内容   
    -->
    <body>
        <font color="aqua">hello</font>
    </body>
</html>

<!--
    html标签之前的关系
        父子关系【直接嵌套关系】
            html包含head标签
            html是head标签的父标签
            head标签时html标签的子标签
        兄弟关系【平级关系】
            head和body同时存在于html标签下
        先辈后辈关系【隔代关系】
            html是title的先辈标签
            title是html的后辈标签 
    html中的标签是可以任意嵌套的
-->

3.html的编码规范

a.一个html文件都包含指定的开始标签和结束标签:<html></html>

b.html包含两部分内容：

head：用来设置html页面的属性和配置信息

body：需要显示在网页上的内容

c.head中包含内容：<title></title>,body中包含任意的标签

d.一般情况下，所有的标签都由开始标签和结束标签组成，但是，一些标签只有开始标签，没有结束标签

例如： 换行

<hr /> 水平线

e.html中的标签不区分大小写

4.html的思想

封装

网页中很多的数据，不同的数据可能需要有不同的显示效果，这个时候需要使用标签将需要操作的数据封装起来【开始标签和结束标签之间】，通过修改标签的属性就可以概念数据的样式

一个标签就是一个容器，想要修改数据的样式，则只需要设置容器的属性

三、html中常用的标签

1.注释标签、文字标签和段落标签

1.1注释标签

html的注释：<!- - 注释内容 - -> 【！为英文状态下的】

添加注释：快捷键 ctrl+/ 【取消注释：仍然按ctrl+/】

1.2文字标签

文字标签：

    标签：

    <font</font>

    属性：

    size:文字的大小，取值范围为1~7，数值超过7则表示7的大小

    color:文字的颜色

        方式一：英文单词【red，green，yellow等】

        方式二：使用十六进制表示    

            举例：#123456，每两位代表一种颜色，分别是三原色中的红色，绿色，蓝色【RGB】
            #ffffff:白色      #000000：黑色
        方式三：rgb(r,g,b)    rgba(r,g,b,a)
            其中的参数r,g,b的取值范围0~255    a表示透明度，取值范围0~1

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <font size="4" color="#56abfe">文字字体</font>
    </body>
</html>

1.3段落标签