HTML、CSS和JavaScript入门（1）——HTML基础

不知不觉用Hexo建站也快一年半了，以前下载安装Node.js、搭建Hexo博客和使用volantis主题，以及到最后部署到服务器上，这一系列流程都是跟着教程和volantis的中文社区操作，因为自己是纯小白，属于两眼一抹黑干就完事了的那种。遇到bug也是各种百度谷歌，别人咋改文件自己跟着改，也完全不懂其中原理。

后来因为课题需要接触到编程，才慢慢有了美化网站的想法（虽然现在也不好看，主要是因为没时间整hhhh）。作为一个小白，看到网上动辄十几个小时的编程教程真的头疼，自己只是需要了解基本概念，会用就行，不需要学太深，所以有了这篇纯入门笔记。

1. 前言

要学习前端web开发，首先需要了解和学习下面这些技术：

HTML（HyperText Markup Language）：HTML是用于定义网页结构和内容的标记语言。它用于创建网页的各种元素，如标题、段落、链接、图像等。
CSS（Cascading Style Sheets）：CSS用于控制网页的样式和布局。通过CSS，用来设置设置网页的字体、颜色、大小、布局等各种外观属性。
JavaScript：JavaScript是一种用于网页交互和动态效果的脚本语言。它可以通过操作网页元素、处理用户输入和响应事件等来实现交互性和动态性。

简单来说，把web前端开发比喻成我的世界这款游戏的话，HTML就是游戏实际中的地形、各种方块等实体，CSS就像游戏中的纹理包和材质，而JavaScript就是游戏中的逻辑和行为，控制方块和实体的移动、交互碰撞等行为。

以上是基础中的基础，真正要学web开发，还要学习前端框架和库如React、Vue.js，会用前端构建工具像是Webpack、Vite来构建打包前端项目，需要学习网络和HTTP协议以便更好和后端交互，还要考虑移动端优化、跨浏览器兼容性等等……万丈高楼平地起，没有基础其他的都是空中楼阁。

我这里用vscode做为集成开发环境，安装了以下插件：

1. Live Server：可以在浏览器中实时预览网页，安装后只需要在对应的html文件右键，选择Open With Live Server即可在本地浏览器快速打开，编辑文件后会自动刷新浏览器。

1. HTML CSS Support：根据输入内容和上下文，当你输入HTML标签或者CSS属性的时候，自动显示可能的选项（省去html文件和css文件之间反复切换）。

1. Auto Rename Tag：自动重命名标签，修改一侧标签后同步修改另一侧标签。

1. JavaScript（ES6） code snippets：支持JavaScript和TypeScript快速生成代码和语法提示。

2. HTML5

2.1 HTML基础

HTML5是HTML出的第五个版本，HTML5方便书写、精简，也便于阅读和理解，以下均以HTML5为例。

在vscode中新建一个index.html文件，输入英文的!并按下tab键补全，就会出现最基础的HTML5代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>声明为HTML5文档

<html>元素是HTML页面的根元素，所有元素都在根元素内

<head>元素包含了文档的元数据（meta），链接工程内的css文件，为搜索引擎提供网站描述、关键词等数据。这部分内容是不可见的，比如：

<meta charset="字符集"> 指定字符编码集，如UTF-8 
<meta name="description" content="描述内容"> 定义文档描述，通常用于搜索引擎的摘要显示
<meta name="keywords" content="关键词列表"> 定义文档关键词，指定文档关键词或者标签，有助于搜索引擎的索引和分类
<meta name="author" content="作者名称"> 定义文档作者
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 定义视口(viewpoint)位置，用于控制网页在移动设备的显示和缩放行为
<meta http-equiv="refresh" content="秒数; URL=重定向URL"> 定义文档刷新或者重定向

1	<title>描述文档标题（标题页显示的内容）</title>

1	<link rel="stylesheet" href="样式表路径">引入外部样式表，这个在css引入里再说

<body>元素包括了所有可见的页面内容

从上面的例子可以看到，HTML不是一种编程语言，而是一种标记语言，标记语言有自己的一套标记标签(tag)，标签由一对尖括号包围，且通常是成对出现的，比如<p>这里是内容</p>，开始标签和结束标签也称为开放标签和闭合标签。

也有一些标签是自闭和的，比如上面的<meta>、<title>、<link>，还有<br>（换行）、<hr>（水平分隔线）、<input>（输入控件）、<image>（插入图片）、<area>（定义可点击的区域），他们不需要闭合因为他们本身就不需要内容。

顺便说一句，在vscode中，ctrl+/可以快速注释当前行内容；块注释可以选中代码后alt+shift+A；alt+shift+↓可以快速复制当前行内容到下一行（选中多行代码同理）；在html文件中，输入小写字母再按tab键，会自动补齐开始和结束标签，算是提高编程效率的小技巧……

现在就可以右键index.html文件，选择Open With Live Server，win+→把网页放在屏幕右边，就可以同屏查看代码和网页了。

2.2 常用标签和属性

标题标签，通过<h1>到<h6>来定义：

<body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
</body>

段落标签，通过<P>标签定义：

<body>    
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quia alias tempore natus perspiciatis commodi sapiente fugit ducimus id, in ut deleniti sint sequi explicabo, totam pariatur quidem. Non, quis?
        Lorem 会输出占位用的无意义内容
    </p>
</body>

标签可以是行内元素或者块级元素，行级元素之间不会新起一段，其所占空间与内容本身大小有关，块级元素会新起一段。

