我的HTML学习笔记（一）

最新推荐文章于 2024-09-13 17:29:38 发布

比尔盖茨接班人班长

最新推荐文章于 2024-09-13 17:29:38 发布

阅读量372

点赞数 1

文章标签：学习 html

本文链接：https://blog.csdn.net/m0_56424512/article/details/127890679

版权

本文介绍了HTML的基本结构，包括html、head和body标签的使用，讲解了文档声明、title标签、meta标签的作用，并列举了常用的HTML标签，如标题、段落、引用等，强调了实体的概念及其重要性，提供了两个简单的作业实例。

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

01.简单的网页架构

基础操作：CTRL+/ ：添加注释。

推荐使用浏览器：谷歌浏览器

**********************************************************************************

最简单最基础的网页含有以下内容，即：html,head,body

<html>

<body>

</body>

</html>

<!-- html标签，根标签/根元素，所有的网页内容都写在html中
开始标签和结束标签中间，一个页面只能一个html标签 -->

<!-- 最最简单的网页结构 -->
<html>
    <!-- head标签  保存一些原信息  他里面的内容，用户看不到，主要是帮助浏览器编译带吗 -->
    <head></head>

<!-- body标签  书写网页的主体内容 ，给所有用户看，都写在body里面 -->
    <body>
        我的第一个页面
    </body>
</html>

html：

html标签，根标签/根元素，所有的网页内容都写在html中

开始标签和结束标签中间，一个页面只能一个html标签

head：

head标签保存一些原信息他里面的内容，用户看不到，主要是帮助浏览器编译代码

body：

body标签书写网页的主体内容，给所有用户看，都写在body里面.

02.文档声明

文档声明 <!DOCTYPE html>：

写在html最上面，告诉浏览器我是按照html的规范来编写代码的

告诉浏览器也要按照规范编译，以免陷入怪异模式，出现乱码

<!-- 文档声明  写在html最上面，告诉浏览器我是按照html的规范来编写代码的
告诉浏览器也要按照规范编译，以免陷入怪异模式，出现乱码 -->
<!DOCTYPE html>
<html>
<head></head>

<body>

</body>

</html>

03.title标签的使用

title标签：

是网页的标题，显示在标题栏我们不关注他显示在哪里，要关注他的意义，最重要的意义是推广，给浏览器搜索到

目前学习的是html的标签。要时刻关注语义，而不是样式

jw+数字：

任意生成”数字“个随机文字或符号

<!DOCTYPE html>
<!-- 目前学习的是html的标签
要时刻关注语义，而不是样式 -->
<html>
    <head>
        <!-- title是网页的标题，显示在标题栏
        我们不关注他显示在哪里，要关注他的意义
        最重要的意义是推广，给浏览器搜索到 -->
        <title>
            你看我在哪里？？？
        </title>
    </head>

    <body>
       尘今商，用战大，牛。
    </body>

</html>

04.meta标签

meta标签：

meta标签是一个自结束标签也可以存一下元信息.自结束标签两种写法<meta>，或者<meta />

在开始标签里，我们可以加属性和属性值，比如：

charset 字符集属性设置密码本

utf-8 万国码属性值某个密码本

GB 中国的密码本

GBK 中国扩展版密码本

编码：文字图片视频转成二进制

解码：二进制转文字图片视频

乱码：编码解码不是一个密码本

charset的设置就是为了防止乱码

<!DOCTYPE html>
<html>
    <head>
        <!-- meta标签是一个自结束标签  
        也可以存一下元信息.自结束标签两种写法<meta>
        或者<meta />
        在开始标签里，我们可以加属性和属性值
        charset 字符集属性  设置密码本
        utf-8   万国码属性值    某个密码本 
        GB  中国的
        GBK 中国扩展版   -->
        <!-- 
            编码：文字图片视频转成二进制
            解码：二进制转文字图片视频 
            乱码：编码解码不是一个密码本
        charset的设置就是为了防止乱码-->
        <meta charset="utf-8">
        <title>网页标题</title>
    </head>
    <body>
        那导卅量。
    </body>
</html>

05.完整的网页结构

完整的网页结构应含有以下部分:

生成网页结构快捷键：shift+！

格式化快捷键：shift+alt+F

<!-- 生成快捷键 shift + !
     格式化代码 shift+alt+F
     -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页标题</title>
               
    </head>
    <body>
        爱作徒是会言，娘是。

    </body>
</html>