Web前端知识01（HTML介绍、HTML常用标签介绍、HTML框架集介绍）

Part01:HTML介绍

1、HTML概述：

• 超级文本标记语言，用来编写网页；
• 网页的内容包含：HTML代码、CSS代码、JavaScript代码等内容。
  • HTML代码：用于展示需要显示的数据；
  • CSS代码：使显示的数据更加好看；
  • JavaScript：使整个页面显示的数据具有动画效果；
• 网页根据内容是否改变分为：静态页面、动态页面。
  • 静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页。
  • 动态页面：会根据不同的情况展示不同的内容。

2、HTML语言特点：

• HTML写成的代码不需要编译，直接使用浏览器打开就行。
• HTML文件的扩展名是*.html (常用) 或*.htm。
• HTML结构都是由标签组成。
  • 标签名是预先定义好的，我们需要了解其功能；
  • 标签名不区分大小写；
  • 通常情况下标签由开始标签和结束标签组成；如
  • 如果没有结束标签，建议以/结尾，称为自闭和标签；如

3、HTML编写规范：

• //根标签 * //头标签，保存网页中最重要的的信息，一般打开网页不可见 * //头标签中有多个子标签： * //保存网页编码，关键字等信息 *
• 开始标签中可以写属性
  • 书写格式：属性名=“属性值”
• 注释格式：
  • <!-- 注释 -->

Part02:HTML常用标签介绍

1、文字标签

• 标题标签：
  • <h1>——<h6>：不同大小的标题，h1最大，依次变小；
  • 特点：自动换行，并且行与行之间有一定的空白
• 水平线标签：
  • <hr/>：一条水平线
  • 属性：
    • size：水平线的粗细，单位px;
    • noshade：没有阴影，纯色；noshade=“noshed”;
• 字体标签：
  • <font>：可以设置字体，大小，颜色等
  • 属性：
    • size：文字的大小，值只有1-7，7最大；
    • face：设置字体（如宋体、楷体、黑体等）
    • color：文字的颜色，值有两种形式：
      • a.颜色的英文单词；
      • b.#RGB（如：#FF0022）
• 格式化标签：
  • <b>：加粗
  • <i>：倾斜
• 段落标签：
  • <p>：为文字分段落
  • 特点：上下有一定的空白空间
• 换行标签：
  • <br/>：换行

2、图片标签：

• <img>:插入图片
• 属性：
  • src：值为图片路径
  • width：宽度，值可以写数值（单位px），也可以写百分比（与原图相比）
  • height：高度，值可以写数值（单位px），也可以写百分比（与原图相比）

3、列表标签

• <ul>：无序列表，每一个列表项都是一个图案
• <ol>：有序列表，每一个列表项都有一个序号
• 列表中必须有列表项<li>
• 共同属性：

  • type：设置有序列表的序号和无序列表的图案

  • ol中type的取值：1（默认）、a、A、i（小写罗马数值）、I（大写罗马数值）

  • ul中type的取值：circle(空心原点）、disc(实心原点，默认)、square(小方点)
    代码：

     <ol>
      	        <li>哈哈</li>
      	        <li>呵呵</li>
      	        <li>嘿嘿</li>
      	    </ol>
      	    <ul>
      	        <li>吃饭</li>
      	        <li>睡觉</li>
      	        <li>打豆豆</li>
      	    </ul>
    

效果图：

4、超链接标签：

• <a>：可以被点击，点击之后可以跳转到别的页面
• 属性：
  • href：值为跳转的网页地址，也可以为本地的*.html文件，值#表示跳转到本页面（该属性不写超链接无效）
  • target：指的是跳转后的目标位置
    • 值“_self”表示在本网页打开超链接网页
    • 值“_blank”表示在一个空白的新网页打开超链接网页
    • 值framename表示在指定的框架里打开，framename为框架名

5、表格标签：

• <table>
• 子标签：行
  • 表头：内容默认加粗并且居中
  • 每一行有一个个单元格组成
• 标签的属性： * border：表格边框大小，默认不显示边框 * width：宽度，单位px * height：高度，单位px * align：表示整个表格在网页中显示的位置 * 值：left（默认）、center 、right * bgcolor：表格背景颜色
• 行标签的属性：
  • align：表示该行中所有单元格中的内容在表格中的位置
• 单元格标签的属性：

  • align：表示该单元格中的内容在表格中的位置

  • rowspan：跨行合并，具体的值表示所跨的行数

  • colspan：跨列合并，具体的值表示所跨的列数
    代码：

      <table border="1" width="300" height="100">
          <tr bgcolor="#c0c0c0" align="center">
              <td colspan="3">a</td>
          </tr>
          <tr align="center">
              <td>4</td>
              <td>5</td>
              <td>6</td>
          </tr>
          <tr align="center">
              <td>7</td>
              <td>8</td>
              <td>9</td>
          </tr>
      </table>
    

效果图：

Part03:HTML框架集介绍

1、<frameset>标签：框架集，把页面分割为几个部分
注意⚠️:标签不能和标签同在,使用标签时要把标签删除；

• 属性：

  • Rows：把页面以行的形式分割，值为百分百形式，*表示剩余部分；
  • cols：把页面以列的形式分割，值为百分百形式，*表示剩余部分；

• 子标签<frame>

    //主页面代码
    <!—页面分为三行，第一行占10%，第二行占80%，第三行占10%-->
    <frameset rows="10%,*,10%">
        <frame src="top.html"/>
        <!--第二行中又分为两列-->
        <frameset cols="20%,*">
            <frame src="left.html"/>
            <frame name="right"/>
        </frameset>
        <frame src="bottom.html"/>
    </frameset>
    
    //第二行第一列的代码
    <ul>
        //超链接在框架名为right的地方显示
        <li><a href="mg.html" target="right">么古</a></li>
        <li><a href="yjy.html" target="right">右脚丫</a></li>
    </ul>
  

效果图：