HTML入门篇复习

快捷键总结

ctrl+v+c
ctrl+s 保存
ctrl+d 删除当前行
ctrl+alt+↓ 整行复制
alt+↑/↓ 整行移动
ctrl+b 浏览器运行代码
ctrl+shift+n 新建html页面

语法：

<标签1>
  <标签2>
    <标签3></标签3>
  </标签2>
</标签1>

head元素

<meta />定义全局信息，元数据信息
<meta name='description' content='描述内容'>
<meta name='keywords' content='关键内容'>
<style></style>css定义网页内部样式
<script></script>定义或者引用js文件
<link>css引用外部样式

body元素

定义网页的主体
网页背景颜色 bgcolor=‘合法的颜色值’
网页字体的颜色 text=‘合法的颜色值’

文本标记

标题元素
在页面中以醒目的方式显示文本

 <h1>~<h6>

特点：

• 字体大小变化
• 字体加粗
• 单独成行，上下之间有垂直间距

属性：align 设置标记内容水平对齐方式
取值：left/center/right

段落标记 paragraph

以突出的形式显示一段文本

<p></p>

特点：单独成行，文本上下有空白距离
属性：align
取值：left/center/right
注意：p标签中不允许嵌套块级元素

html字体默认大小为12px，默认行高为字体大小加4px

预格式化

<pre></pre>

保留源码中的回车和空格

水平线

<hr></hr>

插入图片

img标签的属性
src：source 源，图像资源路径
alt：资源出错的时候，提示的文本
细节：width/height只设置一个，另一个可以自适应

链接

1. 语法

<a href='url'></a>

2. 属性
   href：链接的路径
   target：指定打开链接的方式
   取值：_self默认值，在当前的标签页打开新网址
   _blank 在新的标签页中打开新网址

<a href='xx.zip'>下载</a>
<a href='mailto:1014638917@qq.com'>发送邮件</a>
<script>
  function show(){
  	alert('晚上吃什么');
  }
</script>
<a href='javascript:show()'>执行js代码</a>
<a href='#'>返回页面顶部</a>

锚点

锚点就是页面中的一个记号，可以通过点击超链接的形式，直接回到记号处

1. 使用锚点
   1.1 定义锚点

<a href='#hz'>海贼王</a>
<hr>
<a name='hz'></a>

<a href='xx.html#hl'>葫芦娃</a>

1.2 链接到锚点
< a href=’#锚点名称’>链接其他页锚点< /a>
< a href=‘其他的url#锚点名称’>链接其他页锚点< /a>
页面链接到锚点字后，地址栏会显示锚点的名称

table

表格的宽高，默认是由内容来决定的。
内容多，就宽一些，或者高一些。
是一种特殊的表现方式

table属性	属性效果
height	如果设置的宽高＜表格的内容，表格按照内容走，如果设置的宽高＞表格的内容，表格按设置的走
align	表格水平对齐方式 left/center/right
valign	设置当前行的文本垂直对齐方式 top/middle/bottom
bgcolor	表格的背景颜色 合法颜色值
bordercolor	边框颜色 合法颜色值
cellpadding	设置单元格内边距（边框与内容之间的距离）
cellspacing	设置单元格外边距（边框与边框之间的距离）

tr的属性
align	设置当前得文本对齐方式 left/center/right
valign	设置当前行的文本垂直对齐方式 top/middle/bottom
bgcolor	设置当前行的背景色（不含边框颜色）

tr的属性
width	当前列的宽度，会影响整个表格这一列所有宽度
height	当前列的高度，会影响整个行的高度
align/valign	设置当前列内容的对其方式
bgcolor	设置当前列的背景颜色
colspan	跨列
rowspan	跨行

可选标记

1. 行/列的标题
   <th></th>与<td></td>一样的使用方式

效果：内容文字字体加粗，并且水平居中

2. 表格标题

<caption></caption> 

如果要设置表格标题，必须将< caption>放在< table>之后

表格

1.复杂表格

可以将连续的几行，划分到同一组中，进行统一的管理

1. 表头行< thead>< /thead> 表格开始几行放入表头
2. 表主体< tbody>< /tbody> 表格的中间几行 放入表主体
3. 表尾行< tfoot>< /tfoot> 表格的最后几行放入表尾

2.表格的嵌套

说明：表格中所有的嵌套表格只能写到td中

3.列表的作用

有条理的显示数据
用于布局

4.列表属性

1. 有序列表ol
   type 指定标志符的类型
        1：默认值，数字。
         a/A 大小写的英文字母。
         i/I 落马数字
   start 指定起始编号，无单位的数字。

2. 无序列表ul
   type 设置标志符的类型
         disc 默认值 实心圆
         circle 空心圆
         square 实心方块
         none 不显示标识

3. 列表的嵌套
   注意：所有的嵌套都得写在< li>中

4. 定义列表
   常用于给一类事物名词做出解释说明

<dl>
    <dt>杨树林</dt>
    <dd>
	杨树林是圣罗兰的中式读法
    </dd>
</dl>

5.结构标记（H5新加，推荐使用）

用于描述整个网页的结构，取代div做布局，提升标记的语义性。

1. < header>< /header>
   定义网页或者某个区域的头部内容
2. < nav>< /nav>
   定义网页导航栏
