HTML基础

HTML介绍

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。
暂时先介绍一下列表和表格属性吧。

1、列表

1.1 无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于<ul> 标签。每个列表项始于 <li>
看如下例子:

<ul>
  <li>一行</li>
  <li>又一行</li>
  <li>再一行</li>
</ul>


1.2 有序列表
有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
  <li>第一行</li>
  <li>第二行</li>
  <li>第三行</li>
</ol>


1.3嵌套列表
下面是W3School上面的例子

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

接下来做一下作业:

<ul>
  <li>JavaScript
    <ol>
    <li>第一章
      <ul>
      <li>const</li>
      <li>let</li>
      </ul>
    </li>
    <li>第二章
      <ul>
      <li>function</li>
      <li>object</li>
      </ul>
    </li>
    </ol>
  </li>
  <li>Java
    <ol>
    <li>第一章
      <ul>
      <li>class</li>
      <li>package</li>
      </ul>
    </li>
    <li>第二章
      <ul>
      <li>prievat</li>
      <li>public</li>
      </ul>
    </li>
    </ol>
  </li>
</ul>

2、表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
普通表格例子:

<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

显示如下图:


没有边框是不是看着有点子怪怪的。。下面就说一下表格的边框属性。
2.1 边框属性
使用边框属性border来显示一个带有边框的表格:

<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

这样看着是不是好一点:


2.2 表头属性
表格的表头使用 <th> 标签进行定义,大部分浏览器会将表头显示为粗体居中的文本。

<table border="1">
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

显示如下:


2.3 标题
caption 元素定义表格标题。caption 标签必须紧随 table 标签之后.

<table border="1">
<caption> 我是标题</caption>
<tr>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

2.4 单元格合并
colspan是表示横向合并单元格,colspan=“3”表示水平合并三个td
rowspan是表示竖直合并单元格,rowspan=“2” 表示竖直合并两个td
接下来我们试试看:

<h4>横跨两列的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

先掌握这几个基本技能,把作业做一下:

<table border="1">
<caption> 购物车</caption>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
<tr>
<td>苹果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<td colspan="3" align="center">总价</td>
<td>27元</td>
</tr>
</table>

还有一个完整页面:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>统一建模语言理论测试</title>
</head>

<body>
    <h1>统一建模语言理论测试</h1>
    <p>考试科目:统一建模语言</p>
    <p>时间:100分钟</p>
    <p>得分: </p>
    <p>班级(必填):<input /></p>
    <p>学号(必填):<input /></p>
    <p>姓名(必填):<input /></p>

    <h2>一、填空题(每空5分,共20分)</h2>
    <p>1. UML的中文全称是:</p>
    <p><input /></p>
    <p>2. 对象最突出的特征是:</p>
    <p><input /><input /><input /></p>

    <h2>二、选择题(每题10分,共20分)</h2>
    <p>1. UML与软件工程的关系是:</p>
    <p><input type=radio name=answer21>(A)UML就是软件工程</p>
    <p><input type=radio name=answer21>(B)UML参与到软件工程中软件开发过程的几个阶段</p>
    <p><input type=radio name=answer21>(C)UML与软件工程无关</p>
    <p><input type=radio name=answer21>(D)UML是软件工程的一部分</p>
    <p>2. Java语言支持:</p>
    <p><input type=radio name=answer22>(A)单继承</p>
    <p><input type=radio name=answer22>(B)多继承</p>
    <p><input type=radio name=answer22>(C)单继承和多继承都支持</p>
    <p><input type=radio name=answer22>(D)单继承和多继承都不支持</p>

    <h3>三、多项选择题(每题10分,共20分)</h3>
    <p>1. 用例的粒度分位以下哪三种:</p>
    <p><input type=checkbox name=answer31>(A)概述级</p>
    <p><input type=checkbox name=answer31>(B)需求级</p>
    <p><input type=checkbox name=answer31>(C)用户目标级</p>
    <p><input type=checkbox name=answer31>(D)子功能级</p>
    <p>2. 类图由以下哪三部分组成:</p>
    <p><input type=checkbox name=answer32>(A)名称(Name)</p>
    <p><input type=checkbox name=answer32>(B)属性(Attribute)</p>
    <p><input type=checkbox name=answer32>(C)操作(Operation)</p>
    <p><input type=checkbox name=answer32>(D)方法(Function)</p>

    <h3>四、判断题(每题10分,共20分)</h3>
    <p>1. 用例图知识用于和客户交流和沟通的,用于确定请求。
        <input type=radio name=answer41>
        <input type=radio name=answer41>
    </p>
    <p>2. 在状态图中,终止状态在一个状态图中允许有任意多个。
        <input type=radio name=answer42>
        <input type=radio name=answer42>
    </p>

    <h3>五、简答题(每题20分,共20分)</h3>
    <p>1. 简述什么是模型以及模型的表现形式?</p>
    <input />
    <br>
    <button>计算分数</button>

</body>
</html>

显示如下:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,711评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,079评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,194评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,089评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,197评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,306评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,338评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,119评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,541评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,846评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,014评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,694评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,322评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,026评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,257评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,863评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,895评论 2 351

推荐阅读更多精彩内容

  • 原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...
    任凱阅读 1,388评论 0 5
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,083评论 2 21
  • ## HTML基础-列表标签/表格标签 # 列表标签(无序列表/有序列表/定义列表) # 表格标签 # 单元格合并...
    KsKison阅读 640评论 0 0
  • HTML的表格 概述: 表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由...
    枫羽望空阅读 497评论 0 1
  • 想给我爱的你唱歌,将那些说不出口的文字 放进含糊不清的歌词里,在某个阳光明媚的春天,鼓足所有的勇气,唱着 你所有为...
    程北徽阅读 343评论 0 0