Python HTML和CSS 1：html文档结构和常用标签

2019-02-07 本文已影响4人 IIronMan

总体内容
1、前端概述
2、html 文档结构
3、html 标题标签、段落标签、换行标签与字符实体
4、html 块标签、含样式的标签、语义化的标签
5、html图像标签、绝对路径和相对路径
6、html链接标签
7、html列表

一、前端概述

1.1、什么是前端开发？
答：前端开发也叫做web前端开发，它指的是基于web的互联网产品的页面(也可叫界面)开发及功能开发。
1.2、什么互联网产品？
答：互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务，百度搜索、淘宝、微博、网易邮箱等都是互联网产品。
1.3、前端开发需要哪些技术？
答：前端工程师参照产品的效果图来开发页面(也可叫界面)，效果图是由UI设计师用Photoshop(少量设计师用firework)来设计的，为了方便与UI设计师对接工作，前端需要掌握一些Photoshop的技能，Photoshop还可以辅助页面开发。把效果图布局成页面，需要用到HTML语言和CSS语言，页面功能的开发需要用到javascript,为了快速开发和系统开发，还需要学习一些前端的javascript库和框架。

二、html 概述和基本结构

2.1、html 概述：HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
2.2、html基本结构
- 一个html的基本结构如下：
```
<!DOCTYPE html>

<html lang="en">
<head>    
             
     <meta charset="UTF-8">
     
     <title>网页的标题</title>
</head>
<body>
       这是网页显示内容
</body>
</html>
```
  第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
2.3、HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
- xhtml 1.0：是html5之前的一个常用的版本，目前许多网站仍然使用此版本。此版本文档用sublime text创建方法： html:xt + tab,文档示例：
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> xhtml 1.0 文档类型 </title>
</head>
<body>

</body>
</html>
```
- html5：pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的,此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab,文档示例：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文档类型 </title>
</head>
<body>

</body>
</html>
```
- 两种文档的区别：1、文档声明和编码声明；2、html5新增了标签元素以及元素属性
2.4、html注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
```

```

三、html 标题标签、段落标签、换行标签与字符实体

3.1、html标题标签
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题，其后是 <h2>，再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。如下：
```
<h1>这是一级标题</h1>    
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
```

3.2、html 段落标签：<p>段落内容</p>
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，不纯净，带样式，多个<p>标签之间有空行，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落标签</title>
</head>
<body>
<p>夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。风，毫无预兆地席卷整片旷野，撩动人的思绪万千。
  星，遥遥地挂在天空之中，闪烁着它那微微星光，不如阳光般灿烂却如花儿般如痴如醉。
</p>
<p>欲将沉醉换悲凉，清歌莫断肠。这混乱的尘世，究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子，为爱，为信仰，轰轰烈烈的奋斗一场。
  你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声，你是那样高傲孤洁的男子。你的一寸狂心未说，已经几度黄昏雨。
</p>
</body>
</html>

3.3、html换行标签: <br/>
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入 <br /> 来强制换行，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落标签</title>
</head>
<body>
<p>夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。<br/>风，毫无预兆地席卷整片旷野，撩动人的思绪万千。<br/>
  星，遥遥地挂在天空之中，闪烁着它那微微星光，不如阳光般灿烂却如花儿般如痴如醉。
</p>
<p>欲将沉醉换悲凉，清歌莫断肠。这混乱的尘世，究竟充斥了多少绝望和悲伤。<br/>你想去做一个勇敢的男子，为爱，为信仰，轰轰烈烈的奋斗一场。<br/>
  你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声，你是那样高傲孤洁的男子。你的一寸狂心未说，已经几度黄昏雨。
</p>
</body>
</html>

3.4、html字符实体： 
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html段落标签</title>
</head>
<body>
<p>夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。<br/>风，毫无预兆地席卷整片旷野，撩动人的思绪万千。<br/>&nbsp;&nbsp;
 星，遥遥地挂在天空之中，闪烁着它那微微星光，不如阳光般灿烂却如花儿般如痴如醉。
</p>
</body>
</html>

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：“<” 和 “>” 的字符实体为 < 和 >

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
   9 &lt; 8 <br>
   2 &gt; 7
