HTML5基础知识

欢迎查看我的博客：逸乐的博客

认识WEB

「网页」 主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。

「浏览器」 是网页显示、运行的平台。

「浏览器内核」(排版引擎、解释引擎、渲染引擎)

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。
chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera blink 现在跟随chrome用blink内核。

Web标准

「构成」 👉 结构标准，表现标准和行为标准

  • 结构标准用于对网页元素进行整理和分类(HTML)
  • 表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)
  • 行为标准用于对网页模型的定义及交互的编写(JavaScript)

「Web标准的优点」👇

  • 易于维护：只需更改CSS文件，就可以改变整站的样式
  • 页面响应快：HTML文档体积变小，响应时间短
  • 可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
  • 设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
  • 搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名

HTML初识

HTML初识

  • 「HTML」(Hyper Text Markup Language):超文本标记语言

「所谓超文本，有2层含义：」

1.因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
2.不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

HTML格式

1
2
3
4
5
6
7
8
9
10
11
<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>
  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <p> 元素定义一个段落
    注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

HTML编辑器

  • VS Code：https://code.visualstudio.com/ (使用中)
  • Sublime Text：http://www.sublimetext.com/

    VS Code编辑器常用插件

    1.VS Code 改成中文版:

    首先点击扩展（也就是四个小方格），在搜索栏内输入 Chinese。
    点击 install ，下载安装简体中文，在右下方会出现 restart 点击就好。
    再重启 vs 后就会变成简体中文。

    2.Auto Close Tag

    (自动闭合HTML/XML标签)

    3.Auto Rename Tag

    (自动完成另一侧标签的同步修改)

    4.Bracket Pair Colorizer

    (给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色)

    5.markdownlint

    (markdown语法纠错)

    6.One Dark Pro

    (设置主题颜色)

    7.open in browser

    (vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari)

    8.vscode-icons

    (设置文件图标主题)

HTML常见元素

1. 标题元素（块级元素）

HTML 标题（Heading）是通过<h1>~<h6>标签来定义的。 

1
2
3
4
5
6
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

2. 段落元（块级元素）

HTML 段落是通过标签 <p> 来定义的。

1
2
<p>这是一个段落。</p>
<p>这是一个段落。</p>

3. 链接a元素（行内元素）

HTML 链接是通过标签 <a> 来定义的。

1
2
3
<a href="https://www.runoob.com target=“_self">这是一个链接使用了 href 属性</a>
target="_self"  默认窗口弹出方式  
target="_blank" 新窗口弹出
属性 作用
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

4. img元素（内联元素）

HTML 图像是通过标签 <img> 来定义的.

1
<img src="/images/logo.png" width="258" height="39" />

img属性标记：

属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框的高度

5. ol ul dl 列表

（1）ul无序列表元素（块级元素）

HTML ul无序列表通过<li> 来定义的.

1
2
3
4
<ul>
  <li>无序列表</li>
  <li>无序列表</li>
</ul>

（2）ol有序列表元素（块级元素）

HTML ol有序列表通过<li> 来定义的.

1
2
3
4
<ol>
  <li>有序列表</li>
  <li>有序列表</li>
</ol>

（3） dl自定义列表元素（块级元素）

HTML dl自定义列表通过<dt> <dd> 来定义的.

1
2
3
4
<dl>
  <dt>自定义列表</dt>
  <dd>自定义列表不仅仅时一列项目，而是项目及其注释的组合</dd>
</dl>

6. div元素（块级元素）和span元素（内联元素）

<div>标签本身没有语义，仅起到分割区域的作用。<span>元素没有语义，存在的意义在于它提供了一种将文本的一部分独立出来的方式。

1
2
<div>盒子标签</div>
<div>盒子标签<span独立部分></span></div>

7.table元素（块级元素）