3. < section>< /section>
   定义页面的主体内容
4. < aside>< /aside>
   定义页面的侧边栏信息
5. < footer>< /footer>
   定义网页或者某个区域的底部内容
6. < article>< /article>
   定义与文字相关的内容（如论坛，帖子，微博条目）

表单

1. 作用
   提供可视化的输入控件
   收集用户信息并提交给服务器
2. 表单的组成部分
   前端部分
   提供表单控件，与用户交互的可视化控件
   后端部分
   对提交数据进行处理的接口(user.js)
3. 表单标签
   < form>< /form>
   属性
   1. action
      定义表单被提交时的动作，通常定义的是服务器处理程序的地址（url/接口）
      默认提交给本页
   2. method
      指定表单数据提交方式

get默认值	明文提交，提交的内容会显示在浏览器地址上,提交数据大小有限制，不能超过2kb,向服务器要数据的时候，使用get
post	隐式提交，提交的数据不会显示在地址栏中,提交数据没有大小限制,要传递数据给服务器的时候，使用post
delete
put

3. enctype
   指定表单数据的编码方式，允许将什么样的数据提交给服务器
   1. 默认值 application/x-form-urlencoded
      可以提交任意字符给服务器，不能提交文件
   2. text/plain
      只能提交普通字符（不包含特殊符号，比如&）
   3. multipart/form-data
      允许将文件提交给服务器
4. 表单控件
   含义：能够与用户交互的可视化元素

分类
input元素
textarea	多行文本域
select和option	下拉选择框
其他元素

input元素
在页面中提供了各种各样的输入控件
如，文本框，密码框，单选，多选，按钮等等
< input>或者< input/>

属性
1.type指定input控件的类型
2.name 为控件定义名称，提供给服务器端使用，如果想提交本控件的值，就必须写
3.value控件值，提交给服务器使用
4.disabled无值属性，禁用控件，不能操作控件，而且不能提交了

input详解

1.文本框和密码框
文本框 type=‘text’
密码框 type=‘password’
属性
maxlength 指定限制输入的最大字符数
readonly 无值属性，只能看不能写，但是可以提交
placeholder 占位符，默认显示在控件上文本，做提示用，不会被提交

2.按钮
提交按钮 type=‘submit’
讲表单中的数据提交给服务器

重置按钮 type=‘reset’（不常用）
将表单内容恢复初始化状态

普通按钮 type=‘button’
没有任何功能

value：定义按钮上的文字

3.单选和复选
单选按钮 type=‘radio’
复选框 type=‘checkbox’

属性：
name:除了定义控件名称以外，还起到分组的作用
复选框的name，必须定义为数组
必须添加value值
checked 无值属性，设置默认被选中项

4.隐藏域
type=‘hidden’
想提交给服务器，但是不想给用户看的数据，可以放在隐藏域中。

5.文件选择框
type=‘file’
注意：需要把form的method设置为post（get方法有文件大小上限），enctype设置为multipart/formdata
属性 multiple无值属性，设置多文件上传（按住crtl选择）
6.文本域
允许录入多行数据的文本框

<textarea name='' readonly value='123'></textarea>

cols 指定文本域的列数
rows 指定文本域的行数
超出部分会显示滚动条

7.下拉选择框（下拉选）

<select>
	<option></option>
	......
</select>

select 属性
name 定义下拉选的名称
value 下拉选的值
size 定义显示选项的数量，默认1；如果取值大于1，元素表现为滚动列表
multiple 设置多选，无值属性；只要设置multiple，下拉列表会变成滚动列表。（注意name要写成数组）

option 属性
value 定义选项的值，如果定了选项的值，提交的时候select的value就是选项的value
selected 无值属性，设置默认选中的option

8.其他的元素

1.label  关联文本与表单控件
< label>< /label>
属性for用于绑定要与label关联的表单元素的id值

2.空间分组
< fieldset>< /fieldset>	为form表单分组
< legend>< /legend>  为分组指定标题

3.浮动框架
 允许在一个网页中，再引入另外一个网页。
 增加代码的重用性。
 < iframe>< /firame>
 属性
 src：要引入的网页路径
 width/height：尺寸
 frameborder：浮动框架的边框，0是无边框

其他元素

新表单元素，H5版本中新提出的表单控件
1.电子邮件
< input type=‘email’>
表单提交时，会验证数据是否符合email的规范（有@，并且@后面有内容）

2.搜索类型
< input type=‘search’>
提供了快速清除的功能

3.url类型
< input type=‘url’>
提交时，验证数据是否符合url的规范（http://****）

4.电话号码类型
< input type=‘tel’>
在移动设备中，显示拨号键盘

5.数字类型
< input type=‘number’ >
属性
value:默认显示的值
max:能接收到的最大值
min:能接收的最小值
step:能次调整数字时，步数大小

6.范围类型
< input type=‘range’>
属性：
value=‘10’ 默认显示值
max=‘20’ 最大值
min=‘1’ 最小值
step=‘5’ 步长

7.颜色类型
< input type=‘color’>
提供一个颜色拾取器

8.日期类型
< input type=‘date’>
提供一个日期控件

9.月份类型
< input type=‘month>’
提供一个月的控件

10.周类型
< input type=‘week’>
提供一个星期的控件