Loading

Stanford CS142: Web Applications Week1 HTML

HTML是一种标记语言，通过各种指令(dirctive)来规定呈现或描述的内容。

使用方法：

  1. 从要展示的内容(content)开始
  2. 用标签(tag)给内容做注释，HTML使用<>代表标记

例子：

<i>italics word</i>
<title>Title words</title>

HTML标签

HTML标签可以提供以下功能：

  • 文本的含义:

    • <h1>代表顶级标题
    • <p>代表段落
    • <ul><li>代表无序标签(加点的)

  • 格式信息: <i>代表内容文字斜体

  • 展示除了文本之外的其他信息，比如<img>就是展示图片

样例(分割线里的内容):

Introduction

There are several good reasons for taking CS142: Web Applications:

  • You will learn a variety of interesting concepts.
  • It may inspire you to change the way software is developed.
  • It will give you the tools to become fabulously wealthy.

上面这段样例的代码：

<h2>Introduction</h2>
<p>
There are several good reasons for taking
<i>CS142: Web Applications</i>:
</p>
<ul>
<li>
You will learn a variety of interesting concepts.
</li>
<li>
It may inspire you to change the way software is developed.
</li>
<li>
It will give you the tools to become fabulously wealthy.
</li>
</ul>

或

<h2>Introduction</h2>
<p>
 There are several good reasons for taking
 <i>CS142: Web Applications</i>:
</p>
<ul>
 <li>
You will learn a variety of interesting concepts.
 </li>
 <li>
It may inspire you to change the way software is developed.
 </li>
 <li>
It will give you the tools to become fabulously wealthy.
 </li>
</ul>

通过上面两个代码，说明浏览器并不关注html代码是如何书写的，但是我们程序员要关注代码的书写风格！

HTML与XHTML

可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格

浏览器在解析HTML内容时，对于HTML语法的检查不是特别严格，比如尝试在一个html文档中写入一下内容:

<p> 一个小实验

然后看看自己运行结果。

XHTML(XML-based HTML)算是一种具有更严格语法要求(这也是二者的主要区别)的HTML语言。

在project 1, 2, 3中，会是用XHTML语言。

一个XHTML的样例：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>Hello World</title>
 </head>
 <body>
 <p>Hello world!</p>
 </body>
</html>

XHTML的基本语法规则

文档(Document)： 一个HTML文档是html元素的分层集合，从<html>开始。

元素(element)：HTML元素包含开始标签(start tag)，内容(content)，结束标签(end tag)。

每个元素都必须包含开始标签和结束标签，例如<foo></foo>就是一个不包含内容的元素，一对标签也可以简写成<foo />

其中，开始标签可以包含一些属性，例如：

<img src="face.jpg">
<input type="text" value="94301" name="zip">
<div class="header">
HTML中的一些特殊符号(字符实体)

有一些符号在HTML语法中是预留的字符(例如<，>)，这些预留的字符也称作字符实体(entity)为了展示这些符号，在HTML中定义了一些专门的表示方法：

  • &lt;代表<
  • &gt;代表>
  • &amp;代表&
  • &quot;代表"
  • &nbps;代表一个空格

除了这些之外，还有其他字符被定义成实体，有兴趣可以自己查阅。

XHTML的基本语法结构

来看一个例子:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>Hello World</title>
 </head>
 <body>
 <p>Hello world!</p>
 </body>
</html>

这一部分是在声明这是一个XHTML 1.0文档。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

包含HTML文档的最外层的元素

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>包含了如网页标题，CSS样式等各种各样的信息

<body>是HTML文档的主体部分

常用的XHTML标签
  • <p> 内容是一个新段落
  • <br>强制段落中的某一行换行
  • <h1>,<h2>，……内容是各种标题
  • <b>,<i>内容文字的粗体、斜体
  • <pre>包含的内容使用固定的缩紧，常用于展示代码
  • <img>包含的内容是一个图片
  • <a href="...">指向另一个位置的超链接
  • <table><tr><td>，表格(一行(行中的每个元素))
  • <ul>,<li>无序列表，其中有<li>会在前面出现一个点
  • <ol>,<li>无序列表，其中有<li>会在前面出现一个数字标号
  • <div>把一组元素聚合在一起，并且会占据单独一整行
  • <span>把一组元素聚合在一起，不会单独占据一整行
  • <form>, <input>, <textarea>, <select>,…… 用来
  • <title>为页面指定一个标题
  • <link>包括一个CSS样式表
  • <script>给页面添加Javascript脚本(也可以在<body>中添加)

HTML5中的新内容

  • 添加标记允许内容定义
    • <article>,<section>,<header>,<footer>,<summary>,
    • <mark>,<figcaption>,<figure>
    • <nav>,<menuitem>
  • 绘制图片
    • <svg> 可缩放矢量图片
    • <canvas>用JavaScript动态绘制图形
posted @ 2022-06-20 15:36  Frank_Ou  阅读(81)  评论(0)  编辑  收藏  举报