初识HTML，Hello world！_打开url，显示hellow wold-CSDN博客

本文链接：https://blog.csdn.net/weixin_41390717/article/details/84535784

写在前面（大神绕路）

HTML是用来描述网页内容的一种语言，没有这种语言浏览器就会懵逼，因为正是它在指导浏览器该显示什么以及如何显示。HTML很简单，也必须简单，因为它是Web的基石，基石不复杂，但是极其重要。往后大家在Web开发的道路上多走些日子就明白了，HTML我们几乎每天都会写一点。

网页的结构

1.HTML标签是什么？

如果把网页比作洋葱，一层包一层，那标签就是最外层，元素是一张网页的根元素，其他所有元素都是他的后代。

<html>Hello world</html>

2.body标签是什么？

把一张网页比作一个人<body>标签就表示一个人所有的可见部分，比如五官，身材…
对于真实存在的但是肉眼不可见的内在部分，如人的思想、性格等<body>标签是不管的。
<body>包含着页面中所有的可见元素，比如链接、段落、图片…

<html>
    <body>
        脸
        胸
        腰
        臀
        腿
    </body>
</html>

body包含的常用标签

<h1>——<h6>
都是标题标签，用于概括页面中不同主题的内容，没有<h7>
<p>
是段落标签（paragraph的缩写），用于给文字划分段落。
<div>
是用于在网页中划分区域的，通常作为容器而存在，用于包含网页中的内容, 是最常用的网页元素之一。平时别人问道怎么铺网页啊？都是回答<div>

<html>
    <body>
        <div>
        	<div>
                <div>
                        我是div狂魔。
                </div>
            </div>
        </div>
    </body>
</html>

<a>
用于定义网页中的链接，链接也叫做锚或锚链接。

<html>
    <body>
        <a href="http://baidu.com">跳转到百度</a>
    </body>
</html>

<img>
用于定义网页中的图片。平常在网页中见到的图片大部分都是用这个标签。

<html>
    <body>
        <img src="https://i-blog.csdnimg.cn/blog_migrate/9b52e04ae9d86a9a38a1353e6a7b4d6c.png">
    </body>
</html>

在这里插入图片描述

<table>
用于定义表格，单独出现并没有什么用，它需要和他专有的子标签在一起才有意义。
<tr>（table row）：定义行，出现一组就是一行，出现多组就是多行。
<td>（table data）：定义单元格，一般包含在<tr>中。
<th>（table head cell）：定义表头单元格，一般包含在<thead>中。
<thead>（table head）：定义表头
<tbody>（table body）：定义表身

<table border="1">
   		<thead> <!--表头开始-->
   		    <tr>
   		    	<th>姓名</th>
   		    	<th>年龄</th>
   		    	<th>性别</th>
   		    </tr>
   		</thead> <!--表头结束-->
   		<tbody> <!--表身开始-->
   		    <tr>
   			    <td>同学A</td>
   			    <td>18</td>
   			    <td>男</td>
   		    </tr>
   		    <tr>
   			    <td>同学B</td>
   			    <td>19</td>
   			    <td>女</td>
   		    </tr>
   		</tbody> <!--表身结束-->
   	</table>

<button>
用于定义网页中的按钮，可以做表单提交和表单清空等。

<form>
    <button type="reset">重置</button>
    <button type="submit">提交</button>
</form>

疑问：

提交时用 <input type="submit">还是<button type="submit">？
能用<button>就用<button>，因为它的功能要更强一些。<button>内部可以插文字甚至图片，<input>就不行。

3.head标签是什么？

把一张网页比作一个人标签就包含了一个人的基础信息，虽然无法直接观察到，但确实存在。
如姓名、性格、人品… 而<head>就用于包含一张网页中抽象的基础信息。
<head>和<body>的区别在于<body>只想包含看得见摸得着的内容。
<head>中只能包含抽象的信息，但并不是说<body>不能包含抽象内容，你硬要把抽象内容写进去也拿你没办法，他更在乎看得见摸得着的。

<html>
    <head>
      <title>文档的标题</title>
    </head>
</html>

head包含的常用标签

title是网页唯一标题标签
link是一个链接标签，包括外部css文件引用、js文件引用、favicon.ico图标引用等作用link介绍
meta包含广泛的内容标签，如网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。
script是引入外部js文件作用
style直接嵌入网页的js或css文件标签

结语

HTML其实没什么好说的，最简单但也很重要，这么形容，如果有一块地，你想要造一个房子，那你就用HTML，但是房子造出来了，你想要追求美观一点，你就要用CSS，当你不满足于有美丽的外表的房子时，你想要房子的设施是高科技自动化的，你就要用到JavaScript。所以学习就是这么个过程，不断得循序渐进！