HTML入门
HTML入门
在这个时候，RNG得了冠军，首先恭喜RNG恭喜uzi，六年来的努力没有白费，有梦想有坚持的人总是那么可爱。其次我刚好看了篇文章，叫“我就想做一个一事无成的人啊”，当然看了这个标题我就知道这应该是一篇鸡汤，没什么意思。所以...........我果断的看完了，哈哈哈哈哈哈哈哈！既然看完了就总结一下吧，这篇文章说的就是他是一个很努力很优秀的人，就是在父母眼里中别人家的孩子（这应该不难理解吧），他从小到大都是争强好胜的，任何事都想去争个第一，喜欢听到别人夸奖。然而，有一天他突然觉得累了想为自己而生活，想做自己想做的事，不在去争个一二，不在强迫自己，在这种心境下可能就写出了这篇鸡汤出来。看完我就在想我是不是应该也要做自己想做的事呢，我也要为自己而活，在这个想法直冲脑门时我抬起了头，就是这个时候，我看到了满电脑的代码，我很庆幸，我终于清醒了，哈哈哈哈哈哈！M的！还好没入魔。我认为的是所有的世俗之人都是在有所成就之后，才敢说我想活得一事无成吧，真正一事无成的人还想不到这里去，没有经历过大风大浪都不会懂什么叫平静吧！（肯定，我也不懂）总的来说，我们要努力，uzi六年没放弃他实现了，我们也不差，相信自己。好了，说了这么多废话我们该走进现实了，我们先来了解下基本的HTML。
HTML概览（语法）
-
DOCTYPE（doctype） —— 目前最推荐的是HTML文档类型声明，写法是
<!DOCTYPE html>,在DOCTYPE之前只能有注释和空白，大小写无所谓的，但是不太推荐用写。DOCTYPE会告诉浏览器你的语法，可能还会影响到JS的功能（我们以后会说）。 -
标签 —— 标签分为有内容标签例如：<script>/<body>/<span>/<button>和可省略标签，后面会慢慢知道的，新手没必要去纠结。
-
属性 —— 所有标签（包括<html>）都是有属性的，有布尔属性和全局属性。
-
注释 —— 我们现在了解普通注释写法。
-
空白 —— 和markdown一样，无论我们加了多少空格都只会默认一个，如果要在html代码中保留空白就要去用一些特殊标签去包裹或者用html实体，如 。
-
实体 —— 如果想在页面上展示<html>这个字符，显然不能写<html>，于是HTML想了一个转义方案，用&xxxx，表示一个特殊字符。
HTML简介
什么是HTML？
超文本标记语言（Hypertext Markup Language,HTML）是一个用来结构话web内容并给与其含义和目标的编码语言。
-
HTML并不是真正的程序语言，它是一种标记语言
-
它由一系列的元素（elements）所组成，不同的元素各有公用
一个HTML文档的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蔡华鹏的博客</title>
</head>
<body>
<p>我们要写的内容</p>
</body>
<html>
- <!DOCTYPE html> —— 文档类型
- <html></html> —— <html>包含页面的整个内容
- <head></head> —— <head>包含页面描述，css样式等，但不会被用户看到
- <body></body> —— <body>包含了你想被用户看到的内容
- <meta charest="utf-8> —— 指定文档的字符编码为UTF-8
- <title></title> —— 设置页面的标题，显示在浏览器标签页上
- 快捷键：在vscode中输入!并按Tab键，就会出现一个基本的HTML文档
HTML文本
标题与段落 <h1>—<h6>
通常一个页面只有一个<h1>,请尽量按顺序来使用
例：
<h1>蔡华鹏</h1>
<h2>xxx</h2>
<p>xxx</p>
快捷键：在vscode中输入<h1>按Tab键就会出现<h1></h1>
列表
无序列表<ul> Unordered List
有序列表<ol> Ordered List
<em>、<strong>与<span>都是加重语气，<span>的语气较弱
例
<p>今天<em>蔡华鹏</em>写了博客<p>
以上三个用法都一样，只是语气上有差异
描述列表：<dl><dt><dd>
<dl>
<dt>xx</dt>
<dd>解释xx</dd>
<dt>某某</dt>
<dd>解释某某</dd>
HTML须知
设定文档语言
<html lang="zh-cn">
- SEO(搜索引擎优化）
- 有助于视觉障碍人士通过读屏器阅读页面
设定部分页面内容语言
<p>日语<span lang="jp">xxx</span>的意思是什么</P>
块级元素和内联元素
- 块级云阿苏在页面中以块的形式展现——块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中，如<div>，<h1>，<p>
- 内联元素通常出现在块级元素中并被其它文本所包围——内联元素
不会导致文本换行如<a>，<em>，<strong>
属性
布尔属性
比如<input>被添加disabled属性后，就接收不到用户输入了
例
<input type="text" disabled>
<input type="text">
全局属性
id，class，style，title都是全局属性，可以被任何HTML元素使用，hidden可用于隐藏某个页面元素
<div class="notice" hidden>请先登录</div>
contenteditable全局属性可以使元素内容变成可编辑
<p contenteditable>同学们号！</p>
HTML头部
- <head>的内容不会在浏览器中显示，它的作用是包含一些页面的元数据
- 元数据（Metadata）描述数据的数据
<head>
<meta charset="utf-8">
<title>蔡华鹏的博客</title>
</head>
元数据<meta>
指定文档编码
<meta charset="utf-8">
定制业面图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
设置referer
<meta name="referer" content="never">
设置页面描述
<meta name="description" content="xxx">
创建超链接
-
简单链接
<a href="浏览器地址">xxx</a> -
title属性
<a href="浏览器地址“ title="对xxx解释">xxx</a>
将鼠标放在xxx上就会显示 （对xxx的解释） -
外部链接
将target设置成_blank时，点击链接会新开一个Tab打开该网页
<a href="图片浏览器地址" title=“对图片的解释" target="_bamk">xxx</a> -
返回顶部链接
<a href="#">返回页面顶部</a> -
文档内部链接
用于定位到文档的某一部分，<a>的href要对应文档内某个元素的id（id在值在文档内要唯一）
<a href="#email链接">email链接</a>
<a href="表单的相关网址">表单相关标签</a>
<a href="tel:电话号码">打电话</a>
图片链接
<a href="浏览器地址" title="图片"><img src="图片浏览器地址"></a>
下载链接
<a href="下载地址" dowmload>下载</a>
email链接
<a href="邮箱地址">发邮件给某某</a>
带说明的图像
<figure>
<img src="图片地址" alt="对图片的注释">
<figcaption>图片下写的字</figcaption>
</figure>
注意：title和alt这两个属性的区别：
首先，alt是html标签的属性，而title既是html标签，又是html属性。
title标签，网页的标题就是写在这对标签之内的。
title作为属性时，可以为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性只能用在img、area和input元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。alt是替代图像作用而不是提供额外说明文字的。
此外，使用alt属性还具有搜索引擎优化效果，因为搜素引擎是无法直接读取图像的信息的，alt可以为其提供文字信息所以对搜索引擎比较友好。
表格Table
简单表格
<table>
<thead>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tbody>
</table>
HTML表单
form
- form标签是表单的外壳，主要是四个属性
- action： 表单提交的地址
- method：提交保单的方法
- target：在何处打开action
- enctype（他的一个编码方式）
1、application/x-www-form-urlencoded：在发送前编码的所有字符（默认）
2、text/plain：字符转换为“+”加号，但不对特殊字符编号
3、multipart/form-data：使用包含文件上传控件的表单时，必须使用该值
password
输入内容自动变成圆点
checkbox
靠name属性分组，提交到后端的时候被选中的value是以“，”分割的一个字符串，通过name属性获得
