HTML
前言
关于html入门篇 我会用上中下三篇来描述,下篇讲述HTML5新标签的内容。
只是简述一些HTML里常用的标签与属性。html是一个语义化编程语言,初学者需要更好的理解标签的语义。
记住标签使用方法的同时请记住标签的语义。
html基础
html (Hyper Text Markup Language)即超文本标记语言。
<html>
<head>
<meta charset="utf-8"/>
<tltle>例子</title>
</head>
<body>
<h1>html</h1>
<p>我是一个<em>html</em>文档!</p>
</body>
</html>
我们该如何去理解超文本标记这几个字呢?
你可能好奇,我们不是要学习HTML? 为什么纠结起它名字的到底是什么意思?
如果你是初学者,我想你很有必要知道
超文本:是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。超文本详细
文本:由语言文字组成的文学实体,代指“作品”,相对于作者、世界构成一个独立、自足的系统。文本详细
标记:我们把每一个“<>”内的内容看成一个标记。
超文本标记:我们可以简单的理解用HTML里给的标签,标记出网页里与标签语义相同的部分,同时用超链接链接相关的文档等等 。下面百度百科的定义。
超文本标记语言(HTML):超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。 浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
HTML发展史
1.1993年(IETF)发布HTML1.0 不是标准
2.1995年(W3C)发布HTML2.0
3.1996年(W3C)发布HTML3.2
4.1997年(W3C)发布HTML4.0
5.1999年(W3C)发布HTML4.0.1
6.2000年(W3C)发布XHTML1.0
7.2001年(W3C)发布XHTML1.1
8.2004年(WHATWG)HTML5草案
9.2008年(合并)HTML5正式版
10.2014年 HTML5定稿
HTML特点
1.html不需要编译,直接由浏览器执行
2.html文件是一个文本文件
3.html文件必须使用html和htm为文件名后缀
4.html大小写不敏感,HTML和html一样(XTML中说到元素必须小写,所以建小写为标准)XTML详细
基础语法
1.基本结构
<!DOCTYPE html> 声明文档类型
<html> HTML根标签
<head > 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
head 标签 是头部标签,我们主要放一些外部样式链接,网页的基本信息等一些不被显示的文件和信息。
body标签 是容纳网页内容的标签,所有在浏览器内显示的不管是文字还是图片都是放在body标签内。
1. 标签的规则
1.1一般标签是成对出现的。
如:
<html>
<head >
<title>
</title>
</head>
<body>
</body>
</html>
有开始标签就有结束标签,结束标签前比开始标签多出"/"来告诉浏览器,我结束了。
1.2少数不是成对出现的。
如:
<br/>
<hr/>
2.什么是元素
<html>
<head >
<title>我是标题,我不在页面内显示</title>
</head>
<body>
我是内容,我在页面内显示
</body>
</html>
标签和标签中的内容 就是元素。 html标签和里边的内容是一个元素
,head标签和里面的内容也是一个元素。同理,tile标签和里面的内容也是一个元素。
<html>
<head >
<title>我是标题,我不在页面内显示</title>
</head>
<body>
我是内容,我在页面内显示
</body>
</html>
3.HTML标签属性
语法:
<标签名 属性名1="属性值" 属性名="属性值">.......内容........</标签名>
标签名和属性名中间用空格隔开,同样属性名和属性名也要用空格隔开。
注释
<!--我是注释内容-->
所有符号都需要在英文下完成
4.文档声明和meta标签
4.1文档声明
<!DOCTYPE>声明必须放在html文档的第一行
<!DOCTYPE>声明不是html标签
<!DOCTYPE html>这样来声明一个html标签
4.2meta标签
<html>
<head >
<title>我是标题,我不在页面内显示</title>
</head>
<body>
asdasd
我是内容,我在页面内显示
</body>
</html>
运行结果会发现乱码的情况!这种情况主要是因浏览器编码问题,我们在代码中head标签中写入meta标签和属性如:
<html>
<head >
<meta charset="utf-8" /> 这句意思是网页的内容使用的什么语言,使用什么编码形式。
<title>我是标题,我不在页面内显示</title>
</head>
<body>
asdasd
我是内容,我在页面内显示
</body>
</html>
注:utf-8,GB2312 国内刚用编码形式。
5.文字和段落
5.1标题标签
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
效果:
我是h1
我是h2
我是h3
我是h4
我是h5
我是h6
h1~h6标签都属于标题标签, h1-h6是六个阶级标签,就好比文章中的目录效果 。
<html>
<head >
<meta charset="utf-8" />
<title>html初级</title>
</head>
<body>
<h1>html初级教程 我是h1标签</h1>
<h2>html的定义 我是h2标签 </h2>
<p>超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。</p>
<h2>html的定义 </h2>
<p>超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。</p>
</body>
</html>
效果:
html初级 html初级教程 我是h1标签
html的定义 我是h2标签
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
html的定义 我是h2标签
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
注:请重视 html 标签语义,这样你才能写出更好的网页。
5.2段落标签等
<p align="center" >我是居中的p标签 我是段落标签</p>
效果:
我是居中的p标签 我是段落标签
在上面的代码中我们已经使用过p标签,意思就是一个段落。
不知道你是否还记得基础语法中提到的属性的写法 如:
p 标签的属性
align属性
值 | 描述 |
---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中 |
justify | 进行伸展,这样每行都是相等的长度 |
如何定义属性
<标签名 属性名1="属性值" 属性名="属性值">.......内容........</标签名>
第一次接触属性,带你一起试用下效果
<p align="left" >我是一段左对齐的段落</p>
<p align="right" >我是一段右对齐的段落</p>
<p align="center" >我是一段居中对齐的段落</p>
<p align="justify" >我是一段伸展的段落,文字太少无法出现效果,我就a来代替aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
效果:
我是一段左对齐的段落
我是一段右对齐的段落
我是一段居中对齐的段落
我是一段伸展的段落,文字太少无法出现效果,我就a来代替aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
5.3换行标签
<p>我后边有一个换行标签<br/>我已经被换行<p>
效果:
我后边有一个换行标签
我已经被换行
我们只需要把br标签放在你想要换行的地方即可。
5.4文字斜体标签
下面代码两个标签效果一样,语言不同。
<p>你好!<i>我的</i>朋友!</p>
<p>你好!<em>我的</em>朋友!</p>
效果:
你好!我的朋友!
你好!我的朋友!
i标签: 单纯的斜体效果。
em标签: “含有语义”的标签,搜索引擎会了解这些语义。其在HTML中是特意被设定为表示“强调”的意思。当发现这些表示“强调”的标签时,一些屏幕阅读器可能使用不同的inflection,更利于SEO(SEO详细)。
5.5文字加粗标签
下面代码两个标签效果一样,语言不同。
<p>你好!<b>我的</b>朋友!</p>
<p>你好!<strong>我的</strong>朋友!</p>
效果:
你好!我的朋友!
你好!我的朋友!
b标签: 单纯的加粗效果。
strong标签: 是一个逻辑标签,意思是加强,它的作用是加强字符的语气,表示该文本比较重要,提醒读者/终端注意。
5.6上标标签
<p>啊啊啊<sup>我是上标</sup></p>
效果:
啊啊啊我是上标
5.7下标标签
<p>啊啊啊<sub>我是下表</sub></p>
效果:
啊啊啊我是下表
上下标多用于数学或科技运算。
6.常用特殊符号
注:冒号改成英文的。
属性 | 描述 | 显示效果 |
---|---|---|
 ; | 空格 | 衬托 衬托 |
