前端之 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. java上传文件获取跟目录的办法

    在java中获得文件的路径在我们做上传文件操作时是不可避免的.web 上运行1:this.getClass().getClassLoader().getResource("/"). ...

  2. 自定义react-navigation的TabBar

    在某些情况下,默认的react-navigation的tab bar无法满足开发者的要求.这个时候就需要自定义一个tab bar了.本文就基于react-navigtion v2来演示如何实现一个自定 ...

  3. linux vsftp 简单配置

    查看自己是否安装vsftp rpm -qa | grep vsftp rpm -qa 查看自己已安装的包 过滤vsftp systemctl rsetart vsftpd 重启服务 先关闭防火墙 sy ...

  4. 关于整数溢出和NaN的问题

    当Integer i = Integer.MAX_VALUE;i + 1 < i成立, Double.NaN与任何数(包括自己)比较都为false,与js的NaN一样 如下: //整数溢出 In ...

  5. jsonp(对，通俗易懂)

    jsonp是啥玩意儿呢 ?你猜! 此感叹号意味着以下内容要说正事儿了!!!!! 由于浏览器为了安全限制(他要怎样他说了算,此处不扯远了):只能允许来自同服务器,同域名的同端口号下请求数据(同源),是的 ...

  6. Exp6 信息搜集与漏洞扫描——20164325王晓蕊

    1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 2.1 各种搜索技巧的应用 2.1.1 Netcraft查询 Netcraft这个网站可以查询到特定网站的IP地址,以wei ...

  7. SVN完全备份，增量备份，库同步

    svn备份一般采用三种方式:1)svnadmin dump 2)svnadmin hotcopy 3)svnsync. 优缺点分析: ============== 第一种svnadmin hotcop ...

  8. Hibernate知识总结（一）

    一.ORM ORM的全称是Object/Relation Mapping,即对象/关系映射,可以将其理解成一种规范,它概述了这类框架的基本特征:完成面向对象的编程语言到关系数据库的映射.可以把ORM看 ...

  9. Xcode中SVN不能提交.a文件的解决方法

    我是搬运工!!!方便自己使用!!! 方案一: 在mac下很多svn管理工具默认都不能上传.a文件,这让人很苦恼.从网上扒了下,用命令行可以解决此问题. 打开终端,cd 进入到需要上传的.a文件所在的文 ...

  10. PaaS平台的尴尬与变革

    当今时代只要提到云计算这个词语,一定会提到云计算分为IaaS.PaaS.SaaS 这三个层面,现阶段云环境中IaaS和SaaS都实现了商品化.但是,PaaS作为云计算的服务模式之一,既不像IaaS那样 ...