设为首页 收藏本站
查看: 1040|回复: 0

[经验分享] html概括

[复制链接]

尚未签到

发表于 2017-6-21 19:44:00 | 显示全部楼层 |阅读模式
  --引入
  什么是html?
  HTML(Hyper Text Markup Language)超文本标记语言。
   -->那么第一个问题----什么是标记语言呢?
    标记语言就是让文本展示更丰富,更美观的一种语言。比如说文本加粗 更换颜色 斜体……
  而html这种标记语言就是为了让网页展示更丰富,更美观的一种语言。
  开发者使用特定的格式,对文本进行不同的加工,这个特定的格式对于html来说就是html标记标签。大概是这个样子:



<html>
<head>
</head>
<body>
</body>
</html>
  html标记标签,一般可以简称为html标签:
    ·每个标签都是由两个尖括号'封装'起来的,标签不区分大小写,但建议使用小写字母
    ·标签分为闭合标签和自闭合标签。闭合标签成对出现,如:<html>  </html> 自闭合标签如:<br/>
    ·成对的标签中的第一个标签被称为开始标签或者开放标签,第二个标签则被称为结束标签或者闭合标签
    ·注释标签格式:  <!--  你看不到我 -->     ‘ 你看不到我 ’ 不会在浏览器上显示。

  html元素
  说到html标签就不得不说跟标签相关的一个概念--html元素。
  html元素可以分为两类,块元素(block)和内联元素(inline)
      块元素是一个元素,占用了全部宽度,在前后都是换行符。<div> <p> <h1>都是块元素

      内联元素只需要必要的宽度,不强制换行  <span> <a>都是内联元素
  html元素指的是成对的闭合标签以及其中的文本内容或者是自闭合标签,也就是:



<p> hello world </p>     
<br/>
  以上两个都是html元素。大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
  开发者使用html元素编写html文档(也就是我们平常所说的网页)。我们访问网页时,一般会用浏览器进行访问,浏览器的作用就是解析html标签,然后显示网页内容。
  html元素属性
    html元素可以设置属性,属性一般用在开始标签中。
    属性一般为键值对格式,如: attr = "value"  (注意必需要有引号)。

    多个属性使用空格分隔。
    分为全局属性和特殊属性,特殊属性时某个或者某些标签所独有的。
  全局属性有:
    class = " "              类名

    id = " "                id名

    style = "key1:value1,key2:value2"    设置css内联样式
    title = " "               设置额外信息

    hidden = " "              该属性为html5的新特性,仅有一个值: hidden   隐藏该元素。

  特殊属性例:

    <table>标签中有  border,用来定义表格的边框

  --html结构
  如果我们要编写html网页,了解其结构以及每个部分的功效都是必须的。
  doctype声明
    一般来说,所有的html网页最开始都会有<!DOCTYPE>声明。他让浏览器知道本网页是由html的哪个版本编写的。
  Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
    HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
  html5中的声明:



<!DOCTYPE html>
  head元素
  <head>元素是所有头部元素的容器,也就是说<head>元素中可以嵌套许多其他头部元素。<head>元素定义了关于html文档的相关信息。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
  最为常见的例子就是,<title>标签一般嵌套在<head>元素中。



<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
  百度首页中的页面源码有这样一句:



<title>百度一下,你就知道</title>
   DSC0000.png
  这就是title元素的作用。
  在<head>元素中还有很多的元素,但其中所涉及的知识暂时并没有讲到,所以后续章节中会介绍到。
  <body>元素
  <body>的属性有很多,较为常见的
      background: 设置背景图片
      bgcolor: 设置背景颜色
    <body>元素跟网页内容相关性极大,一般情况下,网页的内容相关的元素都要嵌套在<body>元素下。
  列举几个<body>中常见的嵌套元素:



<p>段落</p>
<h1>标题格式</h1>


<html>
<body>
<h1>test</h1>
<p>hello world</p>
</body>
</html>
  浏览器显示结果:
DSC0001.png

  不论是<head>元素或者是<body>元素,这两者在网页编写过程中都不是必需的。但一个健壮且丰富的网页是离不开这两个元素的。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-386486-1-1.html 上篇帖子: Java web 学习之旅 下篇帖子: OpenStack 通用设计思路
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表