HTML入门级介绍

HTTP知识点

  • URI（Uniform Resource Identifier）即统一资源标识符
  • URL（Universal Resource Locator）即统一资源定位符

例如：https://github.com/favicon.ico既是一个URL，也是一个URI

每一个URL都是URI，但不是每一个URI都是URL，URI还包括一个子类叫做URN（Universal Resource Name）即统一资源名称：只命名资源而不指定如何定位资源

HTTP和HTTPS

URL开头会有HTTP或HTTPS，这个就是访问资源需要的协议类型，有时还会看到ftp、sftp、smb开头的URL，他们均是协议类型。HTTP（Hyper Text Transfer Protocol）中文名叫做超文本传输协议，用于从网络传输超文本数据到本地浏览器的传送协议，能保证高效而准确地传送超文本文档。HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer）：是以安全为目标的HPTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层。Google以及iOS App在2017年1月1日均对HTTPS做出相关规定，HTTPS已经是大势所趋。

网络请求

请求可分为四部分内容：请求方法、请求头、请求网址、请求体

常见请求有：GET、POST

GET：直接输入网址

POST：大多提交表单时，例如登录

GET请求参数包含在URL里，POST都是通过表单形式传输数据，会包含在请求体里,GET提交数据最多只有1024字节，POST无限制（保护密码、文件较大）

请求头用来说明服务器要使用的附加信息，有User-Agent、Cookies、Referer等

常见服务器请求状态码：

  • 200-请求成功
  • 301-资源（网页等）被永久转移到其他URL
  • 404-请求的资源（网页等）不存在
  • 500-服务器内部错误

HTML-Web-浏览器简介

  • HTML不是编程语言，而是一种标记语言
  • 超文本：可以加入图片，声音，动画，可以一个文件跳到另一个文件
  • 常用浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari、Opera
  • 浏览器内核人（渲染引擎）：读取网页内容，计算网页的显示方式并显示页面

Web标准是由W3C（万维网联盟）组织和其他标准化组织指定的一系列标准的集合

浏览器不同，显示页面或者排版就有些许差异，主要包括：结构（HTML）、表现（CSS）、行为（Javascript）————最佳体验方案：三者相分离

HTML标签

HTML语法规范
标签成对：<html>  </html>

单标签：<br />

双标签关系：包含关系，并列关系
HTML基本机构标签
标签名 定义 说明
html HTML标签 页面中最大的标签，我们称为根标签
head 文档的头部 注意在head标签中我们要设置的标题是title
title 文档的标题 让页面拥有一个属于自己的网页标题
body 文档的主体 元素包含文档的所有内容

VS-Code之！主体结构

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>我的第一个网页</title>
</head>
<body>
	Hello World!
</body>
</html>
！DOCTYPE

文档类型声明，告诉浏览器哪种HTML版本来显示网页HTML5（必须第一行）

lang语言

language的缩写：en英语、zh-CH中文

charset字符集

编码方式：GBK、UTF-8（万国码）一定要写

HTML常用标签
  • 语义标签，区分标题，段落等
  • 标题标签h，一行显示
  • 段落和换行标签p，强制换行br

文本格式化标签：

语义 标签 说明
加粗 strong或者b 推荐strong，语气更强烈
倾斜 em或者i 推荐em，语气更强烈
删除线 del或者s 推荐del，语气更强烈
下划线 ins或者u 推荐ins，语气更强烈

标签div和span没有语义，只是一个盒子，用来装内容的。div是一个超大盒子，一行只能一个div。而span是个小盒子，一行可以多个。

img图片
在HTML标签中，<img src="url" />
属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的文字
title 文本 提示文本。鼠标放到图像上显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

border在HTML5已不支持（bordeR）

属性均采取键值对的形式：key= “value”

超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
  • 弹出方式：_self：在该窗口打开、__blank：新窗口打开页面
  • 跳转目标：#表示空链接
  • 锚点链接：设置href属性名为**#名字**的形式、id属性=刚刚的名字
注释标签：!–我是一个注释–

表格标签

用于展示数据（不是来布局页面的）

<table>
	<tr>
		<td>文字</td>
	</tr>
</table>
# <table>定义表格
# <tr>用于定义单元格中的行，必须嵌套在<table>中
# <td>用于定义表格中的单元格，必须嵌套在<tr>中

表格属性，实际开发不常用，后面通过CSS来设置

属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式
border 1或 “” 规定表格单元是否拥有边框，默认为"",表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度

表格结构标签

<thead>表格的头部区域<tbody>表格的整体区域

合并单元格

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

列表可以分为三大类：无序列表、有序列表、自定义列表

# 主标签只能嵌套<li>，其中可以容纳所有元素
# 无序列表（重点）、排序整齐，没有顺序
<ul>
	<li></li>
	<li></li>
	....
	<li></li>
</ul>
# 有序列表（不常用，了解即可）
<ol>
	<li></li>
	<li></li>
	....
	<li></li>
</ol>
# 自定义列表、一个小标题，其他围绕他们说明
<dl>
	<dt></dt>
	<dd></dd>
	....
	<dd></dd>
</dl>
表单标签

目的：收集用户信息

一个完整的表单由表单域、表单控件（表单元素）和提示信息三部分组成

表单域：包含表单元素的区域

在HTML中，form标签用于定义表单域，以实现用户信息的收集与传递，递交到服务器

<form action="url地址" method="提交方式" name="表单域名称">
	# 各种表单元素控件
</form>

表单元素

  • input输入表单元素
# 用于收集用户信息。<input type="属性值" />。
text：文本框、里面可以输入任何文字
password：密码框、用户看不见输入的密码
radio：单选按钮、实现多选一
name：表单元素名字、必须有相同的名字
checkbox：复选框、实现多选
value：显示默认值
checked：默认选择
submit：提交到服务器
reset：清楚表单中的所有数据
button：定义可点击按钮，通常后期结合js一起使用
file：文件域、上传文件使用

<label for="名字">内容</label>
<input type="radio" name="名字" id="名字" />
  • select下拉表单元素
# 定义下拉列表
<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>
  • textarea文本域元素
# 大量输入文本，经常用于留言板、评论

查找文档