HTML学习（一）

努力学代码2022

已于 2022-06-07 15:38:41 修改

阅读量124

点赞数

文章标签： html 前端学习

于 2022-06-06 22:26:32 首次发布

本文链接：https://blog.csdn.net/weixin_44525652/article/details/125155292

版权

前端学习

第一章 HTML

文章目录

前端学习
前言
- 这一部分内容讲解了HTML的若干标签，HTML内容，为网页文本的骨架，各个标签的样式，一般由CSS确定，故在此，不多做描述
一、h1-h6 标题标签
二、p 段落
三、br 换行
四、hr 水平线
五、img 图片
- src：图片的来源，可以是本地路径，也可以是网络路径 alt：当图片打不开时，进行提示 title:当鼠标移动到图片上时的提示
六、a 超文本链接
六、文本标签
七、ul li 无序列表
八、table tr td 表格
总结

前言

这一部分内容讲解了HTML的若干标签，HTML内容，为网页文本的骨架，各个标签的样式，一般由CSS确定，故在此，不多做描述

一、h1-h6 标题标签

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

在这里插入图片描述

二、p 段落

代码如下（示例）：

<body>
    <p>微服务是一种架构风格，将单体应用划分成一组小的服务，尽量符合单一职责的原则，使得服务之间相互协作，实现业务功能；
        每个服务都运行在独立的进程、虚拟机、容器、服务器中，服务之间采用轻量级的通信机制（HTTP/JSON）进行协作；
        每个服务围绕各自的业务能力进行构建，并且能够通过自动化机制独立地部署，相互之间无部署依赖；
        每个服务可以使用不同的技术栈进行开发；
</p>
</body>

在这里插入图片描述

三、br 换行

代码如下（示例）：

<p>微服务是一种架构风格，将单体应用划分成一组小的服务，<br/>尽量符合单一职责的原则，使得服务之间相互协作，<br/>
    实现业务功能；每个服务都运行在独立的进程、<br/>
    虚拟机、容器、服务器中，服务之间<br/>
    采用轻量级的通信机制（HTTP/JSON）进行协作；<br/>
    每个服务围绕各自的业务能力进行构建，<br/>并且能够通过自动化机制独立地部署，<br/>
    相互之间无部署依赖；<br/>
    每个服务可以使用不同的技术栈进行开发；<br/>
</p>

在这里插入图片描述

四、hr 水平线

<hr color="" width="" size="" align=""/>

color：水平线的颜色
width：水平线的宽度
size：水平线的高度
align：对齐方式

<hr color="red">
<hr color='black' width="10px">
<hr size="10px">
<hr color='black' width="20px" align="right">

在这里插入图片描述

五、img 图片

<img src="" alt="" title="">

src：图片的来源，可以是本地路径，也可以是网络路径
alt：当图片打不开时，进行提示
title:当鼠标移动到图片上时的提示

<img src="./img/1.jpg" alt="无法显示图片" title="美女">

鼠标放到图片上，会显示“美女”

<img src="./img/2.jpg" alt="无法显示图片" title="美女">

在这里插入图片描述
当找不到相应图片时，会显示alt里的字样

六、a 超文本链接

点击这个标签，可以跳到新的文档或者这个文档的某一部分

 <a href="./h1.html">跳转到标题页面</a>

在这里插入图片描述
点击后，会跳转到标题页面

跳转到自身文本的锚点处

<a href="#id">跳转到id为id的p标签处</a>
    <p>微服务是一种架构风格，将单体应用划分成一组小的服务，<br/>尽量符合单一职责的原则，使得服务之间相互协作，<br/>
        实现业务功能；每个服务都运行在独立的进程、<br/>
        虚拟机、容器、服务器中，服务之间<br/>
        采用轻量级的通信机制（HTTP/JSON）进行协作；<br/>
        每个服务围绕各自的业务能力进行构建，<br/>并且能够通过自动化机制独立地部署，<br/>
        相互之间无部署依赖；<br/>
        每个服务可以使用不同的技术栈进行开发；<br/>
    </p>
    <p>微服务是一种架构风格，将单体应用划分成一组小的服务，<br/>尽量符合单一职责的原则，使得服务之间相互协作，<br/>
        实现业务功能；每个服务都运行在独立的进程、<br/>
        虚拟机、容器、服务器中，服务之间<br/>
        采用轻量级的通信机制（HTTP/JSON）进行协作；<br/>
        每个服务围绕各自的业务能力进行构建，<br/>并且能够通过自动化机制独立地部署，<br/>
        相互之间无部署依赖；<br/>
        每个服务可以使用不同的技术栈进行开发；<br/>
    </p>
    <p>微服务是一种架构风格，将单体应用划分成一组小的服务，<br/>尽量符合单一职责的原则，使得服务之间相互协作，<br/>
        实现业务功能；每个服务都运行在独立的进程、<br/>
        虚拟机、容器、服务器中，服务之间<br/>
        采用轻量级的通信机制（HTTP/JSON）进行协作；<br/>
        每个服务围绕各自的业务能力进行构建，<br/>并且能够通过自动化机制独立地部署，<br/>
        相互之间无部署依赖；<br/>
        每个服务可以使用不同的技术栈进行开发；<br/>
    </p>
    <p>微服务是一种架构风格，将单体应用划分成一组小的服务，<br/>尽量符合单一职责的原则，使得服务之间相互协作，<br/>
        实现业务功能；每个服务都运行在独立的进程、<br/>
        虚拟机、容器、服务器中，服务之间<br/>
        采用轻量级的通信机制（HTTP/JSON）进行协作；<br/>
        每个服务围绕各自的业务能力进行构建，<br/>并且能够通过自动化机制独立地部署，<br/>
        相互之间无部署依赖；<br/>
        每个服务可以使用不同的技术栈进行开发；<br/>
    </p>
    <p id="id">微服务是一种架构风格，将单体应用划分成一组小的服务，<br/>尽量符合单一职责的原则，使得服务之间相互协作，<br/>
        实现业务功能；每个服务都运行在独立的进程、<br/>
        虚拟机、容器、服务器中，服务之间<br/>
        采用轻量级的通信机制（HTTP/JSON）进行协作；<br/>
        每个服务围绕各自的业务能力进行构建，<br/>并且能够通过自动化机制独立地部署，<br/>
        相互之间无部署依赖；<br/>
        每个服务可以使用不同的技术栈进行开发；<br/>
    </p>

在这里插入图片描述
点击a标签，会跳转到id为id的p标签，也就是最后一段

六、文本标签

<em>着重文字</em><br>
<b>粗体文字</b><br>
<i>斜体文字</i><br>
<strong>加重语气</strong><br>
下标：H<sub>2</sub><br>
上标：2<sup>2</sup><br>
<del>删除线</del><br>
<span>显示文本</span><br>

在这里插入图片描述

七、ul li 无序列表

无序列表，开始于ul标签，列表的每个内容都被li标签包裹

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

在这里插入图片描述

八、table tr td 表格

table代表整体表格
tr为表格的每一行
td为表格每一行中的每个列元素

<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>zlt</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>lh</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </table>
</body>