<body> 
    <!-- 这是一个注释，不会显示 -->
    <p>
        行级元素不会新起一段，比如
    	<span>span（创建行内的容器）</span>
        <img decoding="async" src="https://www.shelven.com/tuchuang/avatar.jpg" width="50">img
        <a href="https://www.shelven.com" target="_blank">a(链接标签)</a>
        <strong>strong加粗</strong>
        <em>em斜体</em> 
    </p>
    <p>
        块级元素会新起一段，占据当前给定行的百分百宽度，包括
        <div>div标签</div>
    	<h6>h标签</h6>
    	<p>p标签</p>
    	<form>form标签</form>
    </p>
</body>

<span>和<div>这两个标签在HTML页面结构布局中比较重要，两者都没有特定的含义，<span>通常用来包裹文本和其他行内元素，<div>通常用来容纳其他块级元素或者行内元素。

在上面的例子中，标签内的比如decoding、href这样的信息称为HTML元素的属性，属性是以名称键值对的形式出现的，且都是放在开始标签中，而属性值不管是数字还是字符串，都要包括在引号内（首选双引号）。

适用于大多数HTML标签的属性：

class 为html元素定义类名（这个类名由css文件引入），方便器选择，可以写多个

id 为html元素定义唯一的id值，也是方便选择器选择

hidden 隐藏html元素

style 规定元素的行内样式（内联样式），css导入中会详细说

title 为元素提供额外信息，比如用在a标签，鼠标悬停会显示的信息

顺便提下，上面例子超链接的两种导入方式，href是超文本引用，建立文档与资源之间的关系，常用在link、a标签中；src是将指向的资源直接下载并用到当前页面，常用在script、img标签中。

要让行级元素换行或者同一个段落内的内容换行，可以插入块级元素，或者是加入<br>（换行）或者<hr>（插入水平线）标签：

<body>        
    <p>
        这是一个段落<br>这是另一个段落<hr>接着再来一段
    </p>
</body>

2.3 列表样式和表格

html的列表样式主要有两种：前面有个点的无序列表和带有数字排序的有序列表：

<body>
    <!-- 无序列表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>
</body>

表格标签为<table>，对应的分为表头<thead>和表体<tbody>。表头和表体都有行与列的概念，行在两者中都是<tr>标签，列在表头中标签为<th>，在表体中标签为<td>:

<body>
	<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>qq</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>phantom</td>
                <td>28</td>
                <td>1021618642</td>
            </tr>
            <tr>
                <td>aria</td>
                <td>26</td>
                <td>1269035311</td>
            </tr>
        </tbody>
    </table>
</body>

可以看到浏览器会把表头显示为粗体居中的文本，其他和表体没啥区别。

2.4 表单

表单是收集用户输入信息的工具，可以通过<form>标签创建，需要注意，html表单只能给外观不能给功能，功能实现需要javascript，或者写一个php服务器端脚本来接收参数。

<body>
    <form>
        <!-- label定义input内容的标签 -->
        <label>账号:</label>
        <!-- input ype="text"输入框可以输入文本 -->
        <input type="text">
        <br>
        <label>密码:</label>
        <!-- input type="password"输入框不会明文显示 -->
        <input type="password">
        <br>
        <label>文本域</label>
        <br>
        <!-- textarea是确定一个文本域 -->
        <textarea name="输入框" cols="50" rows="10"></textarea>
        <br>
        <label>性别</label>
        <!-- select是给出一个下拉框 -->
        <select name="选项">
            <option value="male">男</option>
            <option value="female">女</option>
            <option value="unknow">未知</option>
        </select>
        <!-- input type="radio"提供一个单选框 -->
        <input type="radio" name="sex" value="female">女
        <!-- input type="checkbox"提供一个复选框 -->
        <input type="checkbox" name="sex" value="male">男
        <input type="checkbox" name="sex" value="female">女
    </form>
</body>

2.5 iframe

也就是HTML的框架，一个网页中可以嵌套别的网页，不过大部分的浏览器对嵌套层数是有限制的，一般都用不到：

1
2
3

<body>
    <iframe src="https://www.shelven.com" width="800" height="600"></iframe>
</body>

每个iframe都要加载和渲染独立的文档，过多的嵌套会增加加载时间和资源消耗，页面太复杂用户体验也会不好= =

简单地把iframe和div结合一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container" style="width: 800px;height: 600px;text-align: center;">
        <div id="header" style="background-color:#0099ff;height: 50px;">
            <h1 >我的小破站</h1>
        </div>
        <div id="menu" style="background-color:#ff00b3;height:400px;width:100px;float:left;">
            <a href="https://www.shelven.com/" target="_blank">菜单</a><br> 
            <a href="https://www.shelven.com/categories/" target="_blank">分类</a><br>
            <a href="https://www.shelven.com/tags/" target="_blank">标签</a><br>
            <a href="https://www.shelven.com/archives/" target="_blank">归档</a>
        </div>
        <div id="content" style="background-color:#EEEEEE;height: 400px;width: 700px;float:left;">
            <iframe src="https://www.shelven.com" frameborder="0" width="700" height="400"></iframe>
        </div>
        <div id="footer" style="background-color:#00ff0d;height: 50px;clear:both;text-align:center;font-size: large;">
        萌ICP备20220246号 浙ICP备2022010847号
        </div>    
    </div>
</body>

</html>