教程来自W3CSchool

因为笔者有过开发经验本篇只是个人对HTML自学的笔记，可能不适合用于给他人理解和学习

什么是 HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)

HTML 属性

HTML 标签对大小写不敏感 (X)HTML 版本中强制使用小写。

属性和属性值对大小写不敏感 (X)HTML 要求使用小写属性。

完整的 HTML 参考手册 HTML 标准属性参考手册

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>H1</h1>  -----》对应效果

H1

<h2>H2</h2>  -----》对应效果

H2


<h3>H3</h3>  -----》对应效果

H3

tips:浏览器会自动地在标题的前后添加空行。

tips:默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

如：<hr/>

HTML 注释

普通注释
<!-- This is a comment -->

块注释
<!-- 此刻不显示图片：

<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">

-->

条件注释
<!--[if IE 8]>

    .... some HTML here ....

<![endif]-->

HTML 段落

段落通过<p>标签定义 ::注意段落后有个换行，如果想在 p 标签中主动换行，可以在标签中添加 <br/>
　　如：<p>This is<br />a para<br />graph with line breaks</p>

注意 <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

<br> & <br/> 插入一个空行

HTML 样式

style可以修改修饰元素的样式

设置背景颜色：<h3 style="background-color:red">修改背景颜色为红色<h3>-----》结果：

修改背景颜色为红色

~设置字体：

<h3 style="font-family:verdana">设置字体</h3>    -----》结果：

设置字体

~设置背景颜色：<p style="color: red; font-size: 20px;">设置颜色和文字大小</p>-----》结果：

设置颜色和文字大小

~设置文字居中 <h3 style = "text-align:center">文字居中</h3>-----》结果：

文字居中

HTML 文本格式化

~HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。

<strong>粗壮的字体</strong>

粗壮的字体

大字体

<em> 这是一个强调字体</em>

这是一个强调字体

<i>斜体用i来标识吗？和我知道的好像不太一样</i>

斜体用i来标识吗？和我知道的好像不太一样

小字体

<sup>这是一个上标<sup> 表示2的3次方

2³

<sub>这是一个下标<sub>

出现下标：_{这是一个下标}

改变文字方向

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

Here is some Hebrew text

测试按钮

按钮内的文字不会改变方向

还有其他标签如下，不一一试验：

<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。

<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式文本。

<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。

HTML CSS

外部演示表以引用方式出现在 head标签里

<head>

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

</head>

内部样式表也是在 head标签里

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

内联样式表标签内通过 style=“background-color:red”定义

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

HTML 链接

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

如<a href="http://www.w3school.com.cn/">W3School</a>

在网页中显示为 W3School

target 属性

使用 Target 属性，你可以定义被链接的信息如何显示 <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> 则会以新窗口打开链接

name 属性

name 规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。

<a name="label">锚</a>  ---》

锚

您可以使用 id 属性来替代 name 属性，命名锚同样有效。

<h5 id="id_label">id_锚</h5>   -----》

id_锚

现在创建链接，跳转到以上两个锚上

跳转到a 书签
 跳转到 id_h5标签

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>   ------》

有用的提示

HTML自学第一篇的更多相关文章

Android基础学习第一篇—Project目录结构
写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...
我的第一篇博客 ——【ToDoList】小程序开发
我是一只即将大四的大三狗,这是我的第一篇博客,说来惭愧.今年1月份,学校放寒假的时候开始自学的IOS,放假的时候比较起劲,看了一堆Object-C的视频,然后照着中英文对照的IOS基础开发教程,做了两 ...
tensorflow第一篇---numpy模块
写在前面: 自学tensorflow半个月,博友们给了我很多帮助,这是我第一篇原创的博文,我想把之前的知识梳理一遍,我会分享我一些在学习过程中遇到的问题,我目前只有这些......... 在介绍ten ...
从.Net到Java学习第一篇——开篇
以前我常说,公司用什么技术我就学什么.可是对于java,我曾经一度以为“学java是不可能的,这辈子不可能学java的.”结果,一遇到公司转java,我就不得不跑路了,于是乎,回头一看N家公司交过社保 ...
从0开始搭建SQL Server AlwaysOn 第一篇（配置域控）
从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...
Python爬虫小白入门（四）PhatomJS+Selenium第一篇
一.前言在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...
Three.js 第一篇：绘制一个静态的3D球体
第一篇就画一个球体吧首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器前面的话选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

随机推荐

Jmeter 常用函数（11）- 详解 __TestPlanName
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用返回测试计划名称语法格式 ${__T ...
致敬学长！J20航模遥控器开源项目计划【开局篇】 | 先做一个开机界面 | MATLAB图像二值化 | Img2Lcd图片取模 | OLED显示图片
我们的开源宗旨:自由协调开放合作共享拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/C ...
洛谷T90444 密码题解
[问题描述] 假发通过了不懈的努力,得到了将军家门锁的密码(一串小写英文字母).但是假发被十四和猩猩他们盯上了,所以假发需要把密码传递出去.因为假发不想十四他们发现几松门前贴的小纸条就是将军家的密码, ...
Java多线程_wait/notify/notifyAll方法
关于这三个方法,我们可以查询API得到下列解释: wait():导致当前的线程等待,直到其他线程调用此对象的notify( ) 方法或 notifyAll( ) 方法或者指定的事件用完 notify( ...
MarkDown编辑器中改变文本字体颜色大小
法一有点类似前端里 <font face="微软雅黑" size=4 color=red>输入的文字</font> 其中 face对应字体 size 大小 ...
Python爬取网易云音乐歌手歌曲和歌单
仅供学习参考 Python爬取网易云音乐网易云音乐歌手歌曲和歌单,并下载到本地很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做 ...
【深入理解Java虚拟机】Java虚拟机运行时数据区
Java虚拟机运行时数据区线程私有程序计数器 1.当前线程所执行的字节码的行号指示器. 2.唯一不会发生OutOfMemoryError的区域 3.如果执行的是java方法,计数器值为虚拟机字节码 ...
SQL Server解惑——标识列的限制和跳号现象
1:每个表只能创建一个标识列. 如下测试所示,如果表中有一个标识列,新增一个标识列就会遇到错误"Multiple identity columns specified for table ...
Python开发的入门教程(七)-切片
介绍本文主要介绍Python中切片的基本知识和使用对list进行切片取一个list的部分元素是非常常见的操作.比如,一个list如下: >>> L = ['Adam', 'Li ...
Linux 基础指令2
管道符| 先执行第一个命令后执行第二个 eg:查看文件中间几行: head -n1 文件名| tail -n2 :先查看文件前n1行,然后在n1行中的后n2行 tail -n1 文件名| head - ...

HTML自学第一篇