HTML自学第一篇
教程来自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>
<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”定义
<pstyle="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 href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a> ------》
最新文章
- Cisco ASA intra-interface routing
- 基于MATLAB实现的云模型计算隶属度
- Win8.1安装VirtualSVN Server发生service visualSVN Server failed to start解决办法
- javamail邮件发送报错解决方案
- Intersecting Lines(数学)
- jmeter跨线程组传值
- Java基本语法-----java运算符的优先级与结合性
- 关于opencv模板匹配功能的项目测试记录
- Java8内置的函数式编程接口应用场景和方式
- 关于STM32CubeMX使用LL库设置PWM输出
- 20165223 学习基础和C语言基础调查
- HDU 3308 LCIS (经典区间合并)【线段树】
- 在web.xml中配置Spring的application.xml
- 如何解决input file 选取相同文件后,change事件不起作用解决方法
- htop工具使用
- 【BZOJ】【3083】遥远的国度
- springboot的相关信息
- Django restframwork获取列表详情
- Linq lambda 匿名方法
- 【LG3703】[SDOI2017]树点涂色
热门文章
- cpu相关信息(进程、线程、核...)
- cinder migrate基础内容-源码分析
- 第2篇 Scrum 冲刺博客
- 第三篇 Scrum冲刺博客
- Selenium的WebDriver API元素定位中的XPath和CSS
- IDEA下Maven项目搭建踩坑记----2.项目编译之后 在service层运行时找不到 com.dao.CarDao
- Qt启动子进程,子进程关闭时通知主进程,实现主进程对子进程的管理
- update 字符串拼接
- 华为荣耀5X(畅玩版 全网通)USB调试模式如何开启教程(开发者模式 开发者选项打开)
- 删除MBR分区如何使用光盘恢复