<!DOCTYPE html>
告诉浏览器使用“标准模式”去渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
告诉浏览器使用IE 最新版本的 Standards
<html lang=“en”>
告诉浏览器当前页面的语言 比如告诉浏览器翻译工具把英文翻译成本地语言
<meta charset=“utf-8”>
告诉浏览器当前页面的编码方式
<meta name="viewport" content="width=device-width, initialscale=1.0">
告诉浏览器这个页面需要适配移动端 关于viewport的原理后续课程讲解
<meta name="keywords" content="饥人谷 ">
告诉搜索引擎页面是与什么相关的
<meta name="description" content="饥人 谷 培养有灵魂的前端工程师">
告诉搜索引擎页面的描述，搜索引擎会把这个描述显示在搜索结果中
常见标签
• 表示文章、段落、层级
标题 h1~h6 (Heading)
章节 section
文章 article
段落 p (Paragraph)
头部 header
尾部 footer
主要内容 main
次要内容 aside
导航条 nav (Navagation)
层级分块 div (Division)
ol + li (ordered list + list item) 有序列表
ul + li (unordered list + list item) 无序列表
dl + dt + dd (description list + term + data) 自定义列表 一般是一个小标题下面是内容
pre (preview) 一般跟code 搭配一起用的 作用就是展示一些东西的时候
code
hr 分割线 里面没有东西
br (break) 换行
em (emphasis) 用于强调（简单的强调）
strong 表示很重要
b (bold) 加重 （粗体）
blockquote 引用
<ol>
<li>第一步，起床</li>
<li>第二部，刷牙</li>
</ol>
<ul>
<li>首页</li>
<li>课程</li>
</ul>
<dl>
<dt>服装</dt>
<dd>裤子</dd>
<dd>上衣</dd>
<dt>食品</dt>
<dd>面包</dd>
<dd>饮料</dd>
</dl>
code 和 pre比较
相同点：主要应用于浏览器显示计算机中的源代码
不同点： code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能
pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式
联系：<pre>和<code>可以互相嵌套。如以下代码所示：
<pre>
<code>
Hello World
</code>
</pre>
<code>
<pre>
Hello World
</pre>
</code>
效果如下：
Hello World
Hello World
<blockquote>标签和<q>标签都表示“引用”
区别：
一、格式不同
1、q：q标签是行内元素，在zhi内容的开始和结尾处dao会包有【“”】；
2、blockquote：blockquote是块级元素，默认带有左右40px的外间距，不带【“”】。
二、语义不同
1、q：引用的是小段文字；
2、blockquote：引用的是大段的内容块。
全局属性
所有标签都共有的属性
class 表示“特征”，⼀一个元素⼜又多个class，不不同元素可以由相同class 多个class⽤用空格分割
id 表示独⼀一⽆无⼆二的“身份”，⼀一个元素只能有⼀一个id，不不同元素不不能有相同id
style 行内样式 用于在里面写css样式
title 鼠标放上去有对应的属性
contenteditable 内容可编辑属性
tabindex 用tab键 切换 用序号代表切换的顺序 从1到高去切，负值不切换，例如 tabindex=1,tabindex=2
hidden 隐藏一个元素
data-* ， *可以是任何属性 也可以是自定义属性 (想暂存一些数据在标签上可以data-属性)
html实体 (用的时候记得加分号 ;)
< 小于号 <
> 大于号 >
空格
超链接
属性
- href
- target
- download
- rel=noopener
作⽤
- 跳转外部⻚⾯
- 跳转内部锚点
- 跳转到邮箱或电话
href的取值
⽹址
- jirengu.com
- jirengu.com
- //jirengu.com
路径
- /a/b/c 以及 a/b/c
- a.png 或者 ./a.png
伪协议
- javascript: void 0
- mailto: hunger@jirengu.com
- tel: 1312344321
锚点
- href=“#xxx”
- href = “#”
a 的 target 属性
-
_blank 新窗⼝加载
-
_self 在当前⻚⾯加载， 默认属性
-
_parent 在当前⻚⾯框架的⽗级框架加载。如果⽗级不存在就在当前⻚⾯加载
-
_top 在当前⻚⾯框架的顶级框架加载。如果顶级框架不存在就在当前 ⻚⾯加载
a 的 dowmload 属性
- 作⽤
下载URL⽽不是打开⻚⾯
- 注意
- 此属性适⽤于同源URL
- 如果此属性有值，⽤值作为下载⽂件名
table 标签
相关标签
table
thead
tbody
tfoot
tr 行
td 列
th 表头
colgroup 可以给需要得列加样式
caption 表头
属性
colspan 可以把表格连在一起，例如 colspan=3 ,就是把3个表格变成一格
样式
border-collapse : collapse 表格得边框重合
<style>
table {
width: 480px;
border: 1px solid red;
border-collapse: collapse;
margin-top: 30px;
}
cation {
caption-size: bottom;
}
td,
th {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>年纪</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小米</td>
<td>26</td>
<td>女</td>
</tr>
<tr>
<td>小明</td>
<td>28</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总结：这是表格尾巴</td>
</tr>
</tfoot>
</table>
<table>
<caption>
学生信息表
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小米</td>
<td>26</td>
<td>女</td>
</tr>
<tr>
<td>小明</td>
<td>28</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总结：这是表格尾巴</td>
</tr>
</tfoot>
</table>
img标签
⽤法
<img src=“/static/a.png” alt=“logo”>
属性
✓ alt / width / height / src
- alt 当图片无法加载时，现实的文字
object-fit：contain 可以使图片不失真
form 标签
⽤法
<form action=“/login” method=“GET”></form>
作⽤
✓ 提交数据到服务器
属性
✓ action / method
- action 要发给的接口
- method 传送数据的方法 只有两种方法 get 和 post
input 标签
作⽤
✓ 让⽤户输⼊内容
属性
✓ type属性
text / password / checkbox / radio / hidden / button / submit / reset / email / file / number / search / tel / date / time / range / search / url
text 输入内容
checkbox 勾选框(复选框)
radio 单选框 name要相同才会起到单选效果
button 是一个按钮 ，但不会提交，需要绑定JS
submit 默认有个按钮叫提交，可以修改名字，作用就是点提交的时候把当前所在得from 去提交
reset 点击按钮时，新的输入会被清空。默认的不会变
email 点提交的时候 ，如果没有按照邮箱得格式，它会提醒你要按照邮箱的格式填写
file 是一个文件，文件选择
number 输入框，只能输入数字
search 默认里面多了个X，点击可以清空
date 是一个日历，年月日
time 是个时间选择框 会出现上午下午几点
rang 是一个滑动的滑块，范围是0-1之间
url 输入得时候输出会提示叫你输入网址得格式
其他
• name / autofocus / checked / disabled / value / placeholder / required / tabindex
name：接收用户输入的地方 必须要有name,例如 name = "username"
placeholder 输入框得背景 ，提示用户输入，例如 placeholder="用户名"
autofocus 获得焦点，刷新页面就在输入框上显示
checked 对当前输入框勾选（默认的勾选上，也可以手动取消）
disabled 禁止输入，点不了
value 默认值，一般你没填东西默认为空，例如 value="男",现在输入框上显示内容为男
required 提示你要输入内容才能提交
其他输⼊标签
标签
label 有个元素for ，可以for一个元素的id
• <label for=“username”> ⽤户名 </label>
<input name= "zz",id="username">
点击文字用户名，就会跳到对应得输入框 激活对应的输入框
textarea 多行输入
• <textarea name=“comment”>你好</textarea>
select - option
<select name=“score”>
<option value=“10”> 10分</option>
<option value=“20”selected > 20分</option>
</select>
selected 默认的意思，默认20分
为什么要写name，跟value
是因为提交的时候要知道提交的是什么，比如提交了score，20分
<input name="username" type="text" placeholder="用户名" autofocus />
<input type="submit" />
<di>
<dt>爱好</dt>
<dd>足球<input name="hobby" type="checkbox" value="足球" /></dd>
<dd>篮球<input name="hobby" type="checkbox" value="篮球" /></dd>
<dd>游泳<input name="sport" type="radio" value="游泳" /></dd>
<dd>爬山<input name="sport" type="radio" value="爬山" /></dd>
</di>
<input type="reset" />
<input type="email" />
<input type="button" value="提交" />
<input type="file" />
<input type="number" />
<input type="search" />
<input type="date" />
<input type="time" />
<input type="range" />
<input type="url" />
