Html5基础知识（小白入门）

浅谈HTML5*

1.1 网站（系统）的流程和分工。

1.2 这是一个复杂而完整的过程；

1.3 Web标准的概念及标准

1.4 HTML/css的开发工具
（1）新建、打开、保存
（2）预览页面 （F12快捷键）
（3）建立站点
F4隐藏显示所有面版
1.5 HTML\CSS的测试工具
（1）pc端调试工具
（2）移动端调试工具谷歌浏览器（chrome）(手机模拟器)
1.5 关于HTML的相关概念：
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
XHTML指可扩展超文本标记语言（标识语言）
EXtensible HyperText Markup Language
HTML5指的是HTML的第五次重大修改(新标准)

1.6 HTML5的结构

1.7 HTML的文件命名
文件命名规则：用英文，不用中文
1、.html和.htm;
2.无汉字、无空格、无特殊符号（如标点符号）
3.必须以英文开头，只可以有英文字母、下划线和数字；
4.首页的文件默认命名为：index.html或index.htm；
1.8 HTML的语法
1.<标签名 属性名=“属性值”属性名=“属性值” >文本</标签名>

2.<标签名 属性名=“属性值” />

说明：

1.写在<>中的第一个单词叫做标记，标签，元素。
2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。
3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
4. (单)标记没有结束标签，用“/”代替。
5. 通过不同的标签，HTML文档可以包含不同的内容，比如文本，链接，图片，列表，表格，表单等。

1）文本标题标签

特点：字体加粗、变大；自动换行
作用：用户可以通过标题来快速浏览网页，标题来呈现文档结构是很重要的。一般h1是大标题、h2是小标题….

2）段落标签
<p>段落文本内容</p
特点：段落与段落之间有段间距
作用：标识一个段落

列表标签

HTML中有三种列表，分别是：无序列表，有序列表，自定义列表

*无序列表
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
．．．．．．
</ul>

*有序列表
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
．．．．．．
</ol>

*自定义列表
<dl>
     <dt>名词</dt>
     <dd>解释</dd>
．．．．．．
</dl>

HTML的超链接标签

<a href=“#”   target="_blank"     title=“”>链接内容</a>    -blank是在新窗口打开

<a href=“#” target="_self" >链接内容</a>                  _self是在当前窗口打开

HTML图片标记

插入图片标记

<img   src="目标文件路径及全称"    alt="图片替换文本"     title="图片标题" />

（注意:所要插入的的图片必须放在站点下）
title的作用: 当鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了；
（注：HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的）

alt的作用:当图片因为某种原因不能正常加载时，在图片位置显示的提示信息；
HTML*相对路径的写法
1)当前文件与目标文件在同一目录下

<img src="img01.jpg" />

2)当前文件与目标文件所处的文件夹在同一目录下

<img src="images/img01.jpg"/>

3)当前文件所处的文件夹和目标文件所处的文件夹在同一目录下

<img src="../images/img01.jpg"/>

HTML数据表格的作用及组成
表格的作用：显示数据

<table  width=" 500"  height="300 "  border="1"  bgcolor="red" cellspacing="5"   cellpadding="0">
      <tr>
               <td>内容</td>
      </tr>
</table>
注：一个tr表示一行;    一个td表示一列(一个单元格）
**表格的相关属性**
1）表格的宽度：width="200"
2）表格的高度：height="100"
3）表格的边框：border="1"
4）表格的背景色：bgcolor="red"
5）单元格与单元格之间的间距：cellspacing="20"
6）单元格与内容之间的空隙：cellpadding="10"
7）水平对齐方式：align="left/center/right";
 (注：如果此属性加到table上表示table相对于浏览器的对齐方式；如果加到tr或td上表示单元格内容相对于单元格的对齐方式；)
 垂直对齐：valign=“top/middle/bottom”
8)合并单元格属性：
合并列：colspan=“所合并的列数";
合并行：rowspan=“所合并的行数”;
**HTML表单的应用**
1、表单框
<form name="name01" method="post/get" action="">内容</form>
表单的作用：用来收集用户的信息的;
<form>称为表单标记，属于一个容器标记，表示其它表单标记需要在它的包围中才有效。
2、HTML表单的应用
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019072519292221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2ODIwMQ==,size_16,color_FFFFFF,t_70)
**HTML中div和span的用法**
9）div的用法
<div id="id名“ class="class名"></div>
文档区域，文档布局对象 
10） span的用法
<span></span>文本结点（某一小段文本，或是某一个字）

## 总结：post和get的区别
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程 。
3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
4. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。