前端(一)之 HTML

时间:2022-10-22 20:16:22

前端之 HTML

前言

python 基础、网络编程、并发编程与数据库要开始告一段落了,从现在开始进入前端的学习。前端的东西多且杂,需要好好地练习。

什么是前端

前端即网站前台部分,运行在 PC 端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5、CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。

前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的 HTML 和 CSS 以及 JavaScript。

  • 广义前端:所有用户可以直接看见并交互的界面;
  • 狭义前端:浏览器上运行的用户交互界面。

什么是 HTML

HTML 是一种超文本标记语言(Hyper Text Markup Language),主要负责完成页面的结构设计,一般以.html或者.htm 后缀结尾。

超文本指页面内可以包含图片、链接甚至音乐、程序等非文字元素。

  1. 标记语言

    标记语言为非编程语言,不具备编程语言具备的程序逻辑。

  2. html 为前端页面的主题,由标签、指令与转义字符(实体)等组成

    标签:被尖括号包裹,由字母开头包含合法字符的,可以被浏览器解析的标记。eg:系统标签、自定义标签。

    指令:被尖括号包裹,由 !开头的标记。eg:<!doctype html>

    转义字符:被&与;包裹的特殊字母组合或#开头的十进制数。eg:<>&nbsp;

  3. 文档类型

    <!-- 标签语法规范 -->
    <!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 特殊符号转义

前端(一)之 HTML