zoukankan      html  css  js  c++  java
  • 如鹏网学习笔记(七)HTML基础

    HTML笔记

    一、HTML简介

      1,HTML (Hyper Text Mark-up Language) 超文本标记语言,是一种编程语言,也可以说是一种标准、规范。

      2,HTML提供了一系列标记(标签),每个标记都有不同的含义和作用,浏览器根据标记的含义把内容显示到浏览器页面上

      3,超文本:页面不仅可以包含普通文本,还可以包含图片、链接、音乐、程序等非文本内容

      4,学习HTML主要是学习常用标签的用法和语法规范

    二、基本标签

      <!DOCTYPE> 定义文档类型,表明该文档的类型和版本(了解)
      <html> 定义 HTML 文档(页面)
      <title> 定义文档的标题
      <meta>定义文档的元数据,影响浏览器对页面的解析处理
      <body> 定义文档的主体
      <h1> ~ <h6> 定义 标题文本
      <p> 定义段落文本
      <br> 定义换行
      <hr> 定义水平线
      <!--...--> 定义注释

    三、列表标签

      1,无序列表

        <ul> 在页面上显示一个无序列表(type属性决定图标样式)
        <li> 表示一个列表项

      2,有序列表

        <ol>:在页面上显示一个有序列表(type属性:1 a A i I)
        <li>:表示一个列表项

      3,自定义列表
        dl:在页面上显示一个自定义列表

        dt:定义父节点列表项

        dd:定义子节点列表项

        注意:dt和dl不是嵌套关系,而是并列关系

    四、语法规范

      1,标签成对出现,有开始标签就需要有结束标签

      2,标签不区分大小写,但建议使用小写

      3,一对标签的内容可以为空、文本、或者其他标签(标签可以嵌套)

      4,如果一对标签的内部总是为空,可以简写为单标记形式,如<br/>

      5,两对标签不可以交叉

      6,标签可以包含若干属性,属性之间使用空格隔开,属性之间没有顺序

      7,一些标签需要配合使用,共同完成一件复杂的事情

      8,浏览器把若干连续的空白字符(空格符、换行符、制表符)处理成一个空格的效果

      注意:最开始为了尽快推广HTML,浏览器对HTML文档的语法要求并不严格,这导致那些不规范的HTML代码也会被浏览器正常解析

    五、文本显示效果标签

      在最开始的时候,HTML使用标签控制文本的显示效果,随着技术的发展,开始使用CSS语言控制页面的效果,
      这些文本显示效果标签不再建议使用

      <small>小号文本
      <big>大号文本
      <b>粗体文本
      <i>斜体文本
      <u>加下划线文本
      <s>加删除线文本
      <strike>加删除线文本
      <center>居中文本
      <em>强调文本
      <strong>语气更为强烈的强调文本
      <sup>上标文本
      <sub>下表文本
      <font>文本的字体、尺寸和颜色


    六、HTML实体字符

      在HTML中,有一些特殊字符,如 > < " & 具有特殊含义,在使用时容易造成冲突,另外 © ® × ÷ 等字符在键盘上没有对应的按键

      为了方便开发者灵活使用这些字符,HTML提供了对应的实体字符供开发者使用

      空格: &nbsp;
      小于号 &lt;
      大于号 &gt;
      和号 &amp;
      双引号 &quot;
      注册商标 &reg;
      乘号 &times;
      除号 &divide;

    七、表格标签

      <table> 定义一个表格整体
      <caption> 定义表格标题
      <tr> 定义表格中的行
      <td> 定义行中的单元格(colspan、rowspan 属性可以合并单元格)
      <thead> 表头
      <th> 定义表格中的表头单元格
      <tbody> 表格主体,可用于大表格分段显示优化
      <tfoot> 表格的脚注

      表格单像素边框效果 <table border="1" cellspacing="0px" style="border-collapse: collapse">


    八、超链接标签<a>
      1,链接到外部资源:
        <a href="http://www.rupeng.com/index.shtml">如鹏网</a>
        <a href="人丑就要多读书.jpg">人丑就要多读书.jpg</a>
        <a href="人丑就要多读书.zip">人丑就要多读书.zip</a>

        超链接只是指定资源的位置,浏览器在获得这些资源后处理时,默认的,如果浏览器可以解析显示,浏览器就会直接解析显示,
        否则,就以文件下载的方式处理(当然,也可以指定强制下载)

        target属性:指定打开资源的位置(_self、_blank)

      2,连接到页面内的另一个<a>标签

        <a name = "mao">定义一个位置(锚)</a>
        <a href="#mao">指定这个位置</a>


    九、图片标签<img>

      1,用来在页面上显示一个图片
        <img src="人丑就要多读书.jpg" alt="图片未找到"/>
        src 属性:指定图片资源位置
        alt 属性:当找不到src指定的图片资源时,显示在浏览器上的说明提示
        width、height属性 :指定图片显示的宽、高
        border:指定图片边框的宽度

        注意:src的值尽量写资源的相对路径,因为很多浏览器这里不支持绝对路径

    十、表单标签

        <form> 用来定义供用户输入信息的表单,收集用户信息
        <input> 可以定义多种输入控件,
        有:text、password、radio、checkbox、file、hidden、button、submit、reset
        <label> 定义 表单控件的标注
        <textarea> 定义多行的文本输入控件
        <select> 定义下拉列表 、<option> 定义下拉列表的选项
        <button> 定义普通按钮
        (在输入框中按回车键和点击submit按钮效果相同)


    十一、框架标签

      1,<frameset>,<frame>定义框架集(已过时)

      <html>
        <head></head>
          <frameset rows="100px,*">
            <frame src="head.html"/>
            <frameset cols="20%,*">
              <frame src="left.html"/>
              <frame src="main.html"/>
            </frameset>
          </frameset>
      </html>

    2,<iframe>定义内嵌框架
      <iframe src="inner.html" width="600px" height="370px"></iframe>


    十二、页面布局标签<div>、<span>

      <div>(division)和<span>都可以把页面分成相对独立的各个部分(分区),方便布局
      不同之处在于div默认有换行效果,而span则没有

      div+css 布局方式是现在的主流,具体将在css课程中讲解
      现在有种共识,网页内容要和表现形式分离,也就是说html标签主要负责定义网页的内容,
      如一段文本,css负责定义这些内容的显示样式,如文本的颜色



  • 相关阅读:
    VS学习笔记2
    VS学习笔记
    分享几个有趣的小程序
    关于类型的转换(抄来的 ,留着,感觉有用。)
    现在觉得IT还挺有意思
    DataGrid 查出一个列 按要求显示格式 例如:操作人(地点)
    WPF DataGrid 列显示0,-1(作废、删除)状态,1,2(支出、收入)类型,操作人(在其他表中),如何转换格式。
    WPF DataGrid中鼠标双击某一列,弹出窗体作为(增加、修改、详细)按钮的快捷键。
    “指定的参数已超出有效值的范围”在【 parameterUpdate.Add(new OracleParameter("STATUS", 0));】报错
    WPF StoreDataSetPaginator
  • 原文地址:https://www.cnblogs.com/DotNetStu/p/7397856.html
Copyright © 2011-2022 走看看