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

随机推荐

java基础-01：dos命令
进入cmd方式 win + r 输入 cmd 随便进入一个文件夹在导航栏输入cmd,回车即进入命令行命令盘符切换:直接输入 E: ,回车即可查看文件夹下所有目录:dir 切换目录: cd 跨盘 ...
记写 android 微信登录的demo历程
前言首先看一条链接: https://github.com/Tencent/WeDemo 腾讯给了一个wedemo,微信第三方登录的例子.里面是php和ios,ios是object写的,php还是原 ...
kubectl 安装
下载kubectl二进制文件curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.10.0/bin/linux/a ...
SecureCRT 关键字高亮显示
grep命令红色高亮关键字 1. 左边侧栏 Session Manage 右键Sessions --Properties 2 Terminal--Appearance Current color s ...
UTF-8、GB2312、GBK编码格式详解和编码示例
UTF-8.GB2312.GBK编码格式详解参考文章 UTF-8 使用1~4个字节对每个字符进行编码 128个ASCII字符字需要一个字节编码带有附加符号的拉丁文.希腊文.西里尔字母.亚美尼亚语. ...
解决git add README.md 时报错 fatal: pathspec 'README.md' did not match any files
解决办法一: 直接在远程仓库创建然后在本地$ git pull origin master 解决办法二: 换成$ touch README.md在本地创建修改后再commit push上去
[ASP.NET Core开发实战]基础篇02 依赖注入
ASP.NET Core的底层机制之一是依赖注入(DI)设计模式,因此要好好掌握依赖注入的用法. 什么是依赖注入我们看一下下面的例子: public class MyDependency { pub ...
从后端到前端之Vue（六）表单组件
表单组件做项目的时候会遇到一个比较头疼的问题,一个大表单里面有好多控件,一个一个做设置太麻烦,更头疼的是,需求还总在变化,一会多选.一会单选.一会下拉的,变来变去的烦死宝宝了. 那么怎么解决这个问题 ...
数字电路基础（二）TTL与非门输入端悬空和接大电阻的问题
引言我们在做那些判断与非门输入输出的时候,常常把输入端悬空和接大电阻作为高电平输入处理,比如下边这一例题: 很显然,我们无法直接从与非门逻辑图中看出其内部工作原理,那我们该如何分析呢?那肯定是去分析 ...
Matlab摄像头视频基本处理
一.读取摄像头 1.首先保证摄像头及其驱动正确在电脑上安装 2.简单的代码显示驱动摄像头,并显示: vid = videoinput('winvideo',1); preview(vid); 3.默认 ...

HTML自学第一篇