HTML – Akun

全称是Hypertext Markup Language(超文本标记语言)。

1. 配置环境

1.1 安装vscode

Visual Studio Code（简称VS Code）是由微软公司开发的一款轻量级但功能强大的源代码编辑器，它可以在桌面上运行，适用于Windows、macOS和Linux操作系统。VS Code内置了对JavaScript、TypeScript和Node.js的支持，并且拥有丰富的扩展生态系统，可以支持几乎任何编程语言。

1.2 在VScode安装CSS JavaScript Support插件

一款写CSS代码的神器。

1.3 在VScode安装Live Support插件

可以在写代码的同时实时预览网页的变化。

1.4 在VScode 安装Auto Rename Tag插件

这个插件可以在修改HTML标签的时候，同步修改与之匹配的另一个标签。

2. HTML结构

输入感叹号+回车可快速创建模板结构。

<!-- 这里放置文档的元信息 -->
<!DOCTYPE html>
<html>
  <head>
    <!-- 这里放置文档的元信息 -->
    <title>文档标题</title>
    <meta charset="UTF-8">
    <!-- 连接外部样式表或脚本文件等 -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- 这里放置页面内容 -->
    <h1>这是一个标题。</h1>
    <p>这是一个段落。</p>
    <a href="https://www.baidu.com">这是一个链接。</a>
    <!-- 其他内容 -->
  </body>
</html>

3. HTML标签

HTML通过一系列的`标签（也称元素）`来定义文本、图像、链接等等。HTML标签是由尖括号包尾的关键字。

标签通常成对出现，包括开始标签和结束标签（也称双标签），内容位于这两个标签之间，例如：

<p>这是一个段落。</p>
<p>这是一个标题。</p>
<a href="#">这是一个链接。</a>

除了双标签，也存在单标签，例如：

<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" />
<br> #换行
<hr> #添加水平线

区别：单标签用于没有内容的元素，双标签用于有内容的元素。

3.1 常用文本标签

3.1.1 标题标签

标题标签，h1~h6

段落标签p

更改文本样式：字体加粗标签b、strong，斜体i，下划线u，删除线s

<body>
    <h1>一级标题标签</h1>
    <h2>二级标题标签</h2>
    <h3>三级标题标签</h3>
    <h4>四级标题标签</h4>
    <h5>五级标题标签</h5>
    <h6>六级标题标签</h6>
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>   
    <p>
        <b>字体加粗</b>
        <strong>字体加粗</strong>
        <i>斜体</i>
        <u>下划线</u>
        <s>删除线</s>
    </p>
</body>

3.1.2 无序列表ul

<ul>
        <li>无序列表 1</li>
        <li>无序列表 2</li>
        <li>无序列表 3</li>
        <li>无序列表 4</li>
        <li>无序列表 5</li>
</ul>

3.1.3 有序列表ol

<ol>
        <li>有序列表 1</li>
        <li>有序列表 2</li>
        <li>有序列表 3</li>
        <li>有序列表 4</li>
        <li>有序列表 5</li>
</ol>

有序列表和无序列表除了显示不同，用法是基本一致的。

3.1.4 表格标签table

  <table>
        <tr>
            <th>列标题 1</th>
            <th>列标题 2</th>
            <th>列标题 3</th>
            <th>列标题 4</th>
            <th>列标题 5</th>
        </tr>
        <tr>
            <td>表数据 1</td>
            <td>表数据 2</td>
            <td>表数据 3</td>
            <td>表数据 4</td>
            <td>表数据 5</td>
        </tr>
        <tr>
            <td>表数据 11</td>
            <td>表数据 21</td>
            <td>表数据 31</td>
            <td>表数据 41</td>
            <td>表数据 51</td>
        </tr>
        <tr>
            <td>表数据 12</td>
            <td>表数据 22</td>
            <td>表数据 32</td>
            <td>表数据 42</td>
            <td>表数据 52</td>
        </tr>
</table>

tr=table row , td=table data , th=table header.

3.1.5 表格添加边框border

<table border="1">
        <tr>
            <td>表数据1</td>
            <td>表数据2</td>
            <td>表数据3</td>
        </tr>
    </table>

边框粗细数字决定，根据需要修改。

4. HTML属性

属性在HTML中起到非常重要的作用，他们用于定义元素的行为和外观，以及与其他元素的关系。

基本语法：

<开始标签 属性名=“属性值”>

每个HTML元素可以具有不同属性。

<p id="describe" class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>

属性名称不区分大小写，属性值对大小写敏感。以下三种写法，前两者相同，第三个与前两个不同。

<img src="new.gif" alt="1">    
<img SRC="new.gif" alt="2">    
<img src="NEW.GIF" alt="3">

适用于大多数HTML元素的属性：

例如：

<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>

4.1 a标签

a标签的格式：

    <a href="8.138.28.153/wordpress">我的博客</a>
    <a href="8.138.28.153/wordpress" target="_blank">这是一段超链接</a>

