前端之 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. Codeforces Codeforces Round #484 (Div. 2) D. Shark

    Codeforces Codeforces Round #484 (Div. 2) D. Shark 题目连接: http://codeforces.com/contest/982/problem/D ...

  2. c语言小程序以及java生成注释文档方法

    c语言小程序:sizeof和strlen() sizeof运算符以字节为单位给出数据的大小,strlen()函数以字符为单位给出字符串的长度,字符和字节不是一回事. char类型用于存储字母和标点符号 ...

  3. 单个div充满屏幕的CSS方法

    1.通过定位实现 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow ...

  4. Tensoflow API笔记(N) 设备指定

        tf.device是tf.Graph.device()的一个包装,是一个用于指定新创建的操作(operation)的默认设备的环境管理器.参数为device_name_or_function, ...

  5. 9-Unittest+HTMLTestRunner不能生成报告解决方法

    1.问题现象 在使用HTMLTestRunner生成测试报告时,出现程序运行不报错,但不能生成报告的情况. 刚开始找了很久没发现问题,后来加上打印信息,发现根本没执行生成报告这部分代码.最后网上找到原 ...

  6. Django搭建博客记(一)

    这里记录一些 Django 搭建博客遇到的一些问题 参考书籍为 Django by Example, 这里记录与书籍内容不包含的内容. 搭建环境: 阿里云 ECS + CentOS7 一开始搭建的时候 ...

  7. 使用node自动生成html并调用cmd命令提交代码到仓库

    生成html提交到git仓库 基于目前的express博客,写了一点代码,通过request模块来请求站点,将html保存到coding-pages目录,复制静态文件夹到coding-pages,最后 ...

  8. Linux系统安装Mysql5.7

    1.下载tar包,这里使用wget从官网下载 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc2. ...

  9. Go语言复制文件

    需要使用io包的Copy方法 package main import ( "fmt" "io" "os" ) //自己编写一个函数,接收两个 ...

  10. 小程序如何获取code

    小程序如何获取code <button open-type="getUserInfo" hover-class='none' bindgetuserinfo="ge ...