• 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动态绘制图形
  • 相关阅读:
    电商总结(六)系统容量预估
    Nginx 和 IIS 实现动静分离
    聊一聊PV和并发
    RabbitMQ学习系列(四): 几种Exchange 模式
    RabbitMQ学习系列(三): C# 如何使用 RabbitMQ
    RabbitMQ学习系列(二): RabbitMQ安装与配置
    RabbitMQ学习系列(一): 介绍
    推荐:《部落 一呼百应的力量》
    Solr学习总结(八)IK 中文分词的配置和使用
    常用的数据统计Sql 总结
  • 原文地址:https://www.cnblogs.com/FrankOu/p/16393426.html
Copyright © 2020-2023  润新知