理解html_html标签都是盒子 <br>是盒子吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_45637488/article/details/112661009

html是用来布局的，如果在html里面添加样式就会显得很不专业。

html标签的实质是盒子，盒子里面套盒子，最会呈现的是我们看到的界面。

html布局的内容：

文字：<h>,<p>
图片：<img>
超链接：<a>
等等

html的标签都是有语义的，（除了<div>,<span>是专门用来布局的，<div>用于给其他盒子布局，<span>用于包含内容），类似于放水和菜用不同的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123</title>
</head>
<body>
 <!-- 语义化：写的标签一定要有语义 -->
    <!-- 语义为标题，随着级数降低，越来越小 -->
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <!--尽量用p标签,是不同的段落-->
    <p>段落1</p>
    <p>段落2</p>

    我是换行<br>我是换行<!--是淘汰标签了-->
    <!-- 最常用单标签 img,input-->
    <img src="11.jpg" width="1000" title="路灯" alt="灯">
    <!-- 在出现图片路径错误的时候才会出现title和alt -->
    <!--给一个width，height会跟着调整不至于比例失调-->
    <input type="text">

</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>
    <base target="_blank" />
    <!-- 设置全局的页面为跳转新页面 -->
</head>
<body>
    <!-- 用a标签进行跳转，想跳转到新的页面（非在页面内跳转）使用target="_blank" -->
    <a href="http://www.baidu.com" target="_blank">百度</a><!--跳转到新的页面-->
    <a href="http://www.taobao.com" target="_blank">阿里</a>
    <a href="http://www.100bt.com/aobi/">奥比岛</a><!--站内链接-->
</body>
</html>

下一篇：https://blog.csdn.net/weixin_45637488/article/details/112715193