前端开发之基础知识-HTML（一）

番茄西红柿发布于2019-04-23 13:41 / 2493人阅读

摘要：文档规范文档规范制定了文档的编写规范，可部分遵守，也可全部遵守，看开发要求。标签行内元素，表示一行中的一小段内容，没有具体的语义。表示当前文件所在目录下的上一级目录，比如表示当前目录下的上一级目录下的文件夹中的的图片。

1.1 html概述和基本结构

html概述

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

html基本结构

一个html的基本结构如下：

 1 DOCTYPE html>
 2 <html lang="en">
 3     <head>            
 4         <meta charset="UTF-8">
 5         <title>网页标题title>
 6     head>
 7     <body>
 8           网页显示内容
 9     body>
10 html>

第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是lang="zh-CN",不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。

html文档规范

xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。

1、所有的标签必须小写

2、所有的属性必须用双引号括起来

3、所有标签必须闭合

4、img必须要加alt属性(对图片的描述)

html注释：

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

1.2 html标题

通过

、

,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：

用作主标题（最重要的），其后是

（次重要的），再其次是

，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

1 <h1>这是一级标题h1>
2 <h2>这是二级标题h2>
3 <h3>这是三级标题h3>

1.3 html段落、换行与字符实体

html段落

标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>段落title>
 6 head>
 7 <body>
 8     <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
 9     文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
10     标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
11     p>
12 
13     <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
14     式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
15     页可以从一个网页链接跳转到另外一个网页。p>
16 body>
17 html>

html换行

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

1 <p>
2 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
3 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
4 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
5 p>

html字符实体

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

1 
2 <p>
3   一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
4 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
5 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。p>

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

1 
2 <p>
3     3 < 5 <br>
4     10 > 5
5 p>

1.4 html块、含样式的标签

html块

1、div标签块元素，表示一块内容，没有具体的语义。
2、span标签行内元素，表示一行中的一小段内容，没有具体的语义。

含样式和语义的标签

1、em标签行内元素，表示语气中的强调词
2、i标签行内元素，原本没有语义，w3c强加了语义，表示专业词汇
3、b标签行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
4、strong标签行内元素，表示非常重要的内容

语义化的标签

语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。

1.5 html图像、绝对路径和相对路径

html图像

标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

1 <img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

GPU云服务器云服务器前端开发基础知识 html前端知识 html前端开发 html5前端开发师

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2207.html

Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

JerryWangSAP 2019-08-02 15:21 评论0 收藏0
Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

shadajin 2019-08-19 11:45 评论0 收藏0
Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

asoren 2019-07-01 14:01 评论0 收藏0
Web前端开发学习推荐--菜鸟必看

Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段：前端基础（HTML / CSS / JavaScript / jQuery）初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!（表单标签）html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

keithxiaoy 2019-08-23 18:13 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0