前端之HTML基础知识

1.WIN中的一些快捷键

• ctrl+c 复制

• ctrl+v 粘贴

• ctrl+x 剪切

• ctrl+s 保存

• ctrl+a 全选

• ctrl+z 撤销上一个操作

• ctrl+y 还原上一个操作

• alt+f4 关闭当前程序

• win+E 打开资源管理器

• alt+tab 切换程序 （注意整个过程中 alt是长按不放的）

• win+D 切换到桌面 （鼠标点击右下角）

• win+R 快速运行，打开软件，cmd命令行等

• ---

  calc  运行计算器

• mspaint   运行画图

• cmd   运行命令行

• notepad    运行记事本

• ---

  win+L 锁屏

• win+方向键 最大化、还原/最小化窗口

• ctrl+alt+del 会显示以下选项：锁定该计算机、切换用户、注销、更改密码、启动任务管理器

• f2 可以重新命名文件

2.五大常见浏览器介绍(内核做个了解)

     1）IE （edge）（Trident）

     2）火狐（firefox）（Gecko）

     3）谷歌（chrome）（blink）

     4）苹果（safari）（webkit）

     5）欧朋（Opera）（blink 早期：presto ）

3.认知HTML

概念：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

4.认知标签

1). 标题标签 <hn>标题内容</hn>  设置一个标题 n的取值范围是1-6  1的权重最高，6最小
2). 段落标签 <p>段落内容</p> 
3). 水平线标签 <hr /> 单标签  作用是呈现一个水平线
4). 换行标签 <br />  单标签 作用是换行

字体格式化标签
5). 加粗字体 <strong>字体加粗</strong> <b>字体加粗</b>
6). 倾斜字体 <em>字体倾斜</em> <i>字体倾斜</i>
7). 字体贯穿线  <del>字体贯穿</del> <s>字体贯穿</s> 
8). 字体下划线 <ins>字体下划线</ins> <u>字体下划线</u>

5.路径地址

绝对地址：从盘符或者http://出发去找目标文件的过程就是绝对路径

<img src="http://www.baidu.com/logo.png">
<img src="c:">

 相对地址：从当前文件出发去找目标文件的过程就称之为相对路径

• 如果当前文件和目标文件在同一个文件夹的话，路径直接写目标文件的名称即可

• 如果当前文件和目标文件不在同一个文件夹，那么需要先找到目标文件对应的文件夹

6.跳转的分类

链接标签：<a href="链接的地址" target="链接的打开方式" /> 只要被a标签包裹就可以跳转

1). 站外跳转：http://www.baidu.com
2). 站内跳转：写本地文件路径
3). 锚点跳转（页面内部跳转）：
    在需要跳转的标签上添加 id="自定义id名"   如：<p id="myid"></p>
    让a标签的href属性等于之前自己自定义的id名 如：<a href="#自定义的id名字" />

target的取值：

    _self 默认值 覆盖当前页面打开                 _blank 新窗口打开

7.列表的注意

     1) ul:无序列表     ol：有序列表        dl:自定义列表

<ul></ul>或者<ol></ol>中只能嵌套<li></li>，直接在<ul></ul><ol></ol>标签中输入其他标签或者文字的做法是不被允许的。

     2)<li>与</li>之间相当于一个容器，可以容纳所有元素。

     3)<dl></dl>中只能嵌套<dt></dt>和<dd></dd>，直接在<dl></dl>标签中输入其他标签或者文字的做法是不被允许的。

     4)<dd></dd>之间相当于一个容器，可以容纳所有元素。<dt></dt>一样

8.创建表格

	<thead>
		<tr>
			<th>姓名</th>
			<th>年纪</th>
			<th>性别</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>小明</td>
			<td>18</td>
			<td>男</td>
		</tr>
		<tr>
			<td>小强</td>
			<td>18</td>
			<td>女</td>
		</tr>
	</tbody>

表格属性：

width  表格的宽度         height 表格的高度          border 表格的边框 
align  表格的对齐方式       cellspacing 单元格与单元格的间距        cellpadding    单元格与单元格内容的间距

合并单元格：

跨行合并 rowspan 上下合并 将rowspan写在上面的单元格上

跨列合并 colspan 左右合并 将colspan写在左边的单元格上

需要合并几个 这个值就是几 一旦合并了多余的单元格需要删掉多余的单元格

9.表单

作用：收集用户信息发送给后台三大组成部分：

1. 表单域 （将内部包含的表单信息都收集起来发送给后台）

2. 提示文本（提示用户当前表单的输入内容）

3. 表单 （真正用来收集用户信息）

表单的分类：

<input type="">
    type的取值：
    text 单行文本输入框
    password 密码框
    radio 单选框（在多个里面选择一个） 单选框要生效必须具备name属性 并且同一种类型的单选框的name取值必须一样
    checkbox 复选框（在多个里面选择某几个）
    button 普通按钮
    file 用户上传控件
    submit 提交按钮

   textarea 多行文本输入框
   select 下拉菜单

表单补充：

radio和checkbox 默认选中项      checked
select框的默认选中项 selected   写在option里
label标签的使用(label将文件和表单关联起来     点击文字相当于点击了表单)

10.表单域

<form action=""></form>

action 提交的后台地址
method 提交的方法

 form表单提交需要添加上name属性 才可以将表单里面的内容提交出去

11.H5新增的标签及其表单属性

header,nav,section,footer,aside,article  

这些新增的标签不会带来任何视觉效果的改变，它的作用仅是增加了语义性

header 表示header里面包裹的东西是网站的头部区域

nav 表示nav里面包裹的东西是网站的导航

section 表示里面包裹的东西是网页的某一个模块

footet 表示footer标签里面包裹的东西是网页的页脚

aside 表示aside标签里面包裹的东西是网页的侧边栏

article 表示article标签里面包裹的东西是网页的文章页

H5新增的表单新属性：

1）placeholder 占位文本

2）autofocus 自动获取焦点

3）autocomplete 自动补全(自动补全功能 前提是该字段必须成功提交过一次 on是默认值 自动开始该功能 off 关闭该功能)

4）required 自动验证表单(自动验证表单不能为空    required="required")

H5新增的表单：

<input type="range">    滑块
<input type="date">        日期控件
<input type="number">    唤醒数字键盘

<input type="color">

多媒体标签:

<video autoplay>
	<source src="视频1.ogg">
	<source src="视频1.mp4">
	<source src="视频1.webm">
	<a href="#">你的浏览器不支持video，点击升级吧</a>
</video>

<audio>
	<source src="音频1.ogg">
	<source src="音频1.mp3">
	<source src="音频1.webm">
	<a href="#">你的浏览器不支持audio，点击升级吧</a>
</audio>

标签的常用属性：

autoplay   自动播放    controls  播放控件    loop   循环播放

字符集：

  utf-8：全球通用        gbk： 国标(汉字)