</p>

四、html 块标签、含样式的标签、语义化的标签

4.1、html 块标签

<div></div> 标签 块元素，表示一块内容，没有具体的语义。纯净的，不带样式，可以嵌套自己，也可以嵌套其他的标签，如：<p> 标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签、含样式的标签</title>
</head>
<body>
<div>
<div>我是div</div>
<p>欲将沉醉换悲凉，清歌莫断肠。这混乱的尘世，究竟充斥了多少绝望和悲伤。</p>
</div>

</body>
</html>

<span></span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。

4.2、含样式和语义的标签
- <em> 标签行内元素，表示语气中的强调词
```
<p>欲将沉醉换悲凉，<em>清歌莫断肠</em>。</p>
```
- <i> 标签行内元素，表示专业词汇
```
<p>欲将沉醉换悲凉，<i>清歌莫断肠</i>。</p>
```
<em> 标签与<i> 标签的区别是一个是强调词，一个是专业词汇，都会使字体倾斜
- <b> 标签行内元素，表示文档中的关键字或者产品名,字体加粗
```
<p>欲将沉醉换悲凉，<b>清歌莫断肠</b>。</p>
```
- <strong> 标签行内元素，表示非常重要的内容
```
<strong>欲将沉醉换悲凉，清歌莫断肠。</strong>
```
4.3、语义化的标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1 标签是表示标题，p 标签是表示段落，ul、li 标签是表示列表，a标签表示链接，dl、dt、dd 表示定义列表等，语义化的标签不多。

五、html 图像标签、绝对路径和相对路径

5.1、html 图像标签
<img> 标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
- src 属性定义图片的引用地址
- alt 属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
```
<img src="图片的名字.jpg" alt="图片">
```
  `alt` 属性定义图片加载失败时显示的文字
5.2、绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
提示：绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
- “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
- “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的 pic.jpg 的图片。

六、html 链接标签

<a> 标签可以在网页上定义一个链接地址，它的常用属性有：
- href 属性定义跳转的地址
```
<a href="https://www.baidu.com">百度</a>  
```
  表示链接到百度页面，把当前的页面替换掉
- title 属性定义鼠标悬停时弹出的提示文字框
```
<a href="https://www.baidu.com" title="跳转到百度">百度</a>
```
  `title` 属性定义鼠标悬停时弹出的提示文字框
- target 属性定义链接窗口打开的位置
  - target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
```
<a href="https://www.baidu.com" title="跳转到百度" target="_self">百度</a>
```
  - target="_blank" 新页面会在新开的一个浏览器窗口打开
```
<a href="https://www.baidu.com" title="跳转到百度" target="_blank">百度</a>
```

提示：<a href="#"></a>: # 表示链接到页面顶部,当一个页面内容很多的时候，你可以使用 # 回到顶部

七、html 列表

7.1、有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li> 配合使用来实现，代码如下：在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
```
<ol>
    <li>列表内容一</li>
    <li>列表内容二</li>
    <li>列表内容三</li>
</ol>
```
有序列表
7.2、无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：
```
<ul>
    <li><a href="#">娱乐标题一</a></li>
    <li><a href="#">娱乐标题二</a></li>
    <li><a href="#">娱乐标题三</a></li>
</ul>
```
无序列表

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。可以把娱乐标题换成 <img src="图片的名字.jpg" alt="图片">,从而点击图片进行跳转
7.3、定义列表
定义列表通常用于术语的定义。<dl> 标签表示列表的整体。<dt> 标签定义术语的题目。<dd> 标签是术语的解释。一个 <dl> 中可以有多个题目和解释，代码如下：
```
<h3>前端三大块</h3>
<dl>
   <dt>html</dt>
   <dd>负责页面的结构</dd>

   <dt>css</dt>
   <dd>负责页面的表现</dd>

   <dt>javascript</dt>
   <dd>负责页面的行为</dd>
</dl>
```
定义列表

提示：<dt>标签与 <dd>标签一个等级

Python HTML和CSS 1：html文档结构和常用标签

猜你喜欢

热点阅读