一、HTML概述
HTML就是超文本标记语言。“超文本”就是表示页面内可以包含非文字元素,例如:图片、连接、音乐等等。
它是一种建立网页文件的语言,通过标记式的指令(Tag),将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML网页文件可以使用记事本、写字板、HBuilder、Sublime等编辑工具来编写,以.htm或.html为文件后缀名保存。将HTML网页文件用浏览器打开显示,若测试没有问题则可放到服务器(Server)上,对外发布信息。
二、HTML编辑器
Hbulider对前端的支持比较好,所以HTML编辑器我们选择Hbuilder。
Hbuilder X安装及常用配置可以参考这位博主的教程:HBuilder X安装及常用配置_逍遥客.的博客-CSDN博客_hbuilderx运行配置
三、HTML基础语法
1.标签
HTML标记是由<和>所括住的指令标记,用于向浏览器发送标记指令。
主要分为:单标记指令、双标记指令(由<起始标记>内容</结束标记>构成)。
HTML语言使用标志对的方法编写文件,既简单又方便。它通常使用<标志名>内容</标志名>来表示标志的开始和结束,因此在HTML文档中这样的标志对都必须是成对使用的。
为了便于理解,将HTML标记语言大致分为:基本标记、格式标记、文本标记、表格标记、链接标记、表单标记和帧标记等。
1.1单标签
单标签,不设置属性值,如:
<br />、<hr />
1.2单标签属性
单标签(也叫空元素),设置属性值,如:
<hr width="800" />
1.3双标签
双标签,不设置属性值。如:
<title>...</title>
1.4双标签属性
双标签,设置属性。如:
<body bgcolor="red">...</body>
<font size="7">...</font>
2.整体结构
四、HTML常用标签1
HTML 页面是由标签组成,不同的标签浏览器对其进行不同样式和内容的渲染,我们需要记忆常用的标签即可。大致可分为如下几类:标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、 div 和 span 等。
1.标题
h1-h6标签可定义标题,标题依次递减,由于 h 元素拥有确切的语义,因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。相,我们应当使用层叠样式表定义来达到漂亮的显示效果。
h999这样的标签不产生错误,但是不具有标题的效果。
h1标签可以为搜索引擎获取,便于页面在被搜索的时候检索到,但是一个页面最好只有一个h1标签,否则可能进入搜索引擎的黑名单。
<h1></h1>
2.水平线
hr 标签在 HTML 页面中创建一条水平线( horizontal rule )可以在视觉上将文档分隔成各个部分。在 HTML 中, hr 标签没有结束标签。
< hr />
常用属性:
color 颜色 size粗细 width长度(百分比或px)
3.段落
p标签会自动换行
<p></p>
4.换行
<br>
5.列表
5.1有序列表
<ol><li></li></ol>
5.2无序列表
<ul><li></li></ul>
6.div
div 是一个块级元素,通常与 css 配合使用,用于布局。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
div 是一个块级元系。这意味着它的内容自动地开始一个新行。实际上,换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。
div > content </ div >
常用属性
属性【align】
值【left 、 right 、 center】
描述【规定 div 元素中的内容的对齐方式,以后可以用样式取代它】
7.span
span 标签被用来组合文档中的行内元素, span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
行内元素(不会自动换行)
< span > content </ span >
8.格式化标签
8.1font
规定文本的字体、字体尺寸、字体颜色
color 字体颜色、size 字体尺寸、face 字体风格
8.2pre
定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
8.3文本标签
b (粗文本)、i(斜体文本)、 u (下划线文本)、 del (中划线文本)、 sub (下标文本)、sup (上标文本)
五、HTML常用标签2
1.a标签
a 标签定义超链接,用于从一张页面链接到另一张页面。
a 元素最重要的属性是 href 属性,它指示要链接的目标位置,同时没有 href 属性 a 标签内的内容与普通文本没有区别,也就失去了超链接的功能。
若是想要跳转到当前页面,那么 href 的值为#。被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标( target 属性)。
< a href =" http :/// www . baidu . com ">百度</ a >
2.图片
img元素向网页中嵌入一幅图像。
注意:从技术学上讲,img标签并不会在网页中插入图像,而是从网页上链接图像。
<img src=" " alt=" ">
3.表格
table标签定义HTML表格
tr标签定义表格的行。tr元素包含一个或多个th或td元素
td标签定义HTML表格中的标准单元格
th表头(字体居中、加粗效果)
style="border-collapse:collapse 合并边框