前端开发之HTML篇一
主要内容:
一、HTML简介
二、HTML标签
三、HTML文档结构和注释
四、head标签及相关内容
五、body标签及相关内容
1️⃣ HTML简介
(1)HTML
HTML是一个网页的主体部分,也是一个网页的基础。因为一个网页可以没有样式,可以没有交互,但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。
HTML,全称是超文本标记语言(HyperText Markup Language),它是一种用于创建网页的标记语言。标记语言是一种将文本(Text)以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记(markup)进行标识。
HTML则是世界通用的、用于描述一个网页的信息的标记语言,我们使用的浏览器具有将HTML文档渲染并展示给用户的功能(当你访问知乎网站的时候,实际上你获得了一份由知乎提供给你的HTML文档。浏览器将根据HTML文档渲染出你看到的网页)。
head,div这类的带尖括号的玩意儿叫标签,标签描述了文本的作用,比如p标签表示其内部的文本是一个段落,a标签标识内部的文本是超链接等;与此同时,通过标签的互相嵌套,表示了这个文档的结构。至于哪个标签表示什么意思、总共有多少个种类的标签这类的问题,由W3C(万维网联盟)这一组织规定。 很显然,HTML作为一种标记语言它并没有什么逻辑,简单来说就是一些符号,一些有特殊意义的符号,一些浏览器认识的有特殊意义的符号。 我们写好的HTML文件最终都会运行在浏览器上,由浏览器来解析。 (2)开发环境
HTML编辑器可以选择,常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。 (3)文件后缀名
文件后缀一般使用.html或.htm, .html与.htm均是静态网页后缀名,网页文件没有区别与区分,html与htm后缀网页后缀可以互换,对网页完全没有影响同时也没有区别。可以认为html与htm没有本质区别,唯一区别即多与少一个“l”。
2️⃣ HTML标签 1、HTML标签是干什么的?
HTML作为一门标记语言,是通过各种各样的标签来标记网页内容的。我们学习HTML主要就是学习的HTML标签。
2、标签的特点
(1)在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`、`<p>`都是标签。(2)HTML中标签通常都是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个`/`,如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。(3)标签之间是可以嵌套的。例如:div标签里面嵌套p标签的话,那么`</p>`必须放在`</div>`的前面。(4)HTML标签不区分大小写,`<h1>`和`<H1>`是一样的,但是我们通常建议使用小写,因为大部分程序员都以小写为准。
3️⃣ HTML文档结构和注释 1、HTML文档结构 (1)什么是HTML文档结构?
HTML文件的结构:一个HTML文件是有自己固定结构的。
(2)HTML文档结构的特点
<!DOCTYPE HTML> <html><head>头部信息相关内容</head><body>页面主体相关内容</body> </html>
对于上面代码的解释: 首先,<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML文档。 ① <html></html> 称为根标签,,所有的网页标签都在<html></html>中。 ② <head></head>,用于定义文档的头部,它是所有头部元素的容器。常见头部元素有<title>、<script>、<style>、<link>和<meta>等标签。 ③ 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在<body>标签中的内容最终会在浏览器中显示出来。
小结:
HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性。 2、HTML注释 无论我们学习什么编程语言,一定要重视的注释。 (1)HTML中注释的格式
<!--此处为代码注释-->注意: 注释中可以直接使用回车换行。
(2)我们习惯用注释的标签把HTML代码包裹起来。如下:
<!--代码注释,写在html代码之前>运行的代码 <!--代码注释,写在html代码之后-->
(3)HTML注释的注意事项
HTML注释不支持嵌套;HTML注释不能写在HTML标签中。
4️⃣ head 标签及相关内容
1、 head 标签的内容和作用
文档的头部描述了文档的各种属性和信息,包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用(移动端)的等。
示例如下:
<!DOCTYPE html> <html lang="en"> <!--lang="en"表示页面默认是英文--> <head><meta charset="UTF-8"><title>Title</title> </head> <body> 在网页中显示的内容 </body> </html>
2、title 标签
(1)作用:
在<title>和</title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。
(2)使用示例:
<!DOCTYPE HTML> <html><head lang="en"><meta charset="utf-8"><title>暮光微凉的博客</title></head><body></body> </html>
3、meta标签
(1)作用:
元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。提供的信息是用户不可见的。
(2)meta 标签的组成
meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
<1> http-equiv属性
它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
① <!--指定文档的内容和编码类型--> 如:<meta http-equiv="Content-type" content="text/html" charset="utf-8"/>② <!--重定向3秒跳转到指定的网址,注意有分号--> 如:<meta http-equiv="refresh" content="3;url=https://www.cnblogs.com/schut/">③ <!--告诉浏览器以最高级模式渲染当前网页--> 如:<meta http-equiv="x-ua-compatible" content="IE=edge">
<2> name 属性
主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和分类信息用的。
<!--为了我们的SEO优化,工作的时候下面这两句要写--><meta name="keywords" content="meta总结,html meta,meta属性,meta跳转" ><meta name="description" content="暮光微凉">
4、style 标签
(1)作用:
<!---定义内部样式表->
(2)示例:
<style type="text/css">p{color:red;}</style>
5、link 标签
主要作用如下:
(1) <!--icon图标(网站图标)--><link rel="icon" href="fav.ico" href="./fav.ico">(2)<!--引入外部样式表--><link rel="stylesheet" type="text/css" href="./file.css"> <!--同一目录下用“./”导入-->
6、script 标签
<!--定义JavaScript代码或引入JavaScript文件--><scrpt src="myscript.js"></script>
5️⃣ body 标签及相关内容
网页中显示的内容一定要放在body标签中。
1、h 标签,主要用作标题(块级元素,独占一行)
示例:
<!--以下是h1到h6标签,h1字体最大,h6字体最小,一般用于标题--><h1>暮光微凉</h1><h2>暮光微凉</h2><h3>暮光微凉</h3><h4>暮光微凉</h4><h5>暮光微凉</h5><h6>暮光微凉</h6>
View Code
2、段落标签 -- p
<p>段落内容</p> --> paragraph的简写,定义段落。
示例:
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>文本样式标签</title></head><body><p>段落内容</p> --> paragraph的简写,定义段落<p> HTML,全称是超文本标记语言(HyperText Markup Language),它是一种用于创建网页的标记语言。</p><p>标记语言是一种将文本(Text)以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的计算机文字编码。</p><p>与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记(markup)进行标识。</p></body> </html>
View Code
3、文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜体、线条样式等...
主要有以下几种:
(1)<b></b>:加粗 (2) <i></i>: 斜体 (3)<u></u>:下环线 (4)<s></s>: 删除线 (5)<sup></sup>:上标 (6)<sub></sub>:下标 (7)如果想在一段文字中特别强调某几个字,这时候就可以用到`<em>`或`<strong>`标签。 这两个标签都是表示强调,但是两者在强调的语气上有区别:`<em>`表示强调,`<strong>`表示更强烈的强调。 在浏览器中`<em>`默认会用斜体表示,`<strong>`会用粗体来表示。两个标签相比,我们通常会推荐大家使用`<strong>`表示强调
示例:
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>文本样式标签</title></head><body><p> <b>HTML</b>,<i>全称是超文本标记语言</i>(<u>HyperText Markup Language</u>),<s>它是一种用于创建网页的标记语言</s>。</p><p><em>标记语言</em>是一种将文本<sup>(Text)</sup>以及文本相关的其他信息结合起来,展现出关于<strong>文档结构和数据处理细节</strong>的计算机文字<sub>编码</sub>。</p></body> </html>
View Code
4、超链接标签 -- a
超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像。 通常有两种使用<a>标签的方式:
1、通过使用 href 属性 - 创建指向另一个文档的链接 2、通过使用 name 属性 - 创建文档内的书签
(1)常见用法如下:
<!--a链接 超链接target:_blank 在新的网站打开链接的资源地址_self 在当前网站打开链接的资源地址title:鼠标悬停时标题--><a href="http://www.baidu.com" target="_blank" title="暮光微凉">暮光微凉</a> <!--链接跳转网址--><a href="1.rar">软件包</a> <!--下载软件包链接--><a href="fav.ico">图标</a> <!--下载图片--><a href="mailto:935259249@qq.com">联系我们</a> <!--联系方式--><a href="#">跳转到顶部</a><a href="#nav">跳转到指定nav处标签处</a><a href="javascript:alert(1)">提示</a> <!--点击会弹出提示1--><a href="javascript:">提示</a> <!--点击无任何反应--><!--a标签介绍结束-->
(2)链接到同一个页面的不同位置
<!DOCTYPE HTML> <html> <body> <p> <a href="#c6">查看chapter 6</a> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p><h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p><h2><a name="c6">Chapter 6</a></h2> <p>This chapter explains ba bla bla</p><h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p><h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p> </body> </html>
View Code
5、列表标签 -- ul(无序标签)、ol(有序标签)、dl(定义列表)
网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用,每条li表示列表的内容。
<ul> : unordered lists的缩写,即无序列表。
<ol> : ordered listsde的缩写,即有序列表。
示例如下:
<ul><li>我的购物车</li><li>我的优惠券</li><li>我的收藏</li><li>退出</li></ul><ol><li>我的钱包</li><li>我的积分</li><li>我的账单</li><li>退出</li></ol>
View Code
(1)ul 标签的属性
ul标签的属性:disc:实心圆(默认值)circle:空心圆square:实心矩形none:不显示标识 如下实例:<ul type="circle"><li>我的购物车</li><li>我的优惠券</li><li>我的收藏</li><li>退出</li></ul>
View Code
(2)ol 标签的属性
type:列表标识的类型1:数字a:小写字母A:大写字母i:小写罗马字符I:大写罗马字符注意:列表标识的起始编号默认为1示例如下:<ol type="I"><li>我的钱包</li><li>我的积分</li><li>我的账单</li><li>退出</li></ol>
View Code
(3)dl标签的属性
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始;每个自定义列表项以 <dt> 开始;每个自定义列表项的定义以 <dd> 开始。
<html><body><h2>一个自定义列表:</h2><dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd> </dl></body> </html>
View Code
6、盒子标签 -- div
<div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的、不同的部分。 如下示例:
<!DOCTYPE html> <!--html中的标签都是闭合标签,闭合标签包含双闭合和单闭合双闭合:如<html></html>;单闭合:如<meta /> --> <!--页面的根结点--> <html lang="en"><head> <!--包含头部的信息,是一个容器,包含如style,title,meta,script,link等--><meta charset="utf-8"/> <!--声明头部的元信息,比如对我们文档规定编码格式---></head><body><div id="content"><div class="h_list"><!--包含浏览器显示的内容标签,如div,p,a,img,input等--><p style="height: 500px">这是第一个HTML5文档</p><p id="nav">nav跳转到此处</p><!--以下是h1到h6标签--><h1>暮光微凉</h1><h2>暮光微凉</h2><h3>暮光微凉</h3><h4>暮光微凉</h4><h5>暮光微凉</h5><h6>暮光微凉</h6><p>段落内容</p><!--h结束--></div><div class="p_list" style="height: 300px"><!--p标签开始--><p> <b>HTML</b>,<i>全称是超文本标记语言</i>(<u>HyperText Markup Language</u>),<strong>它是一种用于创建网页的标记语言</strong>。</p><p><em>标记语言</em>是一种将文本<sup>(Text)</sup>以及文本相关的其他信息结合起来,展现出关于<strong>文档结构和数据处理细节</strong>的计算机文字<sub>编码</sub>。</p><p>与文本相关的其他信息(<s>包括例如文本的结构和表示信息等</s>)与原来的文本结合在一起,但是使用标记(markup)进行标识。<u>HTML则是世界通用的、用于描述一个网页的信息的标记语言</u>,我们使用的<u>浏览器具有将HTML文档渲染并展示给用户的功能</u>(当你访问知乎网站的时候,实际上你获得了一份由知乎提供给你的HTML文档。浏览器将根据HTML文档渲染出你看到的网页)。</p><p>header,div这类的带尖括号的玩意儿叫标签,标签描述了文本的作用,比如p标签表示其内部的文本是一个段落,a标签标识内部的文本是超链接等;与此同时,通过标签的互相嵌套,表示了这个文档的结构。至于哪个标签表示什么意思、总共有多少个种类的标签这类的问题,由W3C(<strong>万维网联盟</strong>)这一组织规定。 很显然,HTML作为一种标记语言它并没有什么逻辑,简单来说就是一些符号,一些有特殊意义的符号,一些浏览器认识的有特殊意义的符号。我们写好的HTML文件最终都会运行在浏览器上,由浏览器来解析。</p><!--p标签结束--></div><div class="a_list" style="height: 100px"><!--a标签介绍开始--><!--a链接 超链接target:_blank 在新的网站打开链接的资源地址_self 在当前网站打开链接的资源地址title:鼠标悬停时标题--><a href="http://www.baidu.com" target="_blank" title="暮光微凉">暮光微凉</a> <!--链接跳转网址--><a href="1.rar">软件包</a> <!--下载软件包链接--><a href="fav.ico">图标</a> <!--下载图片--><a href="mailto:935259249@qq.com">联系我们</a> <!--联系方式--><a href="#">跳转到顶部</a><a href="#nav">跳转到指定nav处标签处</a><a href="javascript:alert(1)">提示</a> <!--点击会弹出提示1--><a href="javascript:">提示</a> <!--点击无任何反应--><!--a标签介绍结束--></div><div class="ul_ol_li" style="height: 300px"><!--列表标签介绍开始--><ul type="circle"><li>我的购物车</li><li>我的优惠券</li><li>我的收藏</li><li>退出</li></ul><ol type="I"><li>我的钱包</li><li>我的积分</li><li>我的账单</li><li>退出</li></ol><!--列表标签介绍结束--></div></div></body> </html>
View Code
上面示例中的代码可以分为以下层次:
<div id="content"><div class="h_list">关于h标签的内容</div><div class="p_list">关于p标签的内容</div><div class="a_list">关于a标签的内容</div><div class="ul_ol_li">关于ul,ol,li标签的内容</div></div>
小结:
我们将文档放在一个父级的区(div)中,它里面包含四块区(div)域,浏览器查看效果,你会发现每小块区域都是独占一行的,所以div是块级元素。另外,每块区域表示独立的一块,id属性和class属性其实很简单,你可以看成给这个区域起个名字。id是唯一的,一个页面中不能有两个重复的id,跟身份证号码一样,class可以设置同样的属性值,并且可以设置多个,例如class=’para n1‘
7、图片标签 -- img 一个网页除了有文字,还会有图片。我们使用<img/>标签在网页中插入图片。 语法:
<img src="图片地址" alt="图片加载失败是显示的内容" title="提示信息"/>
注意:
1、src设置的图片地址可以是本地的地址也可以是一个网络地址。2、图片的格式可以是png、jpg和gif。3、alt属性的值会在图片加载失败时显示在网页上。4、还可以为图片设置宽度(width)和高度(height),不设置就显示图片默认的宽度和高度5、与行内元素在一行内显示6、可以设置宽度和高度
示例1:
<div class="img标签介绍"><!--img标签介绍--><img src="pic1.jpg" alt="图片1,可爱萌妹" style="width: 400px ;height: 300px"><img src="pic2.png" alt="图片2,霸气御姐" style="width: 400px ;height: 300px"></div>
View Code
示例2:
<div class="ex1"><ul type="none"><li><a href="pic1.jpg" ><img src="pic1.jpg" alt="萌妹" title="可爱萌妹" style="height: 800px;height: 600px"/></a></li><li><p>这是一个可爱的萌妹额,想要吗?对不起,我也没有</p></li></ul></div>
View Code
8、span 标签可以单独摘出某一块内容,结合css设置相应的样式。
例如:
<p> <span>CSS</span>,全称“(层叠样式表)”。以后我们在别的地方看到<span>“层叠样式表”、“CSS样式”</span>,指的就是CSS。</p>
View Code
9、其它标签
(1)换行标签 -- <br />
<br>标签用来将内容换行,其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
(2)分割线 -- <hr />
<hr>标签用来在HTML页面中创建水平分隔线,通常用来分隔内容.
(3)特殊符号
浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML代码中的所有连续的空行(换行)也被显示为一个空格。
常见特殊字符如下:
空格 > > < < & & ¥ ¥ 版权 © 注册 ®
更多特殊字符请见:http://tool.chinaz.com/Tools/HtmlChar.aspx
返回顶部
转载于:https://www.cnblogs.com/schut/p/9159609.html
前端开发之HTML篇一相关推荐
- Web前端开发之HTML篇
前端开发是用来设计给用户看的网页的部分,而Web前端开发则是通过创建Web页面来呈现给用户的过程,其包含了html(结构),css(样式),JavaScript(行为)三大部分.在本篇文章中,我主要对 ...
- 前端开发之JS篇(二)
目录 1. JS输入输出语句 2. 变量 2.1 什么是变量 2.2 变量的使用 2.3 变量初始化 2.4 变量的命名规范 3. 简单数据类型 3.1 Number(数字型) 3.2 String( ...
- 前端开发之JS篇(四)
目录 1. 数组 2. 预解析 1. 数组 数组(Array)是指一组数据的集合,其中的么个数据被称为元素,在数组中可以存放任意类型的元素.数组是一种将一组数据存储在单一变量名的优雅方式. 数组的创建 ...
- 前端开发之JS篇(一)
目录 JS组成 1.ECMAScript---JavaScript语法 2.DOM---文档对象模型 3.BOM---浏览器对象模型 JS书写位置 1.行内式 2.内嵌式 3.外部式 JS注释 单行注 ...
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- 深入理解移动前端开发之viewport
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
- 前端开发之SEO(搜索引擎优化)
前端开发之SEO(搜索引擎优化) 文章目录 前言 一.突出重要内容 合理的title.description和keywords 语义化书写HTML代码,符合W3C标准 利用布局,把重要内容HTML代码 ...
- 前端开发之jQuery
前端开发之jQuery 一.jquery简介 1. jquery是什么? 2. 什么是jQuery对象? 二.寻找元素(重要的选择器和筛选器) 1. 选择器 2. 筛选器 三.操作元素(属性 CSS ...
- date javascript 时区_第23节 Datejs 日期库-Web前端开发之Javascript-零点程序员-王唯
Datejs 是一个开源的JavaScript库,用来解析.格式化和处理日期数据,支持多种语言的日期格式处理:官网:www.datejs.com/ Moment.js 是一个简单易用的轻量级JavaS ...
最新文章
- detectmultiscale函数参数含义_OpenCV detectMultiScale函数
- 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法
- 实现 Java 本地缓存
- python编写剪刀石头布游戏_闲着也是闲着:PYTHON 编写剪刀石头布游戏
- enterpriseTECH Dec 11
- 如何攻克目标检测?百度全球顶级会议双料冠军团队有话说!
- F#基础教程 大纲
- Verilog HDL中模块参数传递的方法
- txt如何单独单独选择一列_散列| 单独链接以解决冲突
- 在gitlab 中使用webhook 实现php 自动部署git 代码
- mysqlslap详解--MySQL自带的性能压力测试工具(转)
- js对象(Object)和字符串(String)互转 - 代码篇
- 如何在 Web 开发中找到第一份工作?
- react 实用项目分享-mock server
- python语法学习之对象与参考,局部与全局变量
- sqlserver2012 学习总结笔记
- 2017年IT168技术卓越奖评选获奖名单:投影篇
- js string转json有斜杠_json 带斜杠时如何解析的实现
- 普通路由器DMZ主机设置及访问方法
- CentOS 7.5 安装MySQL教程