zoukankan      html  css  js  c++  java
  • HTML汇总以及CSS的一些开端

    一、HTML初探

      1、HTML(HyperText Markup Language):超文本标记语言指的就是超跃了txt文件,能够在里面进行一些例如:就是指页面内可以包含图片、链接 、甚至音乐、程序等非文字元素。

      (1)、网页为什么会诞生,HTML为什么会火?

          1、由于PC端的发展,人们想要展示更多的元素给世界的人看,因此网页开始慢慢的诞生了。

          2、C/S模式的诞生人们开始对此模式产生了质疑,因为有些机器受硬件的影响,就不能享受到知识共享的服务了。

          3、因此B/ S模式开始慢慢诞生和普及(对网页的需求越来越大)。

    二、五大浏览器相关

      可作为为简单的了解(https://blog.csdn.net/ai396496157/article/details/41981161)。

    三、Web标准及W3C相关的认识

      1、HTML是网页的结构。

      2、CSS是网页的表现形式。

      3、JS是网页的行为。

      4、W3C是一个WEB标准制定的一个非盈利性的国际组织。

    四、开始正式进入HTML

      (1)、形式必须是在<>(这个尖括号包裹中的)才称之为HTML标签。

      

    <标签名> 内容 </标签名>

      (2)、标签的分类

        1、双标签(如:html、body)

    <html>
        <head> </head>
    </html>
    <!---即有开始又有结束的标签->

        

        2、单标签(如:br、hr)

    <br >
    <hr >
    <img >
    <!--标签只有开始没有结束,后面的是属于XHTML的格式在H5中已经抛弃可以省略不写-->

      (3)HTML标签关系

        1、嵌套关系或者父子关系

    <head> 
        <title> </title> 
    </head>
    View Code

        2、并列关系或者兄弟关系

    1 <head></head>
    2 <body></body>

      (4)、文档类型<!DOCTYPE>

        1、打开编辑软件sublime,经常能看到一个:如下

    <!doctype html>

        问:它究竟是什么咧?

        答:这句话就是告诉我们使用哪个html版本? 我们使用的是 html 5 的版本。 html有很多版本,那我们应该告诉用户和浏览器我们使用的版本号。

        2、有时候我们不能看到如下:

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

        这是HTML中的strict版本。

        3、

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

        这是HTML般本的transitional解析代码等等的。

      (5)页面的lang

        1、<html lang="en"> 指定语言种类

          1、最常见的2个:

            en定义语言为英语,zh-CN定义语言为中文。

    考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值

      (6)HTML标签的语义化

        白话: 所谓标签语义化,就是指标签的含义。

         1 、为什么要有语义化标签

            1、方便代码的阅读和维护

            2、同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容

            3、使用语义化标签会具有更好的实现搜索引擎优化

    核心: 合适的地方给一个最为合理的标签。

    语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。( 裸奔起来一样好看 )

    白话,一眼看去,就知道那个是重点,结构是什么,知道每块的内容是干啥的。

    遵循的原则:先确定语义的HTML ,再选合适的CSS。所以,我们接下来学习html标签,要根据语义去记忆。 HTML网页中任何元素的实现都要依靠HTML标签

        (7)、HTML中的排版标签   

    <h1>一级标题</h1>
        <h2>二级标题
                <p>我是一个段落</p>
            </h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
        

          注意:请不要利用标题标签来改变同一行中的字体大小 在一个HTML文件中 一级标题 只能出现一次 因为h1标签非常重要!h1标签的权重最高!搜索引擎在搜索的时候 它最先搜索的就是h1标签里面的内容。

        

         (8)、文本修饰标签(了解)

            在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

    标签名功能描述
    <b></b> 将文本设置加粗显示 bold
    <strong></strong> 将文本设置加粗显示  
    <i></i> 将文本设置为斜体效果 italic
    <em></em> 将文本设置为斜体效果  
    <u></u> 给文本增加下划线 underline
    <ins></ins> 给文本增加下划线 insert
    <s></s> 给文本增加删除线 strikethrough
    <del></del> 给文本增加删除线  
    <sup></sup> 上标  
    <sub></sub> 下标

     

          (9)链接标签(重点)

    单词缩写: anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的

    在HTML中创建超链接非常简单,只需用标签把文字或者图片包括起来就好,其基本语法格式如下:

    <a href="跳转目标" target="目标窗口的弹出方式">文本或图片</a>

    href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

    target:用于指定链接页面的打开方式,其取值有self和blank两种,其中_self为默认值,__blank为在新窗口中打开方式。

    注意:

    1. 外部链接 需要添加 http:// www.baidu.com

    2. 内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

    3. 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

    4. href设置为javascript:void(0)

      第一种空链接:<a  href="#">空链接</a>
      第二种空链接:<a href="javascript:void(0)">空链接</a>

      空链接主要是用于配合javascript来使用

    5. 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

      <a href="https://view.inews.qq.com/topic/275789"><img src="mx.jpg"></a>

       (10)、锚点定位 (难点)

    通过创建锚点链接,用户能够快速定位到目标内容。创建锚点链接分为两步:

    1.使用相应的id名标注跳转目标的位置。 找到锚点链接  id属性每一个标签都有  
    <h3 id="two">第2集</h3>

    2.使用“<a href=”#id属性值>“链接文本"</a>创建链接文本(被点击的)
    <a href="#two">找到锚点</a>  

    base 标签

    语法:

    <base target="_blank" /> 


    结束:此处因为篇幅太长省略(路径、字符实体的内容)

    IT这条路,当你懂得越多的时候,那么你不懂的也就会越多了.
  • 相关阅读:
    SQLServer 2008数据库查看死锁、堵塞的SQL语句
    Jmeter(三)简单的HTTP请求(非录制)
    watir中不能打开页面中的URL超链接解决办法
    我要搬博客到这里来,请协助
    Jmeter(一)精简测试脚本
    性能测试机中存在大量的TIME_WAIT状态的连接,影响并发压力的发起
    ruby+watir随机而不重复获取Menu菜单的元素
    Eclipse中安装Ruby的插件org.rubypeople.rdt
    TCP连接各状态数量、以及TCP各状态变迁流程
    ruby+watirwatir3.0上实现快照/截图
  • 原文地址:https://www.cnblogs.com/learningPHP-students2018/p/9328205.html
Copyright © 2011-2022 走看看