前端三剑客之HTML初体验

首先我们先从一段简单代码实例出发，观察一下html的结构究竟是怎么样的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

!DOCTYPE html ：声明为html5文档
html ：元素是html页面的根元素
head：元素包含文档的元数据，如utf-8代表显示中文编码
title：元素描述文档的标题
body：包含可见的页面内容
h1：元素定义了一个大标题
p：元素定义了一个段落

那么究竟什么是html呢？

事实上，html是一种超文本标记语言，它并不是一种编程语言。标记语言是一套标记标签，html使用标记标签来描述网页，HTML 文档包含了HTML 标签及文本内容，同时HTML文档也叫做 web 页面

html标签

html标签通常为由尖括号包围起来的关键词，如<html>
html标签通常是成对存在的，如<b> </b>
标签对应的第一个是开始标签，对应的第二个是结束标签

web浏览器

web浏览器是用于读取HTML文件,并将其作为网页显示，浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

html网页结构

<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>

html编辑器推荐

Notepad++：下载地址
Sublime Text：下载地址
VS Code：下载地址

html标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>
<body><h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6></body>
</html>

html段落

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是段落</title>
</head>
<body><p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p></body>
</html>

html链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个链接</title>
</head>
<body>
<a href="http://www.baidu.com">这是一个链接使用了 href 属性</a>
</body>
</html>

html图像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是引用一个图像地址</title>
</head>
<body><img src="/images/logo.png" width="258" height="39" /></body>
</html>

html水平线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是水平线</title>
</head>
<body><p>hr 标签定义水平线：</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p>
</body>
</html>

html注释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是水平线</title>
</head>
<body><p>hr 标签定义水平线：</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p>
</body>
</html>

HTML 如何查看源代码

做法很简单，你只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

html文本格式化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化操作</title>
</head>
<body>
<b>加粗文本</b>  <br><br>
<i>斜体文本</i>    <br><br>
<code>电脑自动输出</code>  <br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>

html文本格式化标签

HTML “计算机输出” 标签

HTML 引文, 引用, 及标签定义

html中的title元素

定义了不同文档的标题。
在 HTML/XHTML 文档中是必须的。
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

html中的base元素

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.baidu.com/images/" target="_blank">
</head>

html中的link元素

定义了文档与外部资源之间的关系。通常用于链接到样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

html中的style标签

定义了HTML文档的样式文件引用地址.你也可以直接添加样式来渲染 HTML 文档

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

html中的meta数据

meta标签描述了一些基本的元数据。meta 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。meta 一般放置于 head 区域

//为搜素引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//为网页定义描述内容
<meta name="description" content="web前端教程">
//定义网页作者
<meta name="author" content="ljz">
//每10秒钟刷新当前页面:
<meta http-equiv="refresh" content="10">

html中的script元素

标签用于加载脚本文件，如： JavaScript。

html中的head元素

html的样式css

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.CSS 可以通过以下方式添加到HTML中

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 head 区域使用style 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引入css文件

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

html的样式实例之背景颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色(runoob.com)</title>
</head>
<body style="background-color:white;">
<h2 style="background-color:blue;">这是一个标题</h2>
<p style="background-color:red;">这是一个段落。</p>
</body>
</html>

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置字体颜色(runoob.com)</title>
</head>
<body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:32px;">一个段落。</p>
</body>
</html>

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本对齐设置(runoob.com)</title>
</head>
<body><h1 style="text-align:left;">居左对齐的标题</h1>
<p>这是一个段落。</p></body>
</html>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在head 部分通过 style标签定义内部样式表

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 图像- 图像标签（ img）和源属性（Src）

在 HTML 中，图像由img 标签定义。img 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 ul 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 ol 标签。每个列表项始于 li 标签。列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML中的 div元素

HTML div 元素是块级元素，它可用于组合其他 HTML 元素的容器。
div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。

HTML中 span 元素

HTML 元素是内联元素，可用作文本的容器span 元素也没有特定的含义。当与 CSS 一同使用时，span 元素可用于为部分文本设置样式属性。

总结

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 的关键是标签，其作用是指示将出现的内容

前端三剑客之HTML初体验相关推荐

[小记] 微信小程序 - 人脸识别前端（一）初体验
微信小程序 - 人脸识别前端(一)初体验记录尝试使用拍照模式进行人脸比对的过程-此方式有一定缺陷:调用系统摄像头,会保留照片于系统相册等功能:人脸识别 + 打卡签到说明:前端仅做拍照和转码操作等 ...
grafana的前端二次开发初体验
开发环境搭建安装grafana brew install grafana 安装node 和 go brew install go 进入到"/Users/*用户名/go"目录下,然 ...
前端开发神器Hype3初体验-可视化、响应式、动效
背景之所以接触到这个开发工具,还是因为项目需要,我本来是做Android开发的,后来因为公司前端开发人员不够,然后开始做手机端网页开发,接触了Vue,后来前端开发离职,我只好又接手Web开发,本身对 ...
前端三剑客之 HTML - JavaEE初阶 - 细节狂魔
文章目录前言后端 && 前端的部分历史 - java 关于网站搭建正文开始! HTML 怎么编写一个HTML的代码? 小拓展: 快速编写 HTML 代码的小技巧浏览器的开发者工 ...
视频教程-jQuery交互式前端开发(第一季)：初体验/选择器/事件绑定-jQuery
jQuery交互式前端开发(第一季):初体验/选择器/事件绑定知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老兵 ¥12. ...
webpack从入门到精通（一）初体验
1. webpack简介 1.1 webpack是什么 webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler). 在 webpack 看来, 前端的所有资源文件(j ...
在JS 中使用 fetch 初体验
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest ...
xhr get获取文件流下载文件_python爬虫实战——豆瓣电影get初体验
影评许可证公众号[2019]第22期本栏目由"数据皮皮侠"独家呈献专场 python爬虫实战--豆瓣电影get初体验 2019.10.28 / 早上7点场 / 免费本期&q ...
node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...

前端三剑客之HTML初体验

首先我们先从一段简单代码实例出发，观察一下html的结构究竟是怎么样的

那么究竟什么是html呢？

html标签

web浏览器

html网页结构

<!DOCTYPE> 声明

html编辑器推荐

html标题

html段落

html链接

html图像

html水平线

html注释

HTML 如何查看源代码

html文本格式化

html文本格式化标签

HTML “计算机输出” 标签

HTML 引文, 引用, 及标签定义

html中的title元素

html中的base元素

html中的link元素

html中的style标签

html中的meta数据

html中的script元素

html中的head元素

html的样式css

内联样式

html的样式实例之背景颜色

HTML 样式实例 - 字体, 字体颜色 ，字体大小

HTML 样式实例 - 文本对齐方式

内部样式表

外部样式表

HTML 图像- 图像标签（ img）和源属性（Src）

HTML无序列表

HTML 有序列表

HTML 自定义列表

HTML中的 div元素

HTML中 span 元素

总结

前端三剑客之HTML初体验相关推荐

最新文章

热门文章

HTML 样式实例 - 字体, 字体颜色，字体大小