首页 > 其他分享 >HTML和CSS简介

HTML和CSS简介

时间:2022-08-14 23:58:24浏览次数:41  
标签:网页 简介 元素 HTML 标签 class CSS 属性

问HTML为何物,其实就是标记语言HTML

HTML

"""
HTML(Hypertext Markup Language)超文本标记语言

它负责网页的三个要素之中的结构

HTML使用标签的的形式来标识网页中的不同组成部分

所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面
"""

一个最基本的HTML页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        <h1>网页正文</h1>
    </body>
</html>

标签

"""
HTML中的标记指的就是标签

HTML使用标记标签来描述网页

结构
   <标签名>标签内容</标签名>
   <标签名 />
"""

元素

"""
我们还将一个完整的标签称为元素

这里我们可以将元素和标签认为是一个同义词
    <h1>一级标题</h1>
        上边的h1我们就称为元素
    <p>我是一个<em>段落</em></p>
        p也是一个元素,em是p的子元素,p是em的父元素
    <body>
        <p><em>内容</em>
        </p>
    </body>
        body也是一个元素,body是p和em的祖先元素,和em是body的后代元素
"""

属性

"""
可以为HTML标签设置属性

通过属性为HTML元素提供附加信息

属性需要设置在开始标签或自结束标签中

属性总是以名称/值对的形式出现

比如:name=“value”

有些属性可以是任意值,有些则必须是指定值

<h1 title="我是一个标题">标题</h1>

<img src="" alt="" />
"""

常见属性

"""
id
    – id属性作为标签的唯一标识,在同一个网页中不能出现相同的id属性值
class
    – class属性用来为标签分组,拥有相同class属性的标签我们认为就是一组,可以出现相同的class属性,可以为一个元素指定多个class
title
    – title属性用来指定标签的标题,指定title以后,鼠标移入到元素上方时,会出现提示文字
"""

注释

"""
HTML注释中的内容不会在网页中显示
    
格式:
    <!-- 注释内容 -->

合理的使用注释可以帮助开发人员理解网页的代码

注释不能嵌套
"""
HTML从哪来,又会到哪去 HTML的发展

HTML的发展

"""
1993年6月:HTML第一个版本发布

1995年11月:HTML2.0

1997年1月:HTML3.2(W3C推荐)

1999年12月:HTML4.01(W3C推荐)

2000年底:XHTML1.0(W3C推荐)

2014年10月:HTML5(W3C推荐)
"""

doctype

'''
HTML总共有那么多的版本,而且这其中至少有三个版本在广泛使用,那么浏览器怎么知道我们在使用哪个版本呢?

为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype声明,来告诉浏览器网页的版本

html4
    过渡版
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    严格版
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    框架集
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

xhtml1.0
    过渡版
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    严格版
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    框架集
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

html5
    我们会发现html4.01和xhtml的文档声明十分的麻烦。不过不用担心,以上的内容都不是我们使用的,我们使用的是html5的文档声明,而且非常简单
        <!DOCTYPE html>
'''

怪异模式

"""
为了兼容一些旧的页面,浏览器中设置了两种解析模式
    – 标准模式(Standards Mode)
    – 怪异模式(Quirks Mode)

怪异模式解析网页时会产生一些不可预期的行为,所以我们应该避免怪异模式的出现

避免的最好方式就是在页面中编写正确的doctype
"""

 

标签:网页,简介,元素,HTML,标签,class,CSS,属性
From: https://www.cnblogs.com/xuewei1995/p/16586681.html

相关文章

  • 课程简介
    做什么?#其实不管是前端工程师还是后台工程师我们要做的工作无非就是软件的开发。#软件主要分两种架构C/S和B/S#我们主要从事的是B/S的软件的开发什么是B/S?#B......
  • WebAssembly简介及体验
    webassembly官方简介WebAssembly/wasmWebAssembly或者wasm是一个可移植、体积小、加载快并且兼容Web的全新格式.WebAssembly在web中被设计成无版本、特性可测......
  • Apollo简介
    1、SpringCloudConfig和Apollo的对比 SpringCloudConfigVSApollo.jpg如上图对比SpringCloudConfig优势是对SpringBoot原生支持,且是SpringCloud组件。缺点是......
  • txt改后缀为.html没用怎么办
      之前清内存的时候可能误删了一些文件,导致修改后缀文件不再像之前一样。解决方法:1.文件资源管理器→查看→(文件夹)选项→查看→取消勾选✔隐藏文件类型扩展名2.wi......
  • HTML+CSS笔记
    HTML(超文本标记语言)w3c标准:结构化标准语言(XHTML、XML)表现标准语言:(CSS)行为标准:(DOM、ECMScrit)一、基本标签块级标签:无论多少内容,在网页独占一行,前后换行标题标签:......
  • .Net6 Html.Action无法使用(ViewComponents)
    接触了netcore的小伙伴们已经发现@html.Action()方法官方已经不提供支持了,转而使用 ViewComponents替代了,同时也增加了TagHelper。1.如果想用以前的@Html.Action()......
  • HTML之CSS的选择器
    1标签选择器。2class选择器(前面带.,div里面用class="class名称"来引用)  .cs{background-color:yellow;}   <divclass="cs">你好a</div>3 id选择器(前面带......
  • 八个解决你80%需求的CSS动画库
    八个解决你80%需求的CSS动画库点击打开视频讲解在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试......
  • css
    目录3种样式样式优先级!important语法3种样式link/import(页面标签全部加载完,ie老版本不支持),style,行内样式优先级就近原则!important语法是针对{}里面所有属性,......
  • css画矩形的凹陷及突出效果box-shadow
    外边框颜色渐变 background:linear-gradient(toright,white,#f0f6fe,#e5eff7); border:solid2px#d3def2; margin:10px0; padding:12px16px18px;......