Html

1、软件 — Sublime （简单配置）
2、Html 基本结构
3、基本标签
- 3.1、标题标签
- 3.2、一般标签
- 3.3、特殊标签
- 3.4、特殊符号
4、列表标签
- 4.1、无序列表标签
- 4.2、有序列表标签
- 4.3、自定义列表标签
5、图片标签
6、超链接标签

1、软件 — Sublime （简单配置）

安装地址：Sublime Text 3.2 官方下载

安装过程

第一步：选择适合的版本

第二步：下载控制台程序
点击插件栏

点击（Install Now）

复制其中的内容（快捷键 ctrl + c 复制）

打开软件并按（ctrl + `）或（View — Show Console）打开控制台

将复制的代码粘贴进去并按回车（快捷键 ctrl + v）

第三步：插件安装，按（ctril + shift + p）后输入（ip）并下载第一个

下载完成后，再次进行操作（ctrl + shift + p，输入 ip，打开第一个）之后就可以安装插件了

2、Html 基本结构

Html 文件

Html 文件包括头部分（head）和身体部分（body）
头部分里面的内容不会显示在网页当中
身体部分里面的内容会显示在网页当中

<!DOCTYPE html>
<html>
<head><title></title><!-- 1. 不显示在网页中 -->
</head>
<body><!-- 2. 完全显示在网页中 -->
</body>
</html>

标签

语法：尖括号包围关键字形成
分类：单标签、双标签

<!DOCTYPE html>
<!-- 1. 仅向浏览器声明文档内容, 非标签 --><html></html>
<!-- 2. 类似 <开始标签></结束标签> 的是双标签 --><br>
<!-- 3. 单标签(自闭合标签) -->

元素

语法：由标签和内容组成

<title>Document</title>

3、基本标签

3.1、标题标签

一级标题（l）
二级标题（o）
三级标题（v）
四级标题（e）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><h1>l</h1><h2>o</h2><h3>v</h3><h4>e</h4>
</body>
</html>

在浏览器中打开

3.2、一般标签

右对齐标签（参数 right）
左对齐标签（参数 left）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><p align="right">i love you so much</p><p align="left">i love you so much</p>
</body>
</html>

在浏览器中打开

特别注意

一个标签（p）表示一个段落，在此标签里加上换行（br），仍表示一个段落
空格需要用（&nbsp）代替

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><p align="right">i love you<br/>so much</p><p align="left">&nbsp&nbsp&nbspi love you so much</p>
</body>
</html>

在浏览器中打开

强调

标签（p）中不保留空格和换行
标签（pre）中保留空格和换行

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><p align="right">i love you so much</p><p align="left">    i love you so much</p><pre align="right">i love youso much</pre><pre align="left">    i love you so much</pre>
</body>
</html>

在浏览器中打开（注意对比之前的图片）

3.3、特殊标签

加粗（b）
斜体（i）
下标（sub）
上标（sup）
下划线（ins）
删除线（del）
水平线（hr）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><p>i love <b>you</b></p><p>i love <i>you</i></p><p>i love <sub>you</sub></p><p>i love <sup>you</sup></p><p>i love <ins>you</ins></p><p>i love <del>you</del></p><hr>
</body>
</html>

在浏览器中打开

3.4、特殊符号

已注册（reg）
版权（copy）
空格（nbsp）
小于号（lt）
大于号（gt）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><p>i love you&reg</p><p>i love you&copy</p><p>&nbsp&nbsp&nbspi love you</p><p>i love you&ltbr&gt</p>
</body>
</html>

在浏览器中打开

4、列表标签

4.1、无序列表标签

无序列表（ul）
参数（disc 默认）为小黑点
参数（square）为正方形
参数（circle）为空心圆
列表中项目（li）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><ul type="disc"><li>liu qian is a boy</li><li>li hua is a boy too</li></ul><ul type="square"><li>liu mei is a girl</li><li>song hua is a girl too</li></ul><ul type="circle"><li>li is a dog</li><li>ki is a cat</li></ul>
</body>
</html>

在浏览器中打开

4.2、有序列表标签

有序列表（ol）
参数（1 默认）为数字列表
参数（a）为小写字母列表
参数（A）为大写字母列表
参数（i）为小写罗马字母列表
参数（I）为大写罗马字母列表
列表中项目（li）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><ol type="1"><li>apple</li><li>orange</li></ol><ol type="a"><li>pig</li><li>dog</li></ol><ol type="i"><li>girl</li><li>boy</li></ol>
</body>
</html>

在浏览器中打开

4.3、自定义列表标签

自定义标签（dl）
自定义标签列表项（dt）
自定义标签描述项（dd）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><dl><dt>apple</dt><dd>can eat</dd><dd>green or red</dd><hr><dt>bird</dt><dd>can fly</dd><dd>beautiful</dd></dl>
</body>
</html>

在浏览器中打开

5、图片标签

图片标签（img）
参数（src）表示图像的（url）源，此处不介绍路径的选择
参数（width）和参数（height）分别表示宽和高 （数值或百分比表示）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><img src="boy.jpg" width="40%" height="40%"><img src="sakura.jpg" width="40%" height="40%">
</body>
</html>

在浏览器中打开

特别注意

可能改变原本图像的比例
参数（width）表示宽为 600 像素
参数（height）表示高为 300 像素

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><img src="boy.jpg" width="600px" height="300px">
</body>
</html>

在浏览器中打开

强调

若无此图片，则利用参数（alt）用文本描述图片

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><img src="3.jpg" alt="can't find">
</body>
</html>

在浏览器中打开

6、超链接标签

超链接标签（a）
参数（href）表示链接地址
参数（title）表示链接提示文字
参数（target 默认是原窗口跳转）表示跳转的窗口

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><a href="http://www.4399.com/" title="play" target="">4399</a><hr><a href="2.html" target="_self,_blank">the second</a><hr>
</body>
</html>

在浏览器中打开

特别注意

下载文件（桌面文件模拟）
将桌面文件（home）打包成（home.zip）

<!DOCTYPE html>
<head><title>Document</title>
</head>
<body><a href="home.zip">下载压缩包</a>
</body>
</html>

在浏览器中打开

前端 Html 介绍相关推荐

agilebpm脑图_设计开发平台前端框架介绍 | AgileBPM 敏捷工作流开发平台—开源免费-基于 Activiti 工作流引擎、Flowable...
目前设计平台前端是独立部署的,引入了 Angular 和 Vue,您可以根据自己技术强项选择使用 Angular 或者 Vue,他们引入的成本都很小. 比如我们团队使用 Angular 很多年了,依 ...
解读帖子：结构化编译器前端 Clang 介绍（VS2017编译clang）
因为需要提取出头文件或源文件的函数名列表和相应的函数参数类型,我想从已有的编译器中寻找函数调用,于是我找到了--结构化编译器前端 Clang 介绍这个贴子折腾了我很久(还有几个开源项目我也没有搞定) ...
宜信支持多渠道前端方案介绍
[宜信技术沙龙]是由宜信技术学院主办的系列技术分享活动,活动包括线上和线下两种形式,每期技术沙龙都将邀请宜信及其他互联网公司的技术专家分享来自一线的实践经验,分享内容覆盖金融科技及软件研发等主要技术领 ...
4.1 Web前端开发介绍
4.1 Web前端开发介绍 1. Web网站介绍网络系统软件开发包括两种结构: C/S是客户机(client)/服务器(server) B/S是浏览器(browser)/服务器. B/S最大的优点就 ...
sublime text3 前端插件介绍
Emmet插件 Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件它让编写HTML代码变得极其简单高效基本用法:输入标签简写形式,然后按Tab键关于Emmet的更多介绍 ...
前端框架介绍篇（小白专属）
首先根据国内大环境开发下,确定未来发展趋势,可以确定为一下三大热门框架.(仅仅个人建议) 1.Vue vue而言,我认为是前端开发的基本技能,作为当前最主流框架之一,vue在前端开发的分量毋庸置疑,从 ...
Python-Web之前端基础介绍(上)
一.Web前端介绍一.什么是网页网页是基于浏览器的应用程序,是数据展示的载体. 二.网页的组成浏览器代替用户向服务器发请求接收并解析数据展示给用户服务器存储数据处理并响应请求协议规 ...
微服务项目之电商--9.商城架构图及商城管理系统前端页面介绍及电商项目初步搭建（1）
目录一.商城架构图前端: 二.商城管理系统前端页面 1.SPA介绍 2.webpack 四个核心概念 3.vue-cli 安装 4.项目测试三.电商项目搭建创建父模块管理创建子模板注册中心l ...
前端开发介绍（包含调试什么的）
http://www.cnblogs.com/jikey/p/4259360.html 前言一.开发工具 - 前端四大利器 1. WebStorm 1). 岂今为止,业界公认的前端开发利器.优点: ...
BUZ前端框架-介绍
介绍 BUZ是什么? BUZ是一套整体前端实施框架,它包含了页面生命管理.模板引擎.表单控件.请求管理等. 我们建议使用此框架来搭建整体前端框架,当然我们也支持自底向上逐层应用. BUZ的核心是mar ...

前端 Html 介绍

Html

1、软件 — Sublime （简单配置）

2、Html 基本结构

3、基本标签

3.1、标题标签

3.2、一般标签

3.3、特殊标签

3.4、特殊符号

4、列表标签

4.1、无序列表标签

4.2、有序列表标签

4.3、自定义列表标签

5、图片标签

6、超链接标签

前端 Html 介绍相关推荐

最新文章

热门文章