快捷键
代码格式化 shift + alt + f
向上或向下移动一行 alt + up/down
快速复制一行代码 shift + alt + up/down
快速保存ctrl + s
快速查找ctrl + f
快速替换ctrl + h
什么是HTML：
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
2.HTML 不是一种编程语言，而是一种标记语言 (markup language)。
标记语言是一套标记标签 (markup tag)。
声明<!DOCTYPE html>//避免怪异化
基本骨架
<html> 开始 </html> 结束
<head> </head> 定义文档头部 不会展示给读者
<title>有利于网页SEO优化
<meta charset="utf-8">当前使用的格式是utf-8
<body> </body> 文档主体 给读者看的
标签
HTML标题只能用于标签
<h1>-<h6> h$*6 生成一到六级标签
<h1 align = "left | center | right"> </h1>
<p></p> 段落标签
<br /> 换行
<hr/> 在html创建水平线 color width 单位 px 设置宽度 size 设置高度 align 水平线对齐方式
图片标签
<img> 标签用于定义 HTML 页面中的图像。
<img src="1.jpg" > 图片在同一文件夹下 width height title 鼠标悬停在图片上的提示
同级关系
<img src="H:\1\2.png"> 绝对路径
<img src="./img/1.jpg"> 相对路径 ./子级关系
<img src="../1.jpg"> ../父级关系
<img src="网络地址粘贴"> 网络路径
超文本链接
<a href="https://www.icourse163.org/">mook</a>
href 属性描述链接地址
可以加图片跳转
<a href="https://www.icourse163.org/">
<img src="1.jpg" width="300px">
</a>
文本
<p>白菜</p>
<em>em白菜</em> 斜体加重语气
<i>i白菜</i> 斜体
<b>b白菜</b> 加粗
<strong>strong白菜</strong> 加粗加重语气
<span>span白菜</span> 无效果 为css添加方便存在
<del>del白菜</del> 删除
可嵌套在p标签使用
列表
有序列表-可嵌套 ol + li 快捷键 ul>li*3
<ol type="I">
<li>苹果</li>
<ol type="i">
<li>烟台</li>
<li>红富士</li>
</ol>
<li>橘子</li>
<li>香蕉</li>
<li>梨</li>
</ol>
无序列表-可嵌套 ul + li 无序 导航
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
<ul type="square">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
表格
table 表格
tr 行
td 列
快捷键表格：table>tr*2>td
表格属性
border 边框
width 宽度
height 高度
合并单元格
colspan 水平合并
rowspan 垂直合并
水平合并，保左删右
垂直合并，保上删下
表单
表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
表单域 <form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>
表单元素 组成：表单标签-form 表单域-输入框 表单按钮-botton
用户名：<input type="text" name="用户名">
密码：<input type="password">
<input type="submit" value="登录">
标签
<label> 标签为 input 元素定义标注（标签）。<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
表单元素
select
使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。
<select>
<option>选项1</option>
<option>选项2</option> ...
</select>
testarea
-
使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
-
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
-
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
语法
<textarea rows="3" cols="20"> 文本内容 </textarea>
通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”，
我们在实际开发中不会使用，都是用 CSS 来改变大小。
表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.这三组表单元素都应该包含在form表单域里面,并且有 name 属性.
有三个名字非常相似的标签:表单域 form 使用场景: 提交区域内表单元素给后台服务器文件域 file 是input type 属性值 使用场景: 上传文件文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…4. 我们当前阶段不需要提交表单元素,所以我们只负责表单元素的外观形态即可.
例子
<form>
<input type=“text " name=“username”>
<select name=“jiguan”>
<option>北京</option>
</select>
<textarea name= "message">
</textarea>
</form>块元素 独占一行，可设置width，height，可包含块元素或内联元素
例：div,form,h1-h6,hr,p,table,ul,ol
内联元素 不独占一行，不能设置width,不包含块级元素
例：a,b,em,i,span,strong
行内块级元素（不换行，可识别width）
例：button,img,input
容器元素：div
新标签
<nav></nav> 导航
<section></section> 定义文章的节：章节，页眉
<aside></aside> 侧边栏
<footer></footer> 脚部
<article></article> 独立完整的内容块
