HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5的学习-------一(基本语法、标注结构、基本文本标记)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
1.HTML和XHTML之间的历史渊源
有兴趣的可以自行去网上查找相关资料。
2.基本语法
(1).HTML中的语法单位成为标签,格式:<标签名称>内容</标签名称>
eg: <p> 这是标签</p> (暂时不用去管标签p是干什么的,单纯的记住格式便可以了)


(2).标签未必都含有内容
如:<br/>,空标签,换行使用


(3).属性值的设置:为标签设置属性
格式:<标签名称  属性="标签属性">内容</标签名称>

eg:

<body bgcolor="yellow">
	HelloWorld ----Magic_Conch
</body>

(4).注释方法

<!-- 这是一条注释 -->

<!-- 这是一条注释 
	注释也可以换行啦!
	好多行(⊙o⊙)…-->

(5).值得一提的是,即使是错误,浏览器也可以将我们的程序运行自出来,它只会去忽略出现错误标签
3.HTML文档的标准结构
在这里,我们来分析一下html的文档,我们新建一个文档,之后我们将新建的文档里面的内容复制过来给大家看看,这里面就是一个比较完整的HTML结构

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	HelloWorld!
</body>
</html>

(1).第一行 <!DOCTYPE html> 指定该文档所遵循的文档定义类型。对于html文档则应该写成上述模式。
(2).html文档必须包括以下四组标签: <html> <head> <title> <body>
如果为了标准化着想的话,则应该包含上面四个标签,但是如果不包含的话也不会报错(必须包含是XHTM的语法,推荐大家使用,这样会使你的程序更加的规范)
(3).首先我们来分析标签<html>,html中包括了lang属性,这个属性设置了编写文档所用的语言
eg. <html lang="en"> 这里设置了文档语言为英语
html中包含了两部分,第一部分为<head>,head中包含了一个标题元素和一个Meta元素,Meta元素用来提供关于文档的额外信息。如上述的实例代码
第二部分为主体部分,里面有页面的主要部分。
4.最基本的文本标记
(1).段落
标签<p>  p中的内容将作为一个段落显示出来。多余的空格或者换行都会被一个空格所替代。
eg:

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<p>我想            换行
	好不好           我要换行
	行不行       </p>
</body>
</html>

HTML5的学习-------一(基本语法、标注结构、基本文本标记)



(2).换行
<br\>这个标签并没有内容,表示的意思就是换一行。


(3).保留空白字符
<pre>  这个标签有点类似p,但是其中间的空格和换行格式会被保留。

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<pre>我想            换行
	好不好           我要换行
	行不行       </pre>
</body>
</html>

HTML5的学习-------一(基本语法、标注结构、基本文本标记)

在这代码中,最后显示的结果将会保留我们在文档中间放置的空格和换行。


(4).标题
在文档中,文本经常会被分为好多部分,每个部分都会有一个标题,大标题之中可能又会嵌套着小标题,在html中,一共存在着6级标题,分别为<h1>,<h2>,<h3>,<h4>,<h5>,<h6>这些标题的大小是不一致的,h1是最大的,依次递减。

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<h1>标题</h1>
	<h2>标题</h2>
	<h3>标题</h3>
	<h4>标题</h4>
	<h5>标题</h5>
	<h6>标题</h6>
</body>
</html>

HTML5的学习-------一(基本语法、标注结构、基本文本标记)

(5).文本块的引用
<blockquote>引用一段文本快,这段文字会在文档之中双向缩进。

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<p>我的文章:</p>
	<blockquote>哇哇哇哇哇哇哇哇喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂哇哇哇哇哇哇哇哇喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂哇哇哇哇哇哇哇哇喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂</blockquote>
	<p>我的文章:</p>
</body>
</html>



HTML5的学习-------一(基本语法、标注结构、基本文本标记)



(6).字体样式和大小
通过标签实现字体大小的方法现在已近过时了,这里我主要介绍一下几种最常使用的基于内容标签


①.强调标签
<em>和<strong>其中em是斜体,strong是粗体,等下再具体实例之中可以看得更加清楚一点
②.等宽字体,通常用在代码当中
<code>


eg:

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<em>#include “stdio.h”</em><br/>
	<strong>#include "stdio.h"</strong><br/>
	<code>#include "stdio.h"</code><br/>
</body>
</html>


HTML5的学习-------一(基本语法、标注结构、基本文本标记)


③.上标和下标字符
<sub>上标字符
<sup>下标字符
eg:

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<p>X<sub>2</sub><sup>3</sup></p>
</body>
</html>

@H_489_152@




(7).字符实体


HTML5的学习-------一(基本语法、标注结构、基本文本标记)

完整字符实体查看链接http://www.w3school.com.cn/tags/html_ref_entities.html


有些符号子在html文档中作为保留字存在,不能以本身的样式进行拼写,因此便会有其他的表示方法,我来举一个字符实体的例子相信大家就都能明白了。

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<p>¼ < ½</p>
</body>
</html>


HTML5的学习-------一(基本语法、标注结构、基本文本标记)


(8).水平线  
<hr/>该标签没有内容,作用是结束改行,并且绘制一条水平线,水平线的宽度,长度和位置由浏览器决定。

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Magic_Conch</title>
</head>
<body>
	<p>¼ < ½</p>  <hr/>
</body>
</html>

HTML5的学习-------一(基本语法、标注结构、基本文本标记)

大佬总结

以上是大佬教程为你收集整理的HTML5的学习-------一(基本语法、标注结构、基本文本标记)全部内容,希望文章能够帮你解决HTML5的学习-------一(基本语法、标注结构、基本文本标记)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。