一，HTML概述
HTML：Hyper（超）Text（文本） Markup（标记） Lannguage（语言）
由此可知HTML代码是由“标签”构成的
关于标签的整体概述：
●大部分标签都是成对出现的，<body>为开始标签，</body>为结束标签
●少数标签只有开始标签成为“单标签”，如<meta>
●开始标签和结束标签之间写的是标签的内容
●开始标签中可能会带有属性，如id属性，相当于给这个标签设置了一个唯一的标识符
先展示一下一个简单的HTML写法：
<html>
? <head>
? ? <title>你好世界</title>
? </head>
? <body>
? ? <h1>我去春游</H1>
? ? <p>我玩的<em>很开心</em></p>
? ? <p>明天接着去！</p>
? </body>
</html>
它的网页效果是这样的：
?
二，HTML文件基本结构
● html 标签是整个 html 文件的根标签(最顶层标签)
● head 标签中写页面的属性.
● body 标签中写的是页面上显示的内容
● title 标签中写的是页面的标题.
三，HTML常见标签
1，输出内容的标签
? ? ? ? 1）?标题标签
????????????????有六个, 从 h1 - h6. 数字越大, 则字体越小
? ? ? ? 2）段落标签
?????? <p>段落内容</p>
? ? ? ? 注意：html 内容首尾处的换行, 空格均无效，在 html 中文字之间输入的多个空格只相当于一个空格. html 中直接输入换行不会真的换行, 而是相当于一个空格。
<p>我去春游
我玩的很开心
明天接着去</p>
????????效果如下：
????????
????????3）?换行标签
<p>我去春游<br> 我玩的很开心<br> 明天接着去</p>
????????效果如下：
????????
? ? ? ? 注意：br 是一个单标签(不需要结束标签)
????????4）注释标签
? ? ? ??????????<!--注释内容-->
? ? ? ????????? 注意：在IDEA中可以用ctrl + / 快捷键快速进行注释/取消注释.
2，格式化标签
????????加粗: strong 标签 和 b 标签
????????倾斜: em 标签 和 i 标签
????????删除线: del 标签 和 s 标签
????????下划线: ins 标签 和 u 标签
3，图片标签
<img src="……"> 标签必须带有 src 属性. 表示图片的路径
alt="…"帮助视觉有障碍的用户阅读出图片内容
width="指定图片宽度：直接跟数字，不加单位，默认单位是像素"
height="指定图片高度:"
注意：只指定宽度时高度可以按照图片比例自适应
关于路径：
相对路径：以 html 所在位置为基准, 找到图片的位置.
????????同级路径: 直接写文件名即可 (或者 ./)
????????下一级路径: image/1.jpg
????????上一级路径: ../image/1.jpg
绝对路径：一个完整的磁盘路径, 或者网络路径，例如
????????磁盘路径 D:\rose.jpg
????????网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png
4，超链接标签（a标签）
1）href：即hyper reference(超链接)，必须具备, 表示点击后会跳转到哪个页面
?如：<a href="http://www.baidu.com/">百度</a>
再如：<a href="http://www.baidu.com/"target="_blank">在新页面打开百度</a>
其中2）target:表示打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
3）#跳转
<body>
<h1>目录</h1>
<!-- <a href="http://www.baidu.com/">百度</a>-->
<!-- <a href="http://www.baidu.com/"target="_blank">在新页面打开百度</a>-->
<a href="#about-web">web概述</a>
<a href="#about-html">关于HTML</a>
<a href="#about-css">关于CSS</a>
<a href="#about-js">关于JS</a>
<h1>正文</h1>
<h2 id="about-web">web概述</h2>
<h2 id="about-html">关于HTML</h2>
<h2 id="about-css">关于CSS</h2>
<h2 id="about-js">关于JS</h2>
<!-- <a href="#">表示跳到顶部-->
</body>
?这个#跳转功能相当于我们平常所见的目录，点击可以跳转到当前页面中对应的内容
4）网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="https://www.baidu.com">
<img src="anchor.jpg" width="120">
</a>
点击在网页上所显示的图片就可以跳转到href对应的网页
5）禁止 a 标签跳转：<a href="javascript:void(0);">无法跳转</a>-->
5，表格标签（table标签）
? ? ? ?1）基本结构
???????●? table 标签: 表示整个表格
???????● ?tr: 表示表格的一行
???????● ?td: 表示一个单元格
???????● ?th: 表示表头单元格. 会居中加粗
???????● ?thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的
????????他们之间的关系可以用下面的树状图来体现：
????????
? ? ? ? ?我们可以建一个简单的表格：
代码如下：
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>小A</td>
<td>23</td>
<td>165</td>
</tr>
<tr>
<td>2</td>
<td>小B</td>
<td>25</td>
<td>175</td>
</tr>
<tr>
<td>3</td>
<td>小C</td>
<td>25</td>
<td>177</td>
</tr>
</tbody>
</table>
2）合并单元格
跨行合并: rowspan="n"
跨列合并: colspan="n"
?6，列表标签
????????1）有序列表： ol li
????????2）无序列表：ul? li
????????3)? 自定义列表[重要] : dl (总标签) dt (小标题) dd (围绕标题来说明)
7，排版标签
? ? ? ? div? ?span
????????div 标签, division 的缩写, 含义是 分割.div 是独占一行的, 是一个大盒子.
????????span 标签, 含义是跨度.??span 不独占一行, 是一个小盒子.
8，form标签
? ? ? ??描述了要把数据按照什么方式, 提交到哪个页面中。在没有学习js之前我们所有的用户提交的内容必须包含在一个form（表单）之中，把用户输入并且将内容发送给服务器的这个动作表示提交动作（submit）
? ? ?form表单+button： submit提交按钮
? ? ?form表单可以实现资源和其他资源关联（用户点击提交按钮后，浏览器就会请求另外的资源，通过action属性中的url确定，可以是外部资源，当不写时默认时当前资源）
? ? ?携带着的信息，默认情况下以url中的query-string形式出现
? ? ??
? ? ?
9，input标签
? ? ? ? ● type（必须有），type类型包括：button（按钮），checkbox（多选框），text（文本），file（文件），image（图片），password（密码），radio（单选框）等
????????● name和value：name即给input起个名字，尤其对于单选框，具有相同的name才能多选一，相当于key-value中的key, 而value就是用户在输入框中输入的内容
? ? ? ? ● 对应的url：路径？query-string
? ? ? ? query-string即查询字符串，它本身是可选的，发生在form表单提交之后，是我们目前遇到的最常见的形式，格式如下：？key1=value1&key2=value2&key3=value3…
? ? ? ? ? 注：?在一次form表单中name允许出现重复
代码示例：
<form action="https://www.baidu.com"> <div> <input type="text"name="hello-world"> <input type="text"name="bye"> <input type="text"name="bye"> </div> <div> <button>点击后提交</button> </div> </form>
如下可见提交之后的url显示：
?
?????????● ?checked: 默认被选中. (用于单选按钮和多选按钮)
? ? ? ??● ?单选框和多选框：只有name相同才能视为一组
? ? ? ? ?● ?关于提交：
????????<button>什么都不写，默认就是提交</button> ????????
????????<button type="button">只是显示按钮（button），但不具备提交功能</button>
????????<button type="reset">重置（reset）</button>
????????<button type="submit">提交</button>
10，label标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验
●? for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
11，select标签
? ? ? ? 即下拉菜单，option 中定义 selected="selected" 表示默认选中
????????
?
12，textarea标签
????????文本域中的内容, 就是默认内容, 注意, 空格也会有影响
????????rows 和 cols 也都不会直接使用, 都是用 css 来改的