• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

HTML第一篇

互联网 diligentman 2小时前 2次浏览

什么是HTML

超文本标记语言:

  1. 写网页的脚本语言

  2. 超文本,只是不仅仅能够显示文字,更能处理照片,视频,音频等数据

  3. 相当于约定标记的XML

    • 约定的跟元素 <html>

    • 约定的元素嵌套关系 <html><head></head></html>

写网页,使用HTML

如何使用HTML

使用文本开发工具书写,第一个HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  Hello World!
</body>
</html>

HTML 基本格式:

  • <!DOCTYPE html> 约定HTML版本,这个是HTML5版本

  • HTML 的根元素必须是 <html>

  • <html> 的子元素有两个

    • <head> 元数据,这些数据不会直接显示到网页上

      • <meta charset="UTF-8"> 拥有设定页面的编码,UTF-8支持中文

    • <body> 网页正文,这个区域中的内容会显示到浏览器上

文本

  • 空白折叠:网页正文中的空格回车等空白会在显示时候折叠为一个 空格

  • 如果希望有更多空白,请使用 不可折叠空白 &nbsp;

  • 可以使用 <br> 输出硬回车

案例:

 Hello                     World!
    HI 第一个测试! <br><!-- 硬回车,换行输出 -->
    Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World!

文本元素

  • 标题 h1 h2 h3 h4 h5 h6 1到6号标题

  • 段落 p 

 <h1>1 HTML</h1>
    <h2>1.1 什么是HTML</h2>
    <p><strong>HTML</strong>就是<em>超文本</em><small>标记</small>语言</p>
    <h2>1.2 什么情况下使用HTML</h2>
    <p>需要写网页时候就使用<strong><em>HTML</em></strong></p>

块元素 行内元素

  • 在屏幕上占有一个方形区域,文字后自动插入回车

    • h1 h2 h3 h4 h5 h6 p 都是块元素

  • 不会单独占有一个行,后面不会自动插入回车

    • i 斜体 em

    • b 加粗 strong

    • small 小一号

属性

在标签上可以有属性

  • 标准属性: id class style 等,以后在CSS JS 课程中使用

  • 自定义属性,用于JavaScript脚本编程

案例:

<h2 align="center">1.2 什么情况下使用HTML</h2>

HTML 表格

标签: table tr td th

tr 表格行

td 表格数据

th 表头

原理:

HTML第一篇

案例:

<table border="1">
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
      </tr>
      <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>2</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>3</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>4</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

表格列合并

在td/th元素上使用 colspan属性可以设置列合并功能:

原理:

HTML第一篇

案例:

 <table border="1">
    <tr>
      <th colspan="2">日期</th> <th>数量</th> <th>价格</th>
    </tr>    
    <tr>
      <td>7</td> <td>1</td> <td>3</td> <td>1.5</td>
    </tr>
    <tr>
      <td>7</td> <td>1</td> <td>3</td> <td>1.5</td>
    </tr>
    <tr>
      <td>7</td> <td>1</td> <td>3</td> <td>1.5</td>
    </tr>
    <tr>
      <td colspan="2">合计</td> <td>9</td> <td>4.5</td>
    </tr>
  </table>

行合并

原理:

HTML第一篇

 案例:
 

<table border="1">
    <tr>
      <th rowspan="2">姓名</th> <th colspan="3">课程</th>
    </tr>
    <tr>
      <td>语文</td> <td>数学</td> <td>科学</td>
    </tr>
    <tr>
      <td>李四</td> <td>100</td> <td>20</td> <td>5</td>
    </tr>
    <tr>
      <td王五</td> <td>100</td> <td>20</td> <td>5</td>
    </tr>
    <tr>
      <td>马六</td> <td>100</td> <td>20</td> <td>5</td>
    </tr>  
  </table>

 

 


程序员灯塔
转载请注明原文链接:HTML第一篇
喜欢 (0)