简介：
一，HTML是一种标记语言
二，HTML是跨平台的，无论是windows还是macOS，或liunx
三，浏览器推荐使用Google chorme , FireFox , Edge 不要用IE
四，编辑器可用记事本，但不推荐，其他例VSCode

使用与创建一个HTML文件
一般，网页的主页一般命名为index.html。若你部署了www.xxx.com，则根域名将显示index.html
若改变配置文件，上述规则就是可变的。
创建一个html文件,并直接输入HelloWorld，再用浏览器打开它，即可显示内容.
QQ图片20231207212111.png

HTML标签语法
一，标签通常是成对出现,在前面的是开始标签，后面的结束标签,中间则是标签内容
二，在标签中没有内容时，则可以使用自闭合标签

-- <tagname/>
-- (html5中可以省略/)
-- 有些标签则本身就是自闭合的如br，hr，input

HTML页面结构
创建一个新的HTML文件，输入!,再按下Tap键，就会一段结构

<!DOCTYPE html>  这一行向浏览器声明，我们使用的是HTML5，
<html lang="en"> （其余网页所有内容都被包裹在<html></html>标签内）
<head> (head区域:head区域控制的是网页的标题，链接其他CSS、javaScript文件,以及搜索引擎可以搜索的网站的描述或关键词等)
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> （）
    <title>Document</title>
</head>
<body> (body区域:展示页面中的内容)
    
</body>
</html>

注释与标题标签
在VSCode中，HTML的注释快捷键是Ctrl + /

<!-- 注释 -->

标题标签

<h1> Hello Heading </h1> （h1是最大的标题标签）
<h2> Hello Heading </h2>
<h3> Hello Heading </h3>

如下:(不过在CSS下，可以做到随意的改变文字的大小，颜色，位置等等)

Hello Heading One

Hello Heading Two

Hello Heading Three

...

Hello Heading Six

段落标签

<p> 内容 </p> （输入即可按照默认样式在网页上显示内容）

行级元素以及段级元素
行级元素不会新起一段内容，其占用空间不会随标签内容的多少而改变，
而段级元素会因此而改变。
如下:

 <!-- 行级元素 display:inline -->
 <!-- 块级元素 display:block -->
 <!-- 块级元素 div h p form .... -->
 <!-- 行级元素 span img a strong em ... -->

 <a href = 'www.xxx.com' ></a> （a是链接标签,给它加上一个属性href就是可以点击该标签内容实现链接之间的跳转）
 <a href = 'www.xxx.com' target = '_blank'></a> (如果我们想在新的标签页打开链接，则加入taget = '_blank')

HTML标签属性
所有的标签都可以有属性，且不只有一个，属性作用就是提出元素的更多信息

列表标签和表格标签
列表标签分为无序标签和有序标签:由默认格式写出来并不美观，可通过CSS修改。
列表标签:

 <ul>   (无序标签ul)
            <li>列表项1</li>
            <li>列表项2</li>   
            <li>列表项3</li>   
            <li>列表项4</li>   
        </ul>
        <ol>  （有序标签ol）
            <li>列表项1</li>
            <li>列表项2</li>   
            <li>列表项3</li>   
            <li>列表项4</li>   
        </ol>

表格标签：

<!-- 表格标签 -->
<table>
    <!-- 在table中要有行列的概念，tr表示行，th或td表示列 -->
    <!-- 表头标签 -->
    <thead>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
    </thead>
    <!-- 表体标签 -->
    <tbody>
        <td>xxxxxxx</td>
        <td>xxxxxxx@xxx.com</td>
        <td>xxxxxxx</td>
    </tbody>
    <tbody>
        <td>xxxxxxx</td>
        <td>xxxxxxx@xxx.com</td>
        <td>xxxxxxx</td>
    </tbody>
</table>

表单与输入标签
表单是web开发中最常见的功能，如登录表单，注册表单，但要注意HTML只能改变表单的外观，而不是添加功能

<form>
    <label>name :</label>
    <input type="text">
    <!-- lable是行级元素，可以使用div块级元素来分割他们 -->>
    <label>name2 :</label>
    <input type="text">
    <div>
        <label>name3 :</label>
        <input type="text">
    </div>
    </br>
    <div>
        <label>name4 :</label>
        <input type="text">
    </div>
</form>
<textarea> (textare是一片更大的表单)
</textare>

按钮标签和图片标签
按钮标签

<!--按钮，实现按钮功能是javascript的作用-->>
    <button>点一点我吧！</button>

图片标签

<img src='指定本图片地址' alt='图片加载失败后显示的文本'
 width = 'xxx'
 height = 'xxx'
 > （img是自闭合标签,且也属于行级元素）

HTML简记

Hello Heading One

Hello Heading Two

Hello Heading Three

Hello Heading Six

Renko

叨叨几句...