HTML篇 ①
01 认识几个术语
- 网页：由文字、图片、音/视频和超链接等元素构成
- 浏览器：让用户能看到网页的地方，显示网页
- 浏览器内核：解读网页代码，显示网页。通常指渲染引擎
02 浏览器及其内核
- IE浏览器：Trident内核（已停用）
- Google Chrome谷歌浏览器：Blink内核（Chromium内核）
- 开发者首选浏览器：兼容性好，使用群体大，较多浏览器使用的也是Chromium内核
- Firefox火狐浏览器：Gecko内核
- Opera欧朋浏览器：Blink内核
- Safari浏览器：Webkit内核
03 网页的构成
网页主要由结构、表现、行为三部分组成
- 结构：HTML，即文字、图片、超链接等网页元素
- 表现：CSS，即颜色、大小、角度、位置等元素的外观属性
- 行为：JavaScript，即鼠标经过，文字会变色、点击按钮，会弹出确认框等动态效果
04 HTML的概念
HTML：Hyper Text Markup Language 超文本标记语言
超文本标记语言：是使用标记标签来描述网页的一种语言
05 HTML标签的组成
标签由开始标签、结束标签和内容组成
- 尖括号（<>）里是标签名称
- HTML元素以开始标签起始，以结束标签终止，结束标签里有一个斜杠（/）
- 某些HTML元素没有结束标签，叫做空元素，如<br />，这类标签不能填写内容
- 大多数HTML元素拥有属性
- 标签使用小写
例子：
<p>Hello World!</p><p>：开始标签(Opening tag)
</p>：结束标签(Closing tag)
Hello World!：内容(Content)
p：标签名称(Tag name)
/：斜杠(slash)
HTML篇 ②
01 HTML的基本结构
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><!DOCTYPE html>：声明文档类型，告诉浏览器这个文档是HTML5版本
<html>：文档的根元素
<head>：不会在页面中显示的内容，一般放置网页的元信息，网址标题、网址的关键字描述等
<body>：内容会显示在页面中
02 head的内容
<head>
<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><meta charset="UTF-8">：设置编码格式，utf-8是万国码，能让浏览器识别所有常见的字符
<meta http-equiv="X-UA-Compatible" content="IE=edge">： 保证IE浏览器以最高级模式渲染文档
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置页面宽度和缩放比例
<title>Document</title>：设置网址标题
03 注释
例子：
<!-- <p>Hello World!</p> -->注释以<!--开头，以-->结尾，注释内容不会被浏览器解析，即不会在网页中显示。
04 常用标签
- <h1>~<h6>：表示文章的标题，一共6级
- h：heading 标题
- 从h1到h6，字体大小逐级减小
- 都设置了display: block;，都是块盒元素
- 都设置了font-weight: bold;,都是粗体显示
- <p>：表示文章段落
- p：paragraph 段落
- 设置了display: block;，是块盒元素
- <div>：
- div：division 区域
- 设置了display: block;，是块盒元素
- 它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。
- <span>：
- 一个通用目的的行盒标签（即不会产生换行），不带有任何语义
- <br />：换行，属于空元素
- <hr />：水平线，属于空元素
HTML篇 ③
01 链接
<a>：可以从一个页面指向另一个目的地的超文本链接
a：anchor 锚点
行盒元素
href属性的值为跳转的链接地址
target属性的值指定在何处显示链接
href的值为“#”时，为空链接，跳转停留在当前页面
target的值默认为“_self”，指在当前页面显示；为“_blank”时，指在新的标签页打开
问①：如何禁用a标签跳转页面或定位链接？
href属性，使其指向空或不返回任何内容<a href="">xxx</a><a href="#">xxx</a><a href="javascript:void(0);">xxx</a><a href="javascript:;">xxx</a>
阻止其默认行为html：<a href="https://www.baidu.com/" onclick="return false;">百度</a>css：pointer-events: none;js：Event.preventDefault()
02 图像
<img>：HTML页面中的图像
img：image 图像
行盒元素
空元素
src属性的值为图像的 URL 地址
alt属性的值为图片无法加载时，告诉用户的图片描述信息
height与width属性用于设置图像的高度与宽度
border属性用于设置图片的边框粗细
align属性用于设置图片对齐位置，默认值为left，可设置值有center和right
问②：href和src的区别？
href用于在当前文档和引用资源之间确立联系；src用于替换当前元素
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本、img图片等元素
<script src="script.js"></script>：当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也是为什么不将js脚本放在头部的原因
href是Hypertext Reference的缩写，指向网络资源所在的位置，建立和当前元素(锚点)或当前文档(链接)之间的链接
<link href="style.css" rel="stylesheet" />：浏览器会识别该文档为css文件，就会并行下载资源而不会停止对当前文档的处理。这也是为什么使用link来加载css，而不是使用@import
HTML篇 ④
01 列表
- <ol>：ordered list 有序列表，会在内部的列表项前面产生数字编号。
- reversed属性用于产生倒序的数字列表
- start属性的值为列表的起始编号
- type属性用于指定数字编号的样式
- a：小写字母
- A：大写字母
- i：小写罗马数字
- I：大写罗马数字
- 1：整数（默认值）
- <ul>：unordered list 无序列表，会在内部的列表项前面产生实心小圆点，作为列表符号。
- <ol>和<ul>都是块盒元素
- 开发常用<ul>
- <li>：列表项，用在<ol>或<ul>容器之中。
02 媒体
- <video>：HTML页面中的视频
- 块盒元素
- src属性用于放置视频文件的网址
- controls属性用于显示播放器
- height与width属性用于设置视频播放器的高度与宽度
- autoplay属性用于控制视频是否自动播放
- loop属性用于控制视频是否循环播放
- muted属性用于控制视频是否默认静音
- <audio>：HTML页面中的音频
- 块盒元素
- src属性用于放置音频文件的网址
- controls属性用于显示播放器
- autoplay属性用于控制音频是否自动播放
- loop属性用于控制音频是否循环播放
- muted属性用于控制音频是否默认静音
03 表格
- <table>：表格标签
- 块盒元素
- <caption>：表格标题，如果有，常常作为<table>的第一个子元素出现
- <thead>：表格表头
- <tbody>：表格主体
- <tfoot>：表格表尾
- <thead>、<tbody>、<tfoot>都是块盒元素
- <th>：表格表头单元格
- scope属性用于表示该单元格到底是栏的标题，还是列的标题。
- <tr>：table row 表格的行，是表格的一级子元素
- <td>：表格主体单元格
- colspan属性用于规定单元格可横跨的列数
- rowspan属性用于规定单元格可横跨的行数
HTML篇 ⑤
01 表单
- <form>：定义一个表单，用于收集用户的输入信息
- 块盒元素
- action属性的值为服务器接收数据的URL地址
- method属性的值为提交数据的 HTTP 方法，有：
- get：表单数据作为 URL 的查询字符串发送
- post：表单数据作为 HTTP 数据体发送
- name属性的值为表单的名称
- target属性的值指定在何处显示服务器返回的数据，有：
- _self：当前窗口
- _blank：新建窗口
- <label>：文字说明
- 行盒元素
- 提供控件的文字说明，帮助用户理解控件的目的
- for属性关联相对应的控件，它的值是对应控件的id属性
- <label for="user">用户名：</label>
<input type="text" name="user" id="user"> - <input>：输入框，用来接收用户的输入
- 行盒元素
- 空元素
- type属性的值指定控件类型
- value属性的值为控件的值
- disabled属性控制是否禁用控件
- required属性控制控件是否必填
- name属性的值为控件的名称，用于向服务器提交数据时，控件键值对的键名
- <button>：按钮
- 没有默认行为
- 行块盒
- type属性的值指定按钮类型，有：
- button：没有默认行为，由脚本指定按钮的行为
- submit：点击后将数据提交给服务器
- reset：将所有控件的值重置为初始值
- disabled属性控制是否禁用按钮
- value属性的值为按钮的值（与name属性配合使用），将以name=value的形式，随表单一起提交到服务器
- name属性的值为按钮的名称（与value属性配合使用），将以name=value的形式，随表单一起提交到服务器
- <select>：下拉菜单
- 与<option>配合
- disabled属性控制是否禁用控件
- name属性的值为控件名
- multiple属性控制是否可以选择多个菜单项，默认只能选一项
- required属性控制控件是否必填
- <option>：菜单项
- selected属性控制该菜单项是否为默认值
- value属性的值为该项提交到服务器的值
- disabled属性控制是否禁用控件
- <label for="pet-select">宠物：</label>
<select id="pet-select" name="pet-select">
<option value="">--请选择一项--</option>
<option value="dog">狗</option>
<option value="cat">猫</option>
<option value="others">其他</option>
</select> - <textarea>：多行的文本框
- 块盒元素
- cols属性的值为文本框的宽度，默认值为20
- rows属性的值文本框的高度
- disabled属性控制是否禁用控件
- minlength、maxlength属性的值为允许输入的最小、大字符数，如果未指定maxlength的值，用户可以输入无限数量的字符
- placeholder属性的值为输入为空时显示的提示文本
- autofocus属性控制是否自动获得焦点