HTML５标签的介绍和使用

web标准不是某一个标准，而是由W3C和其他标准化组织指定的一系列标准的集合
主要包括：
结构(Structre)：使内容更清晰、更由逻辑性
　　表现(presention)：用于修饰内容的样式
　　行为(Behavior)：内容的交互及操作效果
　　　结构标准：结构用于对网页元素进行整理和分类，主要学习HTML
　　　表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
　　　行为标准：行为是指网页模型的定义以及交互的编写，主要学习JacaSeript

HTML:(Hyper Text Markup Language缩写)：中文译为：超文本标记语言，用来描述网页的一种语言。所谓超文本，因为他可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接
总０结：HTML作用就是用标记标签来描述网页，把网页的内容在浏览器中展示出来
HTML骨架：
<html>:根标签（最外面的标签，所有标签都在html标签中）
　　<head>文档的头部（文档的头部秒速文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系，绝大多数文档头部包含的数据都不会真正的内容显示给读者）
　　　<title>标题文档标题（让页面拥有一个属于自己的标题）
　　</head>
　　<body>文档的主体（包含文本的所有内容，超链接、文本、图片、音频、多媒体、表格、列表…）
　　<body>
</html>

HTML标签分类
双标签
　<标签名> 内容</标签名>
　　该语法中" <标签名>“表示该标签的作用开始，一般称为开始标签（start tag），”</标签名>""表示该标签的作用结束,一般称为结束标签（end tag）和开始标签相比。结束标签只是在前面加了一个关闭符“/”；
　　
单标签
　 <标签名 />
　　单标签也称为空标签，是指用一个标签符号就能完整地描述某个功能的标签

HTML 常用标签
　　排版标签：
　　　　排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局常用的标签
　　标题标签：<h1></h1>~<h6></h6>：标题标签语义：作为标题使用，并且依据重要性递减
　　　　注意：h1标签因为重要，所以尽量少用，一般h1都是给logo使用，或者页面中最重要的标题信息
　　段落标签:<p></p>：是网页中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行
　　水平线标签:<hr />：在网页中显示默认样式的水平线
　　换行标签:<br />：在html中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签
　　div、span标签
　　　　　div、span是没有语义的，就像网页布局中的2个重要盒子
　　　　　　<div>内容</div> <span>内容<span>
　　文本格式化标签
　　　　在网页中，有时候需要文字设置粗体、斜线或者下划线效果，这时候需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

HTML５标签的介绍和使用
b、i、s、u只是使用没有强调的意思 strong、em、del、ins语义更强烈

        图像标签 img
            语法中src属性用于指定图像文件的路径和文件名，他是img标签的必须属性；
                <img src="图像URL"/>

HTML５标签的介绍和使用标记属性

HTML５标签的介绍和使用
链接标签<a></a>
在HTML中创建超链接非常简单，只需要用标签环绕需要被链接欸对对象即可
<a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像
href:用于指定的链接目标的URL地址，当为标签href属性时就具有了超链接的功能；
target：用于指定连接网页的打开方式，其取值由self和_blank两种，其中blank为在新窗口打开方式
注意：如果当时没有确定链接目标时，通常将链接标签href属性值定义为#（即href="#"），表示该链接暂时为一个空连接
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频都可以添加超链接
锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
1.使用<a href="#id">链接文本来创建联链接文本
2.使用相应的id名标注跳转的目标位置

        base标签：<base  target="_blank" / >
            base可以设置整体链接的打开状态

        特殊字符标签
            HTML为这些特殊字符准备好了专门的替代代码

HTML５标签的介绍和使用
注释标签：＜!–注释内容–>
注释内容不会显示在浏览器窗口中；但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，检查源代码时就可以看到

        路径：
            相对路径：
                1.图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可；（如<img src="logo.png" />）
                2.图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开（如：<img src ="img/logo.png" />）
                3.图像文件位于HTML文件的上一级文件夹，在文件名之前输入“../”，如果时上两级，则需要使用“../../”，以此类推（如<img src="../logo.png /">）
            绝对路径：
                从盘符开始的路径（如：D\web\img\logo.png）,或完整的网络路径（"http://www.redpig.com/images/logo.gif"）

        列表标签：
            无序列表
                    无序列表的各个列表项之间没有顺序级别之分，是并列的
                        <ul>
                            <li>列表1</li>
                            <li>列表2</li>
                            <li>列表3</li>
                             .....
                        </ul>
                                注意：<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的
                                           <li></li>之间相当于一个容器，可以容纳所有的元素
                                            无需列表都会有自己的样式属性，可以使用CSS  
            有序列表 ol:有序列表即为有排列顺序的列表，其各个列表按照一定的顺序排列定义
                        <ol>
                            <li>列表1</li>
                            <li>列表2</li>
                            <li>列表3</li>
                             .....
                        </ol>
        自定义列表
            定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何的项目符号
            <dl>
                <dt>名词1</dt>
                <dd>名词1解释1</dd>
                <dd>名词1解释2</dd>
                ....
                <dt>名词2</dt>
                <dd>名词2解释1</dd>
                <dd>名词2解释2</dd>
                ....
            </dl>

HTML５标签的介绍和使用

相关推荐