教程来自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快速入门之安全策 ...

随机推荐

畅购商城(九)：Spring Security Oauth2
好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航畅购商城(一):环境搭建畅购商 ...
Mockito鸡尾酒第一杯单测Mock
鸡尾酒 Mockito是Java的单元测试Mock框架. 它的logo是一杯古巴最著名的鸡尾酒Mojito, Mojito鸡尾酒,源自古巴的哈瓦那,带有浓厚的加勒比海风情. 并不浓烈,但是喝一杯下去, ...
Java 类初始化和实例初始化过程
1.类初始化过程 2.实例初始化过程 3.方法的重写
wc.exe程序
1.gitHub地址:https://github.com/loveYuJun/wc.exe.git 2.PSP表格 psp2.1 Personal Software Process Stages 预 ...
java进阶(10)--String（StringBuff、StringBuilder）
一.基本概念 1.String为引用数据类型,使用双引号 2.字符串数组存储在方法区的内存池,因为开发过程种使用过于频繁 3.String类已经重写了equals,比较时使用,同时也重写了toStri ...
基于Appium的UI自动化测试
为什么需要UI自动化测试移动端APP是一个复杂的系统,不同功能之间耦合性很强,很难仅通过单元测试保障整体功能.UI测试是移动应用开发中重要的一环,但是执行速度较慢,有很多重复工作量,为了减少这些工作 ...
点击穿透事件-----CSS新属性
面试被问,一脸懵,被提示,还蒙,好丢脸的感觉....赶紧百度了解 .noclick{ pointer-events: none; /* 上层加上这句样式可以实现点击穿透 */ } 就是说重叠在一起的两 ...
if-else 可以这么写
最近部门在对以往的代码做一些优化,我在代码中看到一连串的 if(){}elseif(){} 的逻辑判断.这明显是有优化空间的. 由于内部代码不适合分享,这里我就用 <输出今天为星期几> 来 ...
沈阳做假证z
沈阳做假证[电/薇:187ヘ1184ヘ0909同号]办各类证件-办毕业证-办离婚证,办学位证书,办硕士毕业证,办理文凭学历,办资格证,办房产证不. 这是一个简单的取最大值程序,可以用于处理 i32 数 ...
Mac OSX上安装Nginx
1. 通过brew instal nginx安装 ==> Downloading https://homebrew.bintray.com/bottles/nginx-1.10.1.el_cap ...

HTML自学第一篇