前端之 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. Go的Get命令兼容公司Gitlab仓库的HTTP协议

    对于公司的私有Gitlab仓库,没有对https支持,在使用最新版本的go get命令时,需要使用-insecure参数来支持http,但如果导入的包里边依赖了需要https的仓库,就不好使了,折腾了 ...

  2. How to setup Visual Studio without pain

    Visual Studio (VS) can be very hard to install. If you are lucky, one whole day may be enough to ins ...

  3. ie9上传文件

    兼容ie9文件上传,解决ie9下提示下载或保存 如果不考虑ie9兼容性,实现[上传图片]大致的思路如下: 由于公司是将所有上传的图片都放到[代理服务器]里.所以[上传图片]其实是上传到[代理服务器]. ...

  4. tornadoの2

    tornado之日记本——   1.diary.py:   import time from model.database import DataBase from tornado import we ...

  5. codeforces 1066 B heater

    菜鸡只配做水题 思路就很简单嘛:肯定扩展的越靠后边越好了 0 0 1 0 1 1 0 0 假设范围是3 ,第一个1一定要选上,第2.3个肯定选3啦,越靠后边就一定能节省更多的点,没看出来和子问题有什么 ...

  6. Android逆向之smali学习

    Smali是Android虚拟机Dalvik反汇编的结果. Dalvik指令集 指令格式为:[op]-[type](可选)/[位宽,默认4位] [目标寄存器],[源寄存器](可选) 赋值:move*  ...

  7. [ARCH] 1、virtualbox中安装archlinux+i3桌面，并做简单美化

    星期六, 28. 七月 2018 02:42上午 - beautifulzzzz 1.安装ArchLinux系统 安装Arch主要看其wiki,比较详细- 中文的我主要参考:一步步教你如何安装 Arc ...

  8. C实现动态进度条

    #include <iostream> #include <windows.h> void HideCursor() { CONSOLE_CURSOR_INFO cursor_ ...

  9. Ubuntu18.04或者Deepin15.8 部署Django项目

    一.首先先安装nginx静态服务 1.安装gcc g++的依赖库sudo apt-get install build-essential && sudo apt-get install ...

  10. rabbitMQ的安装和创建用户

    rabbitMQ的安装和创建用户 在计算机科学中,消息队列(英语:Message queue)是 一种 进程间通信或同一进程的不同 线程 间的通信方式,软件的贮列用来处理一系列的输入,通常是来自用户. ...