前端（一）之 HTML
前端之 HTML
前言
python 基础、网络编程、并发编程与数据库要开始告一段落了，从现在开始进入前端的学习。前端的东西多且杂，需要好好地练习。
什么是前端
前端即网站前台部分，运行在 PC 端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5、CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的 HTML 和 CSS 以及 JavaScript。
- 广义前端：所有用户可以直接看见并交互的界面；
- 狭义前端：浏览器上运行的用户交互界面。
什么是 HTML
HTML 是一种超文本标记语言（Hyper Text Markup Language），主要负责完成页面的结构设计，一般以.html或者.htm 后缀结尾。
超文本指页面内可以包含图片、链接甚至音乐、程序等非文字元素。
-
标记语言
标记语言为非编程语言，不具备编程语言具备的程序逻辑。
-
html 为前端页面的主题，由标签、指令与转义字符（实体）等组成
标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg：系统标签、自定义标签。
指令：被尖括号包裹，由 !开头的标记。eg：<!doctype html>
转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg：<>
-
文档类型
<!-- 标签语法规范 --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html>
第一个页面
基础模板
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>第一个页面</title>
</head>
<body>
</body>
</html>
模板解读
- DOCTYPE：指定文档类型，规定 html 标签语法；
- html：文档根标签，标注着文档（页面）的开始与结束；
- head：文档头标签，可以引用脚本文件、指定样式表、书写代码逻辑块、提供元信息；
- body：文档主体标签，包含文档所有文本与超文本内容；
- title：文档 tag 标题标签，设置文档 tag 的标题内容。
其他核心模板标签
1. meta（元标签）
字符编码
<meta charset='utf-8'>
<meta http-equiv='content-type' content='text/html;charset=utf-8'/>
SEO
<meta name='keywords' content='8-12个以英文逗号隔开的单词或词语'>
<meta name='description' content='80字以内的一段话，与网站内容相关'>
移动适配
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'/>
2. link（链接标签）
外联样式表
<link rel='stylesheet' type='text/css' href='style.css'/>
文档 tag 图标
<link rel='shortcut icon' type='image/x-icon'
href='http://www.baidu.con/favicon.ico'/>
3. style（样式标签）
内联样式表
<style></style>
4. sctipt（脚本标签）
<script type='text/javascript'></script>
html 常用标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本标签</title>
</head>
<body>
<!-- 无意义标签 -->
<!-- div：最常用标签，没有之一（搭建页面架构） -->
<div></div>
<!-- span：文本最常用标签 -（构建文本架构，可以直接包裹文本，也可以包裹其他文本类（内联类型标签）-->
<span></span>
<!-- span 作为文本架构，删除样式的文本再由具体的文本类标签 del 嵌套 -->
<span>$1000<del>$2300</del></span>
<!-- 标题标签：h1~h6 -->
<!-- 一般一个页面会出现一次，作为该页面的总标题出现 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
普通文本
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>段落段落段落段落段落</p>
<!-- 原生标签 -->
<pre>
呵 呵
</pre>
<!-- 分割线 -->
<hr></hr>
<!-- 换行 -->
<br />
<br />
<br />
<!-- 文本类标签 -->
<!-- 斜体 -->
<i>斜体</i>
<!-- 斜体强调 -->
<em>斜体强调</em>
<!-- 加粗 -->
<b>加粗</b>
<!-- 加粗强调 -->
<strong>加粗强调</strong>
<!-- 由 ruby 和 rt 两个标签配合使用 -->
<ruby>
拼音<rt>pinyin</rt>
</ruby>
<!-- 插入文本 -->
<ins></ins>
<!-- 上角标 -->
<span>文本<sup>上角标</sup></span>
<!-- 链接标签 -->
<!-- href 标签的全局属性，超链接，规定协议-->
<!-- 不规定的话：会在当前文件路径做路径拼接 -->
<a href="https://www.baidu.com" target="_self">通往百度</a>
<!-- 图片标签 -->
<!-- src 图片源地址可以加载网络|本地|动态图片 alt：图片资源加载时文本提示 title：鼠标悬浮产生的文本提示（任意标签都可以具有该全局属性）-->
<img src="" alt="" title="小柯基">
<!-- 表格 -->
<table>
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<th>单元格</th>
<th>单元格</th>
</tr>
</table>
<!-- 表单 -->
<form >
<input type="text">
<input type="text">
</form>
</body>
</html>
标签的分类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签的分类</title>
</head>
<body>
<!-- 系统标签 | 自定义标签: 系统没有的满足标签语法的所有标签 -->
<zero title="XXX" style="color: red">zero</zero>
<!-- 行块标签(display) -->
<!-- 块: 换行显示 -->
<p>测试1</p>
<p>测试2</p>
<!-- 行:同行显示 -->
<span>测试3</span>
<span>测试4</span>
<!-- 单结构 | 组合结构 -->
<div>单结构</div>
<!-- 被form包裹的input内容可以提交给后台,单独使用的input内容只能在前台(js)使用 -->
<form action="">
<input type="text">
</form>
<input type="text">
<!-- 单双标签 -->
<!-- 双: 首尾分离 -->
<!-- 主内容:可以包含文本,也可以包含子标签 (具有作用域) -->
<div></div>
<span></span>
<!-- 单: 首尾连体 -->
<!-- 主功能: 不需要子内容,标签就可以代表所有的功能语义 -->
<hr />
<br />
<!-- input的内容 -->
<input type="text" value="abc" placeholder="请输入">
</body>
</html>
HTML 特殊符号转义