<; | < | < |
>; | > | > |
®; | 已注册 | ® |
©; | 版权 | © |
&trade; | 商标 | ™ |
<p> 空格 <小于号>大于号®已注册®版权©商标™</p>
效果:
空格 <小于号>大于号®已注册®版权©商标™
多用于页脚的地方。
7. 列表标签
7.1无序列表
<ul>
<li>我是无序列表1</li>
<li>我是无序列表2</li>
<li>我是无序列表3</li>
<li>我是无序列表4</li>
</ul>
效果:
- 我是无序列表1
- 我是无序列表2
- 我是无序列表3
- 我是无序列表4
无需列表有ul标签的 li标签
组成,对的嵌套方法是ul标签嵌套li标签
。
有人可能会问li标签
嵌套ul标签可以吗?那我们就试试~
错误示范:
<li>
<ul>我是</ul>
<ul>li</ul>
<ul>嵌套</ul>
<ul>ul</ul>
</li>
效果:
- 我是
- li
- 嵌套
- ul
浏览器无法识别我们想要表达什么。 这样成组的标签我们一定要遵守它的嵌套方法。
不过你可以自试试它们反嵌套的效果。
进入下一个话题
type属性
属性值 | 描述 |
---|---|
disc | 圆盘(默认) |
square | 正方形 |
circle | 空心圆 |
我们来自己在试一下:
<ul type="disc">
<li>圆盘(默认)</li>
</ul>
<ul type="square">
<li>正方形</li>
</ul>
<ul type="circle">
<li>空心圆</li>
</ul>
有需列表有ol标签的 li标签
组成,对的嵌套方法是ol标签嵌套li标签
。
7.2有序列表
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
<li>我是有序列表4</li>
</ol>
效果:
- 我是有序列表1
- 我是有序列表2
- 我是有序列表3
- 我是有序列表4
我们有序列表也有type属性,也有不同的样式。
type属性
属性值 | 描述 | 样式 |
---|---|---|
1 | 数字 | 1,2,3… |
a | 小写字母 | a,b,c… |
A | 大写字母 | A,B,C… |
i | 小写罗马数字 | i… |
I | 大写罗马数字 | I… |
我们来自己在试一下:
<ol type="1">
<li>数字</li>
<li>数字</li>
</ol>
<ol type="a">
<li>小写字母</li>
<li>小写字母</li>
</ol>
<ol type="A">
<li>大写字母</li>
<li>打写字母</li>
</ol>
<ol type="i">
<li>小写罗马数字</li>
<li>小写罗马数字</li>
</ol>
<ol type="I">
<li>大写罗马数字</li>
<li>大写罗马数字</li>
</ol>
7.3定义列表
<dl>
<dt>定义列表项</dt> 定义列表项
<dd>列表项描述</dd> 列表项描述
<dt>HTML</dt>
<dd>HTML是超文本标记语言</dd>
</dl>
效果:
定义列表项
- 列表项描述
HTML- HTML是超文本标记语言
8.图像和超链接
8.1图像
<img src="我是写图片地址的" alt="定义一串预备的可替换的文本" />
我们来自己在试一下:
<img src="https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=html%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined©right=undefined&cs=3374279718,4290974383&os=3086807390,4238110177&simid=3302153197,246161291&pn=1&rn=1&di=4620&ln=1360&fr=&fmq=1552723449483_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fs13.sinaimg.cn%2Fmw690%2F002x5VcBgy71xQ2H3fSec%26690&rpstart=0&rpnum=0&adpicid=0&force=undefined&ctd=1552723458034^3_1600X805%1" alt="我是一张html5的图片" />
我们看到标签内有两个属性一个src 一个alt,下面我们看下它们的用法。
src是img标签中必须要有的
src的是:
绝对 URL - 指向其他站点(比如 src=“http://www.example.com/”)
相对 URL - 指向站点内的文件(比如 src="/i/image.gif")
ait是规定图像的替代文本,简单描述一下图片即可。
8.2超链接
<a href="链接的地址" target="链接内容在哪里显示">我就是一个超链接</a>
我们来自己在试一下:
<a href="https://www.csdn.net/" target="_blank" title="我到CSDN主页" name="CSDN">CSDN主页</a>
效果
我们看到有四个属性:href,target,title,name
href
绝对 URL - 指向另一个站点(比如 href=“http://www.example.com/index.htm”)
相对 URL - 指向站点内的某个文件(href=“index.htm”)
锚 URL - 指向页面中的锚(href="#top")
target
属性值 | 描述 |
---|---|
_blank | 在新窗口中打开被链接文档。 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
请自行测试
title:链接提示文本。(鼠标停留在超链接上显示)
name: 锚的名称。( 下小节细说 )
8.3超链接锚的用法
同一页面使用方法
<a id="wo" ></a> 用name属性设下锚点
<a href="#wo">点我跳到</a> 用href属性跳转(注意:还有一个#号)
自行测试(html5不支持此功能)
不同页面使用方法
第一页面<a id="to">点我</a>用name属性在第一个页面设下锚点
第二页面<a href="第二页面所在页面地址#to">点我跳到</a> 用href属性跳转(注意:需要第一个页面地址)
总结
本篇我们讲述过 HTML发展史和特点,还有基础语法和文字段落标题标签。标签的属性也是写出常用的。详细的还请看参考文献。如:w3c,菜鸟,mozilla
==如本文章描述有误请尽快联系博主!感谢您的阅读与帮助!==