教程来自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. 对于CSS里面我之前不太清楚的伪类，我做一些总结

    格式: 标签 + : + 参数 +{ 可填背景颜色,字体颜色,鼠标样式,加粗等 } a:hover{ color:#f40;} :link表示鼠标点击之前的样式 :hover表示鼠标放上去的样式 :a ...

  2. 算法-搜索（6）B树

    B树是平衡的m路搜索树. 根结点至少两个子女,根结点以外的非失败结点至少⌈m/2⌉个子女,所有失败结点都在h+1层. 第h层至少2⌈m/2⌉h-1个结点,因此失败结点数n+1≥2⌈m/2⌉h-1个. ...

  3. IDEA的主题配置

    搞了半天的主题配色,从一些现有的主题网站上想找按照sublime中monokai进行复刻的主题,都没有找到一样的,部分的颜色还会让人看不清楚,这里分享一下自定义主题的方法,和自己配置好的一个主题吧. ...

  4. OGG复制同步,提示字段长度不够ORA-01704

    日常运维OGG的环境中,如果遇到复制进程报错,提示字段长度不足如何处理??? 正常情况下,字段长度不足,但是未达到Oracle的限制时,可以对字段进行扩大限制满足目的. 实际环境中,遇到源端GBK,目 ...

  5. Java面试题（MySQL篇）

    MySql 164.数据库的三范式是什么? 第一范式:强调的是列的原子性,即数据库表的每一列都是不可分割的原子数据项. 第二范式:要求实体的属性完全依赖于主关键字.所谓完全依赖是指不能存在仅依赖主关键 ...

  6. Python最火的第三方开源测试框架 ——pytest

    一.介绍 本篇文章是介绍的是Python 世界中最火的第三方单元测试框架:pytest.它有如下主要特性: assert 断言失败时输出详细信息(再也不用去记忆 self.assert* 名称了) 自 ...

  7. Unity WebGL WebSocket

    在线示例 http://39.105.150.229/UnityWebSocket/ 快速开始 安装环境 Unity 2018.3 或更高. 无其他SDK依赖. 安装方法 通过 OpenUPM 安装 ...

  8. GET和POST的本质区别

    前言:相信小伙伴们面试时候一定都遇到过这个问题,即使没有遇到过,至少也听说过,网上资料一大片,大概每个人都能说出来一些.但是总感觉面试装逼不成功,所以就翻阅了部分资料,进一步整理了下. 一般当我们提到 ...

  9. android尺寸问题（转）

    android尺寸问题(转) (2013-01-15 16:55:36) 转载▼ 标签: 杂谈 分类: LINUX 最近公司做的项目中涉及到屏幕自适应的问题.由于做的是电视版的项目,因此屏幕自适应问题 ...

  10. require exports module.exports

    require 用于引入模块(js文件). JSON.或本地文件 自己写的模块必须是相对路径,省略了node就认为该自定义模块(js文件)是核心模块(内置模块或者第三方模块) node  有模块作用域 ...