可以连接到文件路径、其他网站的URL、邮箱地址、手机号等。

target有四个默认值：

_self是默认值，表示链接在当前窗口或者标签页打开。

_blank表示链接在新窗口或者标签页打开。

_parent表示链接在父窗口或者父框架中打开。

_top表示链接在顶层窗口或者顶层框架中打开。四个取值决定了链接的打开方式让开发者可以更灵活地控制链接的行为，来提供用户更好的体验。

4.2 img标签

<a href="https://www.baidu.com">我的博客</a>
    <br>
    <hr>
    <a href="https://www.taobao.com" target="_blank">这是一段超链接</a>
    <hr>
    <img src="new.gif" alt="我的图片">
    <img src="图片链接" alt="图片链接">
    <img src="pic/藤原自用.png" alt="" width="400px" height="500px">
    <img src="pic/藤原自用.png" title="停留显示我就显示">

其中alt属性的作用是当图片无法加载，就会显示alt属性指定的文本。
添加title属性可使鼠标停留时显示指定文本

使用width和height属性来指定图片宽和高。

4.3 块元素和行内元素

区块是HTML中非常重要的概念，并且也是学习CSS的前置内容。前面提到的有些元素在浏览器中是独占一行的，例如和h1标签，表格table标签等等，而有些元素可以和这些元素位于同一行，如a标签、img标签。

所有根据元素的表现形式，可以分为行内元素和块元素。

块元素block

块级元素常用于组织和布局页面的主页结构和内容，例如，段落、标题、列表、表格等等。他们用于创建页面的主要部分，将内容生成逻辑块。

块级元素通常会从新行开始，并占据整行的宽度，因此他们会在页面上呈现一块独立的内容快。
可以包含其他块级元素和行内元素
常见的块级元素包括div，p，h1到h6，ul，ol，li，table，form等。

行内元素inline

行内元素通常用于添加文本或作为文本的一部分应用样式。他们可以在文本中插入小的元素，例如超链接、强调文本等。

行内元素通常在统一行内呈现，不会独占一行。
他们只占据其内容所需的宽度，而不是整行的宽度。
行内元素不能包含块级元素，但可以包含其他行内元素
常见的行内元素有：span，a，strong，em，img，br，input等。

div标签

div标签是块级标签，通常用于创建能够包含其他元素的容器块。

他没有任何语义，仅用于组织内容。

因此，常用于创建页面的布局结构。比如创建网页的不同部分，如页眉、导航栏、侧边栏、中间的内容区域、页脚等。

如果在创建之前就已经想好有哪些类的话

.+类名或div.类名  ##创建类的容器
#+id或div#id      ##创建id容器

span标签

相当于没有特殊元素的a标签或img标签

主要作用就是把一小部分文本包起来，以便于对他们使用样式，CSS或者JS行为。

span是行内元素，因此不会独占一行，指挥占据他所需要的一个宽度。

<body>
    <!-- 如果在创建之前就已经想好有哪些类的话，.+类名+tab div.类名 #+id+tab div#id-->
    <div class="nav">
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
        <a href="#">链接 3</a>
        <a href="#">链接 4</a>
        <a href="#">链接 5</a>
    </div>

    <div class="content">
        <h1>文章标题</h1>
        <p>文章内容 1</p>
        <p>文章内容 2</p>
        <p>文章内容 3</p>
        <p>文章内容 4</p>
        <p>文章内容 5</p>
    </div>

    <!-- span标签，相当于没有特殊元素的a标签-->

    <span>这是第 1 span标签</span>
    <span>这是第 2 span标签</span>
    <span>这是第 3 span标签</span>
    <span>这是第 4 span标签</span>
    <hr>
    <span>链接点击这里 <a href="#">链接</a></span>
</body>

使用div和span标签和js和css一起使用更佳，可以实现更加复杂的页面布局。

5. HTML表单

表单是什么？比如某个网站的搜索栏，登录注册的区块，boss直聘的地区城市选择等，都用到了表单。

表单的应用非常丰富，可以说每一个网站都会用到表单。

form标签

form标签是表单的容器，他有很多属性，每个属性也有很多属性值。如

<body>
    <form action="">
        <span for="username">用户名：</span>
        <input type="text" placeholder="请输入内容"> 
        <span for="pwd">密码：</span>
        <input type="text" value="请输入内容">
        <br>
        <label>用户名：</label>
        <input type="text" placeholder="请输入用户名"> 
        <label>密码：</label>
        <input type="password" name="username" id="pwd" value="请输入密码">
        <br>
        <!--单选-->
        <label for="">性别</label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
        <br>
        <!--多选-->
        <label for="">爱好</label>
        <input type="checkbox" name="hobby" id="">唱歌
        <input type="checkbox" name="hobby" id="">跳舞
        <input type="checkbox" name="hobby" id="">RAP
        <input type="checkbox" name="hobby" id="">篮球

        <br>
        <input type="submit" value="上传">
    </form>

    <form action="#"></form>
</body>

M	T	W	T	F	S	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31