前端之 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. 20155205 郝博雅 Exp5 MSF基础应用

    20155205 郝博雅 Exp5 MSF基础应用 一.实验目标 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践,如ms08_0 ...

  2. 09-JS的事件流的概念(重点)

    在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...

  3. spring 3.1.1 mvc HanderMapping源码

    https://my.oschina.net/zhangxufeng/blog/2177464 RequestMappingHandlerMapping getMappingForMethod /** ...

  4. data science学习笔记1

    Mutiple Plots on One Graph plt.plot(x, norm.pdf(x)) plt.plot(x, norm.pdf(x, 1.0, 0.2)) #1.0 = mean, ...

  5. Python小练习之寻找101到200之间的素数

    方法1:from math import * def primeNumber(start,end): num = 0 for i in range(start,end): flag = 0 for j ...

  6. html5 css选择器。 井号，句号的区别

    .理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...

  7. [转] External(and Live) snapshots with libvirt

    http://kashyapc.com/ Raw image is a blob of data exposed directly in VM as block device, it can't sn ...

  8. C++的学习心得

    由于我们大一就学习的c++,跳过了c语言,VB的学习,在很多方面我们掌握的并不是特别好,在这几种语言中,几乎有时候会产生混淆,通过做大量的c++的题目感觉在题目中应用的最多的就是数组.指针.对类的应用 ...

  9. 背水一战 Windows 10 (95) - 选取器: 自定义文件保存选取器

    [源码下载] 背水一战 Windows 10 (95) - 选取器: 自定义文件保存选取器 作者:webabcd 介绍背水一战 Windows 10 之 选取器 自定义文件保存选取器 示例1.演示如何 ...

  10. 【设计经验】2、ISE中ChipScope使用教程

    一.软件与硬件平台 软件平台: 操作系统:Windows 8.1 开发套件:ISE14.7 硬件平台: FPGA型号:XC6SLX45-CSG324 二.ChipScope介绍 ChipScope是X ...