table、tr、td，他们是创建表格的基本标签，缺一不可

  • table用于定义一个表格标签。
  • tr标签 用于定义表格中的行，必须嵌套在 table标签中。
  • td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
  • th 用于定义表格中的表头，必须嵌套在<tr></tr>标签中。
    1
    2
    3
    4
    5
    6
    <table>
      <tr>
        <td>单元格里的文字</td>
        ...
      </tr>
    </table>

表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。

1
2
3
<table>
   <caption>我是表格标题</caption>
</table>

表格属性：

属性名 含义 属性值
border 设置表格的边框 像素值
cellspacing 设置单元格与单元格边框之间的空白间隙 像素值（默认2像素）
cellpadding 设置单元格内容与单元格边框之间的空白间隙 像素值（默认1像素）
width 设置表格宽度 像素值
height 设置表格高度 像素值
align 设置表格在网页中的水平对齐方式 left,center,right

注：三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

合并单元格合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。

  • 跨行合并：rowspan=”合并单元格的个数”
  • 跨列合并：colspan=”合并单元格的个数”

表格总结：

标签名 定义 说明
<table></table> 表格标签 就是一个四方的盒子
<tr></tr> 表格行标签 行标签要再table标签内部才有意义
<td><td> 单元格标签 单元格标签是个容器级元素，可以放任何东西
<caption></caption> 表头单元格标签 它还是一个单元格，但是里面的文字会居中且加粗
<th></th> 表格标题标签 表格的标题，跟着表格一起走，和表格居中对齐
clospan和rowspan 合并属性 用来合并单元格的

注意：
1.<thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>放表格的脚注之类。
4. 以上标签都是放到table标签中。

8.form表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
input控件：

1
<input type="属性值" value="你好">

属性值：

属性 属性值 描述
text 单行文本输入框
password 密码输入框
radio 单选按钮
type checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域

input属性小结：

属性 说明 作用
type 表单类型 用来指定不同的控件类型
value 表单值 表单里面默认显示的文本
name 表单名字 页面中的表单很多，name主要作用就是用于区别不同的表单。
checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

label标签

  • label 标签为 input 元素定义标注（标签）。
  • label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
    作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢

  • 第一种用法就是用label标签直接包含input表单， 适合单个表单选择
  • 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。 
    1
    2
    3
    4
    5
    6
    7
    第一种
     <label> 用户名： 
       <input type="radio" name="usename" value="请输入用户名">   
     </label>
     第二种
     <label for="sex">男</label>
     <input type="radio" name="sex"  id="sex">

textarea控件(文本域)

  • 通过textarea控件可以轻松地创建多行文本输入框.
  • cols=”每行中的字符数” rows=”显示的行数” 我们实际开发不用 
    1
    2
    3
    <textarea >
       文本内容
     </textarea>

select下拉列表

  • 如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
  • 在option 中定义selected =” selected “时，当前项即为默认选中项。
  • 我们实际开发会用的比较少 
    1
    2
    3
    4
    5
    6
    <select>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      ...
    </select>

form表单域

  • 收集的用户信息怎么传递给服务器？
    通过form表单域
  • 目的：
    在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。 
    1
    2
    3
    <form action="url地址" method="提交方式" name="表单名称">
      各种表单控件
    </form>

常用属性：

  • 每个表单都应该有自己表单域。后面学 ajax 后台交互的时候，必须需要form表单域。
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式，其取值为get或post。
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单。

GET 和 POST 的区别

  • GET在浏览器回退时是无害的，而POST会再次提交请求。
  • GET请求会被浏览器主动cache，而POST不会，除非手动设置。
  • GET请求只能进行url编码，而POST支持多种编码方式。
  • GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
  • GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
  • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

HTML 元素语法:
1.HTML 元素以开始标签起始
2.HTML 元素以结束标签终止
3.元素的内容是开始标签与结束标签之间的内容
4.某些 HTML 元素具有空内容（empty content）
5.空元素在开始标签中进行关闭（以开始标签的结束而结束）
6.大多数 HTML 元素可拥有属性