HTML：描述网页的骨架 【静态】
CSS：描述了网页的样式 【静态】
JAVASCRIPT：描述网页的行为（如何与用户交互）【动态】
HTML
- html是通过标签组织的。形如
<html> </html>用尖括号组织，成对出现的就是标签（tag），又称元素（element） - 一个标签通常是成对出现的
<html>开始标签
</html>结束标签
标签之间是标签的内容 - 标签是可以嵌套的。一个标签的内容可以是其他标签。这些标签构成了一个树形结构
- 可以在开始标签中，给标签赋予
属性（attribute）。属性相当于是键值对，可以有一个或多个。
输入! ,在按下TAB键，就能生成一个基本的页面，这个功能叫做emmet快捷键。
<!DOCTYPE html> <!--language的缩写 -->
<html lang="en"> <!--English 描述网页中语言为英文 -->
<head>
<!--meta 是单标签，没有结束标签-->
<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>
hello
</body>
</html>
标签
注释标签
<!-- 这是注释 -->
ctrl + / 快速注释
ctrl + 回车 换到新的下一行
标题标签
写标签时
- 写
<h1>，后面会自动补全 - 写h1 按tab
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
每个标题标签都是独占一行的，是否独占一行和代码的编写没有关系
在HTML中，标签是否换行和代码的编写无关，和标签自身有关，有的标签独占一行，有的标签不独占。
HTML中源代码中的换行会被忽略，
空格：多个空格会被忽略或忽略成一个。
段落标签
<p>标签
<p> </p>
Lorem + TAB 自动生成一段随机文本，用于帮助我们调试显示效果
换行标签
<br> 单标签，换行
<strong>变粗</strong>
<b>变粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
图片标签img
img的核心属性src，src描述了该图片的路径
路径可以是一个本地的绝对路径，也可以是相对路径，还可以是网络路径。
<img src="./11.png">
<img src="11.png" alt="这是一张风景照">
<img src="E:\java\java-learning\4.EEcode\html\11.png">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Mkbsjfl7dnRRR8GeELHYIgHaEg?w=289&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
alt属性：网速比较慢的时候，图挂了，就会显示个字
title属性：鼠标悬停在图片上时，会给出提示
width / height ：描述图的尺寸，宽度和高度可以同时设置，也可以只设置一个，如果只设置一个，另一个会等比例缩放。单位px 像素
超链接标签 a
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sogou.com">搜狗</a>
<a href="http://www.sogou.com" target="_blank">搜狗</a>
target="_blank" ： 新建一个页面，不会替换原有标签
表格标签
table：整个表格
tr：一行
td：一个单元格
th：表头中的一个单元格
<table width="500px" height="300px" border="1px" cellspacing="0">
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>张亦可</td>
<td>10086</td>
</tr>
<tr>
<td>张士大</td>
<td>10342</td>
</tr>
<tr>
<td>张覆盖</td>
<td>19991/td>
</tr>
</table>
一句css，让td里面的元素全都水平居中
<style>
td {
text-align: center;
}
</style>
列表标签
- 列表项 li
- 有序列表 ol
ordered list - 无须列表 ul
unordered list
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
输入标签：
form
使用form进行前后端交互，把页面上用户进行的操作/输入提交到服务器上。
form表单 + button:submit 提交按钮
input
<input type="text">
<input type = "password">
<input type="radio" name="gender" checked="checked"> 男
<input type="radio" name="gender"> 女
<br>
多选
<input type="checkbox" name="" id=""> 吃饭
<input type="checkbox" name="" id=""> 睡觉
<input type="checkbox" name="" id=""> 玩耍
<input type="checkbox" name="" id=""> 上课
<input type="button" value="this is button" onclick="alert('hello')">
<input type="submit" value="">
<input type="file" name="" id="">
<textarea name="" id="" cols="30" rows="10"></textarea>
常见接受用户用户输入的标签有：
- input.text : 单行文本框输入
- input:password ：密码输入
- input:radio ：单选按钮，对于单选按钮，一般会添加name属性，name属性相同的单选框，值之间是互斥的。
- input:checkbox ：多选，可以选择多个。
- input:button：按钮，value 按钮值。对于按钮点击之后干啥，就需要通过js配合
- input:submit：提交按钮，搭配form使用。外表和button差不多，会触发form和服务器交互。
- input:file：文件选择框，让浏览器选择本地硬盘的文件，就可以给浏览器提交。
- select + option ：下拉菜单选项
- textarea ：多行编辑框
- input:date/datetime/color ：
提交的时候，name作为key，用户的输入或者input中的value属性作为提交时的value
针对单选和多选，只有name相同的才视为一组
div span
div span 无语义标签
div 默认是独占一行的 块级元素
span 默认是不独占一行的 行内元素
HTML可去MDN查，MDN是相关文档