文章目录
下载、安装、运行第一个代码（hello world）
开发：是在程序员的电脑上完成的写代码的过程
运行：则是在用户的电脑上完成具体的程序跑起来的过程
一次开发，N次运行
我们学习HTML的时候用什么软件？浏览器
市面上主流的浏览器有：
- IE（早期windows自带的，现在已经变成edge）
- chrome（当前最牛逼的浏览器）
- firefox（知名的一个浏览器，好用不火）
- safari（苹果系统自带的一个浏览器）
- Opera（相对小众的浏览器）
要浏览器有什么用?
众所周知，网页就是跑在浏览器上的，而一个好的浏览器会代码提供一个稳定的运行环境，其功能就是解析运行网页（HTML，CSS，JS）
那么浏览器用什么语言写的?
- C++，性能要求极高的场景，都是C++为主，浏览器内核也是如此~~（和JVM差不多）
前端开发的主流环境有两个：
- JB系列
IDEA如果是专业版（教育版），本身是支持前端的，或者也可以用JB提供WebStore，缺点就是收费 - VSCode
免费，但体验要比WebStore差一点（但是免费啊） - 注意：
VSCode（轻量级开发工具）!= Visual Studio（重量级开发工具）
创建代码文件
使用VSCode编写代码
- 下载 微软官网
- 一直一下一步就可以了
- 打开软件
在商店里搜索Chinese (Simplified) (简体中文)
- 使用软件
使用VSCode：
- vscode和idea相比更简单
- idea用的时候，需要创建一个项目，创建过程中药配置很多东西
- 而vscode则没有"项目"这个概念，都是使用
目录来组织的 - 就可以选择一个你当前想要代码的目录，打开这个目录（打开目录就相当于这个目录作为项目目录）
- 下一步就是选择一个放代码的目录
- 创建代码文件
编辑代码（hello world）
我的第一个代码（hello word）
html
<html>
<hea></head>
<body>
hello world!
</body>
</html>- 写完代码后一定要记住保存
ctrl + s，或者开始vscode的自动保存就可以如下图：
- 怎么运行呢，我需要看我的代码运行结果？运行仍然是用浏览器运行
- 这个时候选择
web应用（chome）运行
- 或者打开文件资源管理器，在弹出的文件资源管理器中，双击或者拖拽到浏览器中运行，此时就跑起来了
这个时候就可以运行了可以看到hello world已经显示出来了
现在我们研究一下代码的特点
- html代码是通过标签来组织的，形如用尖括号组织的，成对出现的这个东西就是
标签（tag），也叫做元素（element） - 一个标签通常是成对出现的，
<html>开始标签
</html>结束标签
这两之间，是标签的内容 - 标签是可以嵌套的
一个标签的内容可以是其他一个或者多个标签，此时，这些标签构成了一个【树形结构】 - 可以在开始标签中，给标签赋予属性（Attribute）,属性相当于是建值对，可以有一个或者多个
HTML基本的语法结构，就是这几个简单的规则
下一步要了解的是当前HTML中都支持哪些标签，每个标签是干啥的？以及每个标签有哪些关键属性
html这是一个html文件最顶层标签，树根节点head存放了这个页面的一些属性（原数据，meta data）body存放了这个页面包含哪些内容
刚才我们写hello world这个是一个一个敲的，还有更简便的方法
注意：这里输入的感叹号是英文的，中文的可不行
可以看到这里面的东西已经帮我们写好了，我们只需要在body标签里写helloworld就可以了
那么这里面都有什么我们来介绍一下：
- 声明了一下文件类型，是html文件
html
<!DOCTYPE html>- lang =>language缩写，en=>english描述了网页中的语言是英语
html
<html lang="en">- 此处的meta标签，是单标签（只有开始标签，没有结束标签）
tittle标签是描述了网页的标题，如果更改了这里面的内容网页上面标题也会发生改变
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>HTML常见标签
注释标签
代码的注释，HTML的注释，和一般语言的注释，差别很大！
html
<!--这是一个注释-->
像是// /**/ #这些都不是html中的合法注释
注释不能随便乱写！！！，尤其是不要带有负能量
这样写比较麻烦，但是可以使用快捷键ctrl+/就可以快速注释
标题标签
标题标签：h1~h6
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 每个标题标签都是独占一行的，与代码的编写无关
- 在html里面标签是否换行，和代码无关，而是和你标签自身有关（有的标签独占一行，有的标签不占）
- 在html源代码中写的
换行会被忽略，写的空格，多个连续空格有的时候会被视为一个
段落标签
段落标签：p
html
<p>这是一个段落 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nostrum minus voluptas, dolor provident eveniet itaque. Illum, magnam quis perspiciatis asperiores vitae soluta sint adipisci ut suscipit sequi voluptatem non!Lorem</p>
其中lorem那段文字是vscode帮我们自动提供的一段随机的文本，帮助我们调试显示效果，只需要输入lorem按tab
每个段落之前，不光是要换行，同时还有一个明显的段落间距
- 那么段落间距可以调整吗？
- 需要通过css才能调，当前html自身调不了
换行标签
换行标签：br
这是一个单标签
html
<br>
格式化标签
格式化标签：
html
<strong>变粗</strong>
<b>变粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
- 注意！！！上述讲过的标签所有标签，都不需要背！！！！
上列列出的这些标签都是比较常用的标签，后面会大量用到 - 这些标签都是不独占一行的，想要换行就要加上
<br>标签
图片标签
- 在网页上时可以显示图片的，包括报纸上也是有图片的~~
- img有个核心属性，src（必填项）
- src描述了该图片的路径（路径可以是一个本地的绝对路径，也可以是一个相对路径，还可以是网络路径）
绝对路径：写出盘符的绝对位置
相对路径：html的工作目录就是该html文件所在的目录
如果我将图片移动到别的文件夹了，图片还会显示吗，答案是不会的，那么就要更改相对路径的位置
还没完，那么我再创建一个文件夹，创建一个hello.html的文件，那么怎么找到上一级目录文件夹里的图片呢？
这简单，只需要加入../就可以了
- 这个标签还可以写网络路径，就是可以直接写个网址
- 网上找个图片，然后右键图片，复制图片地址，就得到了网络地址
这样也可以显示出来了
alt属性：
alt属性就是当图片没有正常加载的时候，就会报里面的信息，下面来演示一下，当我故意写错地址的时候：
title属性：
就是当鼠标悬停在图片上，会给出一个提示：
width/height属性：
- 一个宽度，一个高度描述图片的尺寸
- 宽度和高度可以同时设置，也可以只设置一个，如果只设置一个，另一个会等比例缩放
- 当我设置成
50px的时候图片就会缩小，其中的px就是像素（就是平时我们拍照的时候相机的那个像素），这是在前端开发中最常用的单位（当然也有别的单位）
超链接标签：
html
<a href="https://baidu.com">百度</a>- "链接"link（快捷方式）
- "超"链接跳转到别的页面，可以是当前网站之外的
target属性：
- 一般写作
target="_blank"就可以打开一个新的标签页（而不会替换原有的页码）
点击一下就可以新开一个页面：
表格标签
- table表示整个表格
- tr表示一行
- td表示一个单元格
- th表示表头中的一个单元格
html
<table>
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>111111</td>
</tr>
<tr>
<td>李四</td>
<td>222222</td>
</tr>
<tr>
<td>王五</td>
<td>333333</td>
</tr>
</table>
可以看到th标签是自动加粗的
那么有同学会说，这也不像表格啊
那么我们就让他更像一些
html
<table width="500px" height="300px" border="1px" cellspacing="0">那么都是什么意思呢？
- width是宽度
- height是高度
- border是网格线的像素
- cellspacing是将网格线变成一根线
在head标签里面加上一段css代码
html
<style>
td{
text-align: center;
}
</style>这个操作就是让页面中的所有td标签中的文字都水平居中
列表标签
ol：有序列表（ordered list）
ul：无序列表（unorderde list）
li :列表项（list item）
html
<!--有序列表-->
<ol>
<h3>名字</h3>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!--无序列表-->
<ul>
<h3>名字</h3>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
- 有序列表：排序分先后
- 无序列表：排名不分先后
在浏览器中，按下F12/右键->检查元素，就可以打开浏览器中的"开发者工具"，借助这个工具就可以看到这个页面怎么实现的！！！
表单标签
表单是让用户输入信息的重要途径
分成两个部分：
- 表单域：包含表单元素的区域，重点是form标签
- 表单控件：输入框，提交按钮等。重点是input标签
form标签（核心）
html
<form action="test .htm1">
... [form 的内容]
</form>描述了要把数据按照什么方式，提交到哪个页面中
使用form进行前后端交互，把页面上，用户进行的操作/输入提交到服务器上
input标签：
有很多形态，能够表现成各种用户来输入的组件~~
- type(必须有),取值种类很多多, button, checkbox, text, file,image, passworld, radio 等
- name:给 input 起了个名字.尤其是对于单选按钮, 具有相同的name 才能多选一.
- value: input 中的默认值.
- checked: 默认被选中(用于单选按钮和多选按钮)
- maxlength: 设定最大长度
- 文本框
html
<input type="text">
- 密码框
html
<input type="password">
- 单选按钮
html
请选择性别
<input type="radio" name="gendder" checked="checked">男
<input type="radio" name="gendder">女对于单选框，需要加一个name属性
name属性相同的单选框值之前是互斥的
checked="checked"是默认选中的
- 复选框
复选框就是可以选择多个
html
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">学习
这个复选框也是支持默认选中需要加上checked="checked"
- 按钮
html
<input type="button" value="我是一个按钮">
对于按钮点击之后要干啥，需要通过js来配合
列如：点击一下按钮，弹出一个提示框
html
<input type="button" value="我是一个按钮" onclick="alert('hello')">
- 提交按钮（搭配form使用）
type="submit"
外表和button是差不多的，会触发form和服务器的交互~~
暂时不说，后面会详细讲
- 文件选择框
html
<input type="file">
input标签的功能是很丰富的，和用户交互最主要的一个标签之一
下拉菜单
select 标签：
- option 中定义 selected="selected" 表示默认选中
html
<select>
<option>--请选择年份--</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
注意! 可以给的第一个选项, 作为默认选项
html
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
textarea 标签：
- 文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
- rows 和 cols 也都不会直接使用, 都是用 css 来改的.
上述这些标签也可以称为是"控件"，构成一个图形化界面的基本元素
无语义标签
无语义标签: div & span
div 标签, division 的缩写, 含义是分割
span 标签, 含义是跨度，就是两个盒子，用于网页布局
- div 是独占一行的, 是一个大盒子.
- span 不独占一行, 是一个小盒子.
html
<div>
<span>咬人猫</span>
<span>咬人猫</span>
<span>咬人猫</span>
</div>
<div>
<span>兔总裁</span>
<span>兔总裁</span>
<span>兔总裁</span>
</div>
<div>
<span>阿叶君</span>
<span>阿叶君</span>
<span>阿叶君</span>
</div>