web前端(3)—— html标签及web页面结构
本节内容简单介绍下html都有哪些标签
还是百度首页,查看源代码看看:
我把源代码复制下来另存为html文件里:
注意:网页文件的后缀都是html或者htm
我这用的pycharm编辑器(Python编辑器,也可以编辑web页面),编辑器有很多种,比如notepad++,webstorm,hbuilder,Visual Studio,sublime text等等的都可以做web编辑器,这个就根据各位朋友的爱好来选择了,安装都是很简单的,所以不介绍了
HTML
好的,我先点这个按钮,把层级隐藏一下
变成这样:
以上这样的结构就是web页面的结构了,最前面的<!DOCTYPE html>是一个声明,全名是Document Type HyperText Mark-up Language,表示这是html5规范的页面
剩下的就是一个大的html,像这种<html>,<head>,<body>就是网页标签:
1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`、`<p>`都是标签。 2. HTML中标签**通常**都是成对出现的,分为开始标签和结束标签,结束标签比开始标签多了一个`/`,如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。 3. 标签之间是可以嵌套的。例如:div标签里面嵌套p标签的话,那么`</p>`必须放在`</div>`的前面。 4. HTML标签不区分大小写,`<h1>`和`<H1>`是一样的,但是我们通常建议使用小写,因为大部分程序员都以小写为准。
外层用<>包住,并且前开后闭,在要闭合的时候用</>包住,完整的就是 <html></html> ,像这种有前开后闭的就叫双标签
然后 <html></html> 里面有两个子集,<head></head><body></body>,head,就是web页面的头部,body就是web页面的身体。有头有身体,就组成了html,也就是组成web页面:
head
那么head里面可以有什么呢?
展开看看:
如您所见,有meta,link,title标签。大家看到没有,meta没有后闭标签,只有<meta>,像这种就是单标签。
<meta>
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词
元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
常用的meta标签:
- http-equiv属性
它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址,注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性
主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ‘,’号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="XXXX">
<title>
<title>标签:在<title>
和</title
>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。这个就没什么可以说的了,看两个例子你就懂了:
body
好接着刚才的百度首页,展开body标签看看:
好的,如同head标签一样,里面有比head还多的子标签,div,p,i,a,b……。
这些标签就很常用很重要了,后面详细介绍,这里暂且略过
总结:
首先,
<!DOCTYPE HTML>
是文档声明,必须写在HTML文档的第一行,位于<html>
标签之前,表明该文档是HTML5文档。
<html></html>
称为根标签,所有的网页标签都在<html></html>
中。<head></head>
标签用于定义文档的头部,它是所有头部元素的容器。常见的头部元素有<title>
、<script>
、<style>
、<link>
和<meta>
等标签,头部标签在下一节中会有详细介绍。- 在
<body>
和</body>
标签之间的内容是网页的主要内容,如<h1>
、<p>
、<a>
、<img>
等网页内容标签,在<body>
标签中的内容(图中淡绿色部分内容)最终会在浏览器中显示出来。HTML文档包含了HTML标签及文本内容,不同的标签在浏览器上会显示出不同的效果,所以我们需要记住最常见的标签的特性
web前端(3)—— html标签及web页面结构的更多相关文章
- 范仁义web前端介绍课程---2、web前端是干嘛的
范仁义web前端介绍课程---2.web前端是干嘛的 一.总结 一句话总结: 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技 ...
- web前端之 HTML标签详细介绍
html标签的分类 点我查看完整的html标签介绍 在html中,标签一般分为块级标签和行内标签 块级标签:块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签"p& ...
- web前端-《手机移动端WEB资源整合》——meta标签篇
前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...
- web前端利用HSTS(新的Web安全协议HTTP Strict Transport Security)漏洞的超级Cookie(HSTS Super Cookie)
web前端如果想实现cookie跨站点,跨浏览器,清除浏览器cookie该cookie也不会被删除这似乎有点难,下面的教程让你完全摆脱document.cookie 1.服务器端设置HSTS 如PHP ...
- 移动web前端之meta标签
最近这段时间忙着做web移动端,东西跟pc端还是有区别的.这个月也学到了不少东西,太多了就从头开始,先总结meta标签吧. 主要标签内容和注释如下: <meta charset="UT ...
- WEB前端问题——img标签的onclick事件无法响应问题【转载】
一个纠结了一下午的问题,img标签里面的onclick事件无法响应.最终找到了错误原因,是因为img标签的id与onclick事件的方法名相同. 于是接着又测试了一下,发现name名和方法名相同也会导 ...
- web前端开发从0到1—html结构与常用标签
一:html文档标签结构 <html></html><!--文档片头信息,表示文档内容是用什么标签写的.--> <head></head>& ...
- Web前端——Html常用标签及属性
html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面的两个属性达到跨行或跨列 表格跨行 rowspan ...
- web前端----jQuery操作标签
样式操作 样式类 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass() ...
- WEB学习笔记5-标准的HTML页面结构
完整的文档包含一下 <html> <head> </head> <body> </body> </html> 在HTML5规范中 ...
随机推荐
- Centos7搭建邮件服务器-Postfix+Cyrus-sasl+Courier-authlib+Dovecot+ExtMail+Centos7
1.环境介绍 MTA: Postfix 3.1.4 SASL: Cyrus-sasl 2.1.26 ; Courier-authlib 0.66.1(Cyrus-sasl使用Courier-authl ...
- Oracle数据库over函数的使用
转自: https://blog.csdn.net/a1065423444/article/details/75635611 over()函数写法over(partition by expr2 or ...
- python捕获Ctrl+C信号
我们希望当服务器接收到一个 SIGTERM 信号时能够自动关机,或者做一些善后的操作,以下是实现的方法 import signal # 自定义信号处理函数 def my_handler(signum, ...
- es6入门2--对象解构赋值
解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值.说直白点,等号两边的结构相同,右边的值会赋给左边的变量. 一.数组的解构赋值: 1.基本用法 let [a, b, c] = [ ...
- python学习笔记之自定义函数的导入
python可以将自己编写的类放在py文件中,然后由其他程序调用,今天分享下:如何在shell中从文件引用自定义类和函数,下面是具体的过程: 第一步将你编写的文件声明编码类型 然后将你编写的文件保存为 ...
- SpringBoot系列——aop 面向切面
前言 项目中我们经常会用到aop切面,比如日志记录:这里简单记录一下springboot是如何使用aop spring对aop的配置,来自springboot参考手册,Common applicati ...
- JS实现分钟数和时间小时 格式的转换
1.分钟数转换为 小时:分钟 function ChangeHourMinutestr(str) { if (str !== "0" && str !== &qu ...
- python之strip()小记
描述 Python strip() 方法用于移除字符串头尾指定的字符(默认为空格或换行符)或字符序列. 注意:该方法只能删除开头或是结尾的字符,不能删除中间部分的字符. 语法 strip()方法语法: ...
- 谈下mysql预处理基础
传统的操作数据库方法有两种: 先写一条sql语句,然后通过mysqli->query($sql)去操作数据库(此处使用的是mysqli扩展库).这样操作并不会有什么大的错误,但是当要插入上千条上 ...
- 【Spring】27、JPA 实现乐观锁@Version注解的使用
持久层使用jpa时,默认提供了一个注解@Version来实现乐观锁 简单来说就是用一个version字段来充当乐观锁的作用.先来设计实体类 /** * Created by xujingfeng on ...