网页开发基础知识

html常用的标签

注释标签、文字标签和段落标签

注释标签

原文

<div class="container">
    <h1>Hello, world!</h1>
    <p>Welcome to my website!</p>
</div>

加上注释

<!-- <div class="container">
    <h1>Hello, world!</h1>
    <p>Welcome to my website!</p>
</div> -->

文字标签

格式 <font>……</font>

常用属性

color

1.使用英文单词表示 red black blue green

2.rgb(十六进制,0~9 a~f) 每两位代表一种颜色 red green blue 常用的十六进制颜色: 语法格式:#后面跟上随机6个位数

#ffffff 白色 #000000 黑色 #abcdef 天蓝色 #ff0000 红色

size

size:取值范围1~7之间 如果超出了最大值使用默认最大值7size:取值范围1~7之间 如果超出了最大值使用默认最大值7

举个例子

<font color="red" size="4">宣示—习近平发出新时代改革开放强音</font>

效果如下

宣示—习近平发出新时代改革开放强音

段落标签

格式 <p>……</p>

作用:设置文本的样式(外观) 语法格式:style='属性名:属性值;属性名2:属性值2..'

font-size:修改文字的大小 fonts-size:20px 单位像素 background-color:设置文本的背景颜色

width:设置宽度的属性
1.使用像素 800px 2.使用百分比: 80% height:设置高度的属性

举个例子

<p style="color:white;background: red;width:80%;height:200px;">新浪科技讯 北京时间12月21日早间消息，本周四，苹果宣布约翰·詹南德雷亚（John Giannandrea）进入公司执行团队。不久之前，苹果刚刚任命詹南德雷亚担任AI、机器学习战略高级副总裁。晋升之后，詹南德雷亚直接向苹果CEO库克汇报工作。</p>

效果如下

新浪科技讯 北京时间12月21日早间消息，本周四，苹果宣布约翰·詹南德雷亚（John Giannandrea）进入公司执行团队。不久之前，苹果刚刚任命詹南德雷亚担任AI、机器学习战略高级副总裁。晋升之后，詹南德雷亚直接向苹果CEO库克汇报工作。

和字体相关的其他标签

加粗

<!--加粗-->
<p>段落</p>
<b>加粗</b>
<strong>加粗2</strong>

效果

段落

加粗 加粗2

下划线

<!--下划线-->
<u>下划线</u>

效果

下划线

删除线

<!--删除线-->
<s>删除线</s>
市场价:<s>999</s>现价:99

效果

删除线 市场价:999现价:99

换行

<!--换行-->
这一举动表明苹果高度重要AI。库克在声明中说：“在苹果，约翰做得很好，<br/>
很高兴能看到他加入我们的执行团队。机器学习与AI对于苹果的未来至关重

一举动表明苹果高度重要AI。库克在声明中说：“在苹果，约翰做得很好，
很高兴能看到他加入我们的执行团队。机器学习与AI对于苹果的未来至关重

上标和下标

<p><sup>上标</sup>
正常显示的文字
<sub>下标</sub></p>

效果

^上标 正常显示的文字 _下标

斜体

<!--斜体-->
<i>斜体</i>
<em>斜体2</em>

斜体 斜体2

缩进

<!--缩进-->
<blockquote>詹南德雷亚在谷歌工作8年，4月份加入苹果。在谷歌工作时，他曾经是搜索、机器智能与研发主管。跳到苹果之后，詹南德雷亚对Siri、Core Ml负责。
</blockquote>

效果

詹南德雷亚在谷歌工作8年，4月份加入苹果。在谷歌工作时，他曾经是搜索、机器智能与研发主管。跳到苹果之后，詹南德雷亚对Siri、Core Ml负责。

标题标签和字符实体

标题标签：<hn></hn> 注意：n的取值范围为1~6的整数

举例

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

效果

标题1

标题2

标题3

标题4

标题5

标题6

字符实体

特殊字符

&lt ---> <
&gt ---> >

版权

<!--版权-->
<p>&copy;北京清华出版社</p>

效果

©北京清华出版社

空格

<!--空格-->
<p>&nbsp;&nbsp;&nbsp;&nbsp;一名在美中国公民被控窃取商业机密,美方称涉案达18亿</p>

    一名在美中国公民被控窃取商业机密,美方称涉案达18亿

双引号

<!--双引号-->
<p>&quot;华为回应部分国际银行断交:公司经营稳健,业务运转正常&quot;</p>

"华为回应部分国际银行断交:公司经营稳健,业务运转正常"

和号

<!--和号-->
<p>11人跨省全链条制贩毒网络团伙&amp;被摧毁,头目是前知名歌手</p>

11人跨省全链条制贩毒网络团伙&被摧毁,头目是前知名歌手

图像标签和路径

图像标签

格式<img……/>

作用：显示网页上面的图片

常用属性

1.src:图片的路径 2.width:设置图片的宽度 3.height:设置图片的高度 4.alt:图片的替换文本,如果图片资源加载不出来,显示文本 5.title:鼠标悬浮标题

举例

<!--直接设置网页上显示图片,使用图片默认宽高-->
<img src="img/pic.jpg"  />

<!--使用width和height-->
<img src="img/pic4.jpg" width="100px" height="100px" />

<!--图片替换文本-->
<img src="img/pic33.jpg" alt="圣诞节快乐" />

<!--鼠标悬浮标题-->
<img src="img/pic2.jpg" title="美女与野兽" width='200px' height='200px'/>