【海码学院公开课】web前端基础入门之HTML和标签课堂学习笔记

一、HTML中的常用标签

1、文字标签

(1)、纯文字标签

b标签:加粗

i标签:斜体

u标签:下划线

s标签:删除线

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

 

(2)、语义文字标签

strong标签:加粗

em标签:斜体

ins标签:下划线

del标签:删除线

<strong>加粗</strong>
<em>斜体</em>
<ins>下划线</ins>
<del>删除线</del>

注意:对于搜索引擎来说语义文字标签要重视的多。为了符合现在W3C的标准,还是推荐使用语义文字标签。

2、标题标签

h1标签、h2标签、 h3标签 、h4标签 、h5标签、 h6标签

<h1>标题标签h1</h1>
<h2>标题标签h2</h2>
<h3>标题标签h3</h3>
<h4>标题标签h4</h4>
<h5>标题标签h5</h5>
<h6>标题标签h6</h6>

3、段落标签

p标签

<p>段落标签</p>

4、水平分割线标签

hr标签

<hr />水平分割线标签

5、行内容器标签

span标签

<span>行内容器标签</span>

6、块级容器标签

div标签

<div>会计容器标签</div>

7、换行标签

br标签

<br />换行标签

 

 

二、HBuilder中的快捷键

注释:ctrl+/

复制:ctrl+c

粘贴:ctrl+v

剪切:ctrl+x

撤销:ctrl+z

删除:ctrl+d

保存:ctrl+s

全部保存:ctrl+shift+s

关闭:ctrl+w

全部关闭:ctrl+shift+w

运行:ctrl+r

标签生成快捷方式:标签名+tab

 

 

三、标签分类和结构标签

1、标签分类

(1)、单标签、双标签

①.单标签写法:<标签名 />

br标签、hr标签、meta标签;(本节课内容)

②.双标签写法:<标签名 ></标签名>

html标签、head标签、title标签、body标签、b标签、i标签、u标签、s标签、strong标签、em标签、ins标签、del标签、h1-h6标签、p标签、span标签、div标签;(本节课内容)

(2)、行内标签、块级标签、行内块级标签

①.行内标签:多个标签存在于一行;

b标签、i标签、u标签、strong标签、em标签、del标签、span标签、s标签、ins标签;(本节课内容)

②.块级标签:独占一行:

h1标签、h2标签、h3标签、h4标签、h5标签、h6标签、p标签、div标签;(本节课内容)

③.行内块级标签:标签存在于一行,但是具有块级标签的宽高属性;(本节课内容中没有此标签)

④.注意:

块级标签可以嵌套行内标签,行内标签不可以套块标签。

p标签、h1-h6标签不要嵌套块级标签,可以嵌套行内标签或者文本内容。

嵌套的时候注意代码的缩进。
 

2、结构标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
    </body>
</html>

<!Doctype html>:规定了html的版本,Html5是最新的版本。

<html></html>:跟标签,网页的所有内容都包含在html标签里面。

<head></head>:头部标签

<meta charset="utf-8" />:元标签,规定html文档的字符编码,避免中文乱码。

<title></title>:网页标题标签

<body></body>:主体标签

 

 

四、转义字符的使用

(1)、常用转义字符

左尖括号(<):&lt;

右尖括号(<):&gt;

版本符号(©):&copy;

空格:&nbsp:

(2)、转义字符图表

 

 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值