前端学习历程初识HTML5

-人世百态

已于 2022-09-14 19:53:00 修改

阅读量154

点赞数

文章标签：前端学习 html5 html

于 2022-09-14 19:43:28 首次发布

本文链接：https://blog.csdn.net/Flang0/article/details/126858519

版权

前端学习历程

第一章新手学习前端之初识HTML5

前言

因为我也是新手，所以只能尽我所能给各位想学前端的一个帮助。

一、HTML5是什么？（了解）

为什么叫html5？

因为这是html的第五个版本，同时也是一类技术的总称

学习这个能做什么？

做出人机互动界面，网页，小程序，qpp，公众号，小游戏

网页开发的大概流程：

购买域名服务器
项目经理需求
ui设计界面
后端
测试

二、一个完整html的结构

html 双标签网页中的根元素

head 双网页的头部

body 双网页的身体

title 双网页的标题

meta charset=“utf-8” 设置编码格式为UTF-8【国际统一标准】

!doctype html 告诉浏览器文件类型为html

=>双标签 <标签名>内容</标签名>

=>单标签 <标签名>或者<标签名/>

=>属性 <标签名属性=“属性值” …>

三、描述文本的标签

文本标签

标题

特性

独占一行
自带加粗

  <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

运行结果：

请添加图片描述

段落

<p>
<!-- p标签-->
    hello world!
</p>

运行结果：

请添加图片描述

空格

在html中，代码里无论几个空格，在浏览器中都只有一个空格。除非用以下代码

&nbsp;
	代码中的一位可无;
&emsp;
	网页中的一位
&ensp;
	半位

版权符号&copy;
注册商标 &reg;
爱心   &#10084;
&lt;   <
&gt;   >

这下只是比较常用，还有很多可以自己网上查。

换行

<p>
    在游戏界中，任天堂石是垂老的战神，有威望，但实力下降，只能吃老本。<br>
    R星，走的是慢工出细活，游戏一个比一个精品。
</p>

运行结果：

请添加图片描述

倾斜

   <i> H<sub>2</sub>O </i>
<!-- i标签-->
    <br>
     <em> 2<sup>3</sup> </em>
<!--em标签 -->

提前了解以下上下标
上下标的知识点在下面我们会说请添加图片描述

加粗

    <b> H<sub>2</sub>O </b>
<!--b标签只加粗 -->
    <br>
      <strong> 2<sup>3</sup> </strong>![请添加图片描述](https://img-blog.csdnimg.cn/39f686ece93a45c2923a858f26dc84c1.png)

<!--strong标签突出文本 -->

运行结果：

在这里插入图片描述

上标/下标

  H<sub>2</sub>O
<!--sub标签 -->
    <br>
     2<sup>3</sup>
<!--sub标签 -->

运行结果：

请添加图片描述

删除线/下划线

   <s> H<sub>2</sub>O </s>
<!--s标签 删除线 -->
    <br>
<del> H<sub>2</sub>O </del>
<!--del标签 删除线 -->
    <br>
     <u> 2<sup>3</sup> </u>
<!--u标签 下划线 -->

运行结果：

请添加图片描述

超链接

    
   <a href="目标文件路径及全称/连接地址" title="鼠标悬停">链接文本/图片</a>
    <!--a标签 -->
    <a href="https://www.baidu.com/">你好呀 </a>
    <!-- 默认原窗口打开 -->
    <a href="https://www.baidu.com/" target="_blank">网盘</a>
    <!-- 在新窗口打开 -->
    <a href="https://www.baidu.com/" target="_self">网慢</a>
    <!-- 在原窗口打开 -->
    <a href="#">srg </a>
    <!--空连接 -->

统一设置超链接的打开方式：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank">
    <!-- 全局超链接控制-->
</head>
<body>
   <a href="https://www.baidu.com/">你好呀 </a>
    <!-- 默认原窗口打开。现在是新窗口打开 -->
    <a href="https://www.baidu.com/" target="_blank">网盘</a>
    <!-- 在新窗口打开 -->
    <a href="https://www.baidu.com/" target="_self">网慢</a>
    <!-- 在原窗口打开 -->
</body>

分割线/水平线

分割线是自动居中的

<p>你最帅 </p>
<hr width="1500px" color="red">
<!--width可以调宽度 color可以调颜色 -->
<p>你最美</p>

运行结果：

请添加图片描述

列表

有序列表

一般用于新闻热搜

<ol type="1" start="5">
    <!--type=1/i/a/A/I   切换排序数字类型-->
    <!--start=number 从第几个开始 -->
    
        <li>你好</li>
        <li>12</li>
        <li>113</li>
        <li>45</li>

    </ol>

无序列表

一般用于导航栏，新闻

  <ul type="none">
        <!--type='circle（空心圆）/none（什么也没有）/disc（实心圆）/square（实心正方形）'-->>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

自定义列表

一般用于图片与字符的组合

 <dl>
        <dt>你好</dt>
     <!--内容 -->
        <dd>这只是普通的你好</dd>
     <!--解释内容 -->
    </dl>

插入图片

<img src="目标文件路径及全称" alt="图片替换文本（图片无法加载时显示）" title="鼠标悬停提示" width="宽度" height="高度"/>

    <img src="../img/banner.jpg" width="500px">
    <img src="../img/02.jpg" width="500px"/>
<!--src是路径，无论是绝对路径，相对路径，还是网络路径 -->
<!--width是设定图片的宽度 -->