前端之 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的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  6. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  8. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  9. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  10. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

  1. 如何在已安装Python解释器的Linux上更新Python

    在Linux环境下升级Python (附:解决pip报错 subprocess.CalledProcessError: Command '('lsb_release', '-a')' returned ...

  2. vuejs 使用vue-cli引入bootstrap

    前言:对于刚刚进入vuejs的队伍中的小白来讲,很多都是模糊的,js操作dom节点的思想萦绕,还不能自由切换在二者之间. 解决之道: 想要在vue中引入bootstrap,引入的时候需要按照如下的步骤 ...

  3. Open/Close Port in Centos

    1. Show status /etc/init.d/iptables status 2.Set Port iptables -I INPUT -p tcp --dport 80 -j ACCEPT ...

  4. Redhat 6.7 x64升级SSH到OpenSSH_7.4p1完整文档

    原文链接:https://www.cnblogs.com/xshrim/p/6472679.html 导语 Redhat企业级系统的6.7版自带SSH版本为OpenSSH_5.3p1, 基于审计和安全 ...

  5. 二进制安装mysql5.7

    1.创建用户和组 groupadd mysql useradd -r -g mysql mysql 2.上传二进制包至/usr/local下解压并改名为mysql tar zxvf mysql-5.7 ...

  6. shell指令(一)

    ubuntu桌面窗口下进入shell窗口:Ctrl + Alt + F2~F6:  退出shell窗口:Ctrl + Alt + F7:从UI中进入UI命令窗口,Ctrl + Alt +T shell ...

  7. jenkins在windows服务器上执行含git push命令的脚本权限不足的解决方法

    错误摘要 默认情况下执行脚本是没问题的,但是脚本中含有git push命令就无法执行了 用jenkins部署hexo博客时候遇到的,执行hexo d -g一直阻塞至Build was aborted, ...

  8. 调皮的程序员：Linux之父雕刻在Linux内核中的故事

    本文内容由公众号“格友”原创分享. 1.引言   (不羁的大神,连竖中指都这么帅) 因为LINUX操作系统的流行,Linus 已经成为地球人都知道的名人.虽然大家可能都听过钱钟书先生的名言:“假如你吃 ...

  9. 基于nodemailer使用阿里云企业邮箱发送邮件（526错误的解决）

    在虽然日常生活中,QQ,微信等即时聊天工具几乎主导了人们的生活,但是邮件依然是现代生活不可缺少的一部分.这篇文章主要讲述使用node.js 中的nodemail模块操作阿里云的企业邮箱发送邮件 (52 ...

  10. [Postman]定制Postman(4)

    自定义请求方法 您可以在Postman中自定义请求方法以满足特定要求.创建自己的请求方法后,您将能够发送/保存它们. 此功能允许您保存/删除自定义方法,还可以删除默认方法.单击请求方法下拉区域,键入方 ...