第一次网页前端培训笔记(HTML常用标签)

一、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  合并边框

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值