HTML5学习：第一阶段01_在第一阶段英文h5-CSDN博客

本文链接：https://blog.csdn.net/weixin_44202489/article/details/109889327

一：基础入门

第一个HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是第一个HTML文件！！！
</body>
</html>

!<!-- 英文状态下，shift+1  然后再按tab键 -->
<!-- 注释：    英文状态下，ctrl+/就可以了 -->

基本结构

<!DOCTYPE html>    <!-- 声明文档类型的 -->
<html lang="en">   <!-- 根标签  lang="en"语言形态-->
    <!-- 头部  -->
    <head>
        <meta charset="UTF-8">  <!-- 全球所有语言统一编码 -->
        <!-- 视口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 标题 -->
        <title>度娘</title>
    </head>
    <!-- 内容 -->
    <body>
        
    </body>
</html>

语法及其构成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
</html>


<!-- 
    html的语法：
        标签分类：
            <标签名 属性="属性值"></标签名>         双标签、常规标签
            <标签名 属性="属性值">                 单标签、空标签

        语法构成：
           标签是长在尖括号里面
           属性和标签名用空格隔开，属性和属性值用等号和引号进行连接   
 -->

常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        span{
            color:red;
            font-size:66px;
        }
    </style> -->
</head>
<body>
    

    <!-- 标题标签 -->
    <h1> 我是标题1   </h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>

    <!-- 加粗 -->
    <b>我加粗了吗</b>
    <strong>哈哈哈哈哈</strong>


    <!-- 倾斜 -->
    <i>我倾斜了吗</i>
    <em>我呢</em>

    <!-- 下划线 -->
    <u>我有下划线吗~~</u>

    <!-- 换行 -->
    哈哈哈哈<br>                          嘻嘻嘻嘻嘿嘿呵呵呵~~~

    <!-- 水平线 -->
    <hr>


    <!-- 上标和下标 -->
    2<sup>3</sup>   
    h<sub>2</sub>o

    <!-- 段落标签 -->
    <p>段落标签</p>
    

    <!-- span -->
    你看！对面游过来<span>一群鸭子~~~</span>

    <!-- div -->
    <div>我是结构性标签</div>

    <!-- 转义字符 -->
    啊哈哈哈哈哈&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;啊哈哈哈哈
    &gt;.&lt;~~~
    &copy;
</body>
</html>

<!-- 
    一、标题标签
        <h1></h1>    唯一性：在一个网页中只能用一次，用于放网页的logo
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
        <h6></h6>
    特点：默认有自己的文字大小，默认加粗效果


    二、加粗标签
        <b></b>
        <strong></strong>
        特点：默认加粗效果
        区别：strong有语气强调的作用

    三、倾斜标签
        <i></i>
        <em></em>
        特点：默认倾斜
        区别：em有语气强调的作用

    四、下划线
        <u></u>

    五、强制换行
        <br>

    六、水平线
        <hr>

    七、上标  下标
        <sup></sup>
        <sub></sub>

    八、段落标签
        <p></p>

    九、装小段文字或者几个字符
        <span></span>

    十、<div></div>
        用于网页的结构性标签

    十一、转义字符
        &nbsp;   空格
        &gt;      大于
        &lt;       小于
        &copy;     版权符号
        
 -->

网站建站流程、知识点梳理

1.网站的建站流程：

 注册域名

 租用服务器

 项目研发：

 项目规划

 UI

 web前端

 后端

 联调

 测试

 网站推广

 维护

 2.网页的组成

 结构 html

 表现 css

 行为 js

 w3c:html css

 ecma:js

 3.计算机语言的发展：

 机器语言 汇编语言 高级语言

 4.html:超文本标记语言

 xhtml:可拓展超文本标记语言

 html5:第五个版本

 h5：学科

 5.站点

 以英文字母开头

 不能有中文、空格、特殊符号

 小写英文、数字、下划线的组合

 6.

 需要安装的插件：chinese.. open in bro...

 快捷方式：

 快速生成模板：shift+1 然后tab

 注释：ctrl+/

 cv大法：ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切



 7. html语法和分类：

 分类：

 双标签： <标签名属性="属性值"></标签名>

 单标签： <标签名属性="属性值">

 语法：

 标签名写在尖括号里面的

 标签名和属性用空格隔开，属性和属性值用等号和引号连接

 8.常用标签

 h1-h6 标题标签

 加粗

 倾斜

 下划线

 sup 上标 sub 下标

 <hr> 水平线

 强制换行

 段落

 

 <div></div>

 转义字符：

  空格

 > 大于

 < 小于

 © 版本符号