教程来自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>

粗壮的字体

<big>大字体</big>

大字体

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

这是一个强调字体

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

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

<small>小字体<small>

小字体

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

23

<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> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 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自学第一篇的更多相关文章

  1. Android基础学习第一篇—Project目录结构

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

  2. 我的第一篇博客 ——【ToDoList】小程序开发

    我是一只即将大四的大三狗,这是我的第一篇博客,说来惭愧.今年1月份,学校放寒假的时候开始自学的IOS,放假的时候比较起劲,看了一堆Object-C的视频,然后照着中英文对照的IOS基础开发教程,做了两 ...

  3. tensorflow第一篇---numpy模块

    写在前面: 自学tensorflow半个月,博友们给了我很多帮助,这是我第一篇原创的博文,我想把之前的知识梳理一遍,我会分享我一些在学习过程中遇到的问题,我目前只有这些......... 在介绍ten ...

  4. 从.Net到Java学习第一篇——开篇

    以前我常说,公司用什么技术我就学什么.可是对于java,我曾经一度以为“学java是不可能的,这辈子不可能学java的.”结果,一遇到公司转java,我就不得不跑路了,于是乎,回头一看N家公司交过社保 ...

  5. 从0开始搭建SQL Server AlwaysOn 第一篇（配置域控）

    从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...

  6. Python爬虫小白入门（四）PhatomJS+Selenium第一篇

    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...

  7. Three.js 第一篇：绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  8. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  9. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

随机推荐

  1. Mybatis进阶使用-一级缓存与二级缓存

    简介 缓存是一般的ORM 框架都会提供的功能,目的就是提升查询的效率和减少数据库的压力.跟Hibernate 一样,MyBatis 也有一级缓存和二级缓存,并且预留了集成第三方缓存的接口. 一级缓存 ...

  2. Jupyter Notebook 入门指南

    https://www.jianshu.com/p/061c6e5c4b0d cmd输入 :jupyter notebook

  3. NET Core Kestrel部署HTTPS 一个服务器绑一个证书 一个服务器绑多个证书

    .net core 3.0 网站发布到centos后,绑定ssl证书,一个服务器绑一个证书,一个服务器绑多个证书 开始之前:对于windows服务器不存在这个问题,在iis中绑定证书是非常简单的一件事 ...

  4. openCV - 3. Mat对象

    Mat对象与IplImage对象.Mat对象使用.Mat定义数组 Mat对象与IplImage对象 Mat对象OpenCV2.0之后引进的图像数据结构.自动分配内存.不存在内存泄漏的问题,是面向对象的 ...

  5. 在JAVASCRIPT中，为什么document.getElementById不可以再全局（函数外）使用？

    今天在使用JavaScript使用document.ElementById("ID")的时候,发现var x = document.getElementById("chi ...

  6. C++模板函数只能全特化不能偏特化

    C++模板函数只能全特化不能偏特化

  7. Spine学习六 - 碰撞检测

    相信在使用Spine做游戏的时候,肯定会遇到这样的需求: 一个人物有一把大刀,要使用这把大刀去砍怪,伤害检测以这把大刀砍刀怪物为准,那么要怎么在一个看上去就是一体的Spine Object上绑定一个碰 ...

  8. 非IT行业大企程序员讲述MIS系统开发案例

      雪莉叹了一口气,调整了一下被汗水濡湿的刘海,然后向后靠在办公椅中,伸手在电脑键盘上输入了一些内容, 最后拿起印刷着房地产广告的扇子,边扇风边等待着.   她的工位在办公室的东侧角落,侧靠着窗.此时 ...

  9. 大厂运维必备技能：PB级数据仓库性能调优

    摘要:众所周知,数据量大了之后,性能是大家关注的一点,所以我们在业务开发的时候,特别关注性能,做为一个架构师,必须对性能要了解,要懂.才能设计出高性能的业务系统. 一.GaussDB分布式架构 所谓集 ...

  10. Leetcode 974 和可被K整除的子数组

    题目: 解法 //前缀和算法+hash表 class Solution { public: int subarraysDivByK(vector<int>& A, int K) { ...