前端---初识HTML（前端三剑客）
1.HTML
先为大家介绍几个学习前端的网站：菜鸟教程，w3school，CSS
HTML：超文本标记语言
超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等
1.1 认识 HTML 标签
HTML 代码是由 "标签" 构成的.
形如:
1 <h3>我是三级标题</h3>标签名 (body) 放到 < > 中
⼤部分标签成对出现. <h1> 为开始标签, </h2> 为结束标签.
少数标签只有开始标签, 称为 "单标签".
开始标签和结束标签之间, 写的是标签的内容.
开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).
1.2HTML 文件基本结构
在VS中输入！后敲击回车，会自动生成HTML的基本结构
html 标签是整个 html ⽂件的根标签(最顶层标签)
head 标签中写⻚⾯的属性.
body 标签中写的是⻚⾯上显⽰的内容
title 标签中写的是⻚⾯的标题.
1.3简单HTML开发
在body中写入：第一个HTML开发，然后ctrl+s保存，在文件中以浏览器打开
1.4HTML常见标签
1.4.1标题标签h1-h6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
</body>
</html>
1.4.2段落标签p
在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是h1标签</h1>
<p>这是一个段落</p>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
</body>
</html>
在HTML中用于另起一行
在HTML中：
html 内容⾸尾处的换⾏, 空格均⽆效.
在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.
html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格
1.4.3换行标签br
换行也可以使用br标签
br 是⼀个单标签(不需要结束标签)
br 标签不像 p 标签那样带有⼀个很⼤的空隙.
<br/> 是规范写法. 不建议写成 <br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
换行<br/>
换行<br/>
换行<br/>
换行<br/>
</body>
</html>
1.4.4 图⽚标签: img
img 标签必须带有 src 属性. 表⽰图⽚的路径.
<img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" alt=""> 
其他的参数：
width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.
border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设
<img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" width="500px" height="800px"> 
1.4.5 超链接: a
<a href="https://www.jd.com">京东</a>
点击后会跳转到京东
href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.
target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开
链接的⼏种形式:
1.外部链接: href 引⽤其他⽹站的地址
<a href="http://www.baidu.com">百度</a>2.内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可.
在⼀个⽬录中, 先创建⼀个 1.html, 再创建⼀个 2.html
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>3.空链接: 使⽤ # 在 href 中占位.
<a href="#">空链接</a>1.4.6表格标签
table 标签: 表⽰整个表格
tr: 表⽰表格的⼀⾏
td: 表⽰⼀个单元格
thead: 表格的头部区域
tbody: 表格的主体区域.
表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)
border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), "" 表⽰没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺⼨.
注意, 这⼏个属性, vscode 都提⽰不出来
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
1.4.7表单标签
表单域: 包含表单元素的区域. 重点是 form 标签
表单控件: 输⼊框, 提交按钮等. 重点是 input 标签
1.4.7.1 input标签
type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀
value: input 中的默认值
checked: 默认被选中.(⽤于单选按钮和多选按钮)
1.4.7.2 from标签
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送请求
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>action：将数据提交到那个界面
1.4.8 select 标签
下拉菜单
option 中定义 selected="selected" 表⽰默认选中
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
1.4.9无语义标签div / span
真实业务一般都用这个
用于页面布局
div是下图的大盒子
span是下图的小盒子
在盒子中有许多元素
<div>
<span>span</span>
<span>span</span>
<span>span</span>
</div>
