HTML5构建页面

DOCTYPE

document type是一种标记语言的文档类型声明，即告诉浏览器当前HTML是用什么版本编写的；

DOCTYPE的模式

  • BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
  • CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

大部分的DOCTYPE声明将触发严格模式，即依据标准的CSS规则渲染网页；如果没有DOCTYPE声明意味着触发怪异模式，既依据旧式的CSS规则渲染网页；

<html>

Hyper Text Mark-up Language(超文本标记语言)。HTML不是编程语言，而是一种标记语言 (markup language)，也是一种规范，一种标准；是网页制作所必备的。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分(Head)、和“主体”部分(Body)，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

<html>

<head>
  这里是文档的头部 ... ...
  ...
</head>

<body>
  这里是文档的主体 ... ...
  ...
</body>

</html>

<head>

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

1、<meta>

metadata information提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词.

charset属性是设置编码格式的

<meta charset="UTF-8">  <!--设置编码为UTF8-->

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

  • Keywords(关键字)，keywords用来告诉搜索引擎你网页的关键字是什么。
  • description(网站内容描述) ，description用来告诉搜索引擎你的网站主要内容。
  • robots(机器人向导) ，robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 
  • author(作者) ，标注网页的作者 
<meta name="keywords" content="html5，前端，超文本">
<meta name="description" content="分享HTML5基础知识，对页面标签进行详解。">
<meta name="robots" content="none">
<meta name="author" content="admin">

http-equiv属性提供了 content 属性的信息/值的 HTTP 头。

<meta http-equiv="refresh" content="2">  <!--2秒后刷新页面-->

<meta http-equiv="refresh" content="2;https://www.baidu.com">  <!--2秒后跳转至指定url-->

2、<title>

定义文档的标题它，可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容

<title>HTML5基础</title>

3、<link>

 link标签定义文档与外部资源的关系，最常见的用途是链接样式表。

href属性，指定被链接文档的位置，指定外部资源的URL。

rel属性，指定当前文档与被链接资源之间的关系。

  • icon -- 定义一个外部的标题图标
  • stylesheet -- 定义外部的样式表
  • next -- 记录文档的下一页.(浏览器可以提前加载此页)
  • prev -- 记录文档的上一页.(定义浏览器的后退键)
  • ……
<link rel="icon" href="./html5.ico">
<link rel="stylesheet" href="./main.css">

4、<style>

 <style> 标签用于为 HTML 文档定义样式信息。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。

<style>
    h3{
        background-color: #B0FFB0;
        font-size: 18px;
    }
</style>

5、<script>

<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。

<script src="./main.js"></script>

<script>
    document.write("hello world!")
</script>

<body>

body元素定义文档的主体。包含文档的所有内容（比如文本、超链接、图像、表格和列表等）

body里面分为两类标签：块级标签和内联标签。

块级标签元素的特点

  1. 总是在新行上开始；
  2. 高度，行高以及外边距和内边距都可控制；
  3. 宽度缺省是它的容器的100%，除非设定一个宽度；
  4. 它可以容纳内联元素和其他块元素

内联标签元素的特点

  1. 和其他元素都在一行上；
  2. 高，行高及外边距和内边距不可改变；
  3. 宽度就是它的文字或图片的宽度，不可改变；
  4. 内联元素只能容纳文本或者其他内联元素。

1、<div>标签

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

2、文本标签

针对文本内容的一些操作，标题、段落、字体等。

  • <h1>~<h6>：定义不同的HTML标题；<h1> 定义最大的标题。<h6> 定义最小的标题；
  • <p>：段落标签，内容被换行，并且也上下内容之间有一行空白；
  • <span>：用来组合文档中的行内元素，以便通过样式来格式化它们；
  • <br>：换行；
  • <hr>：分割线；
  • <b>,<strong>：定义粗体文本；
  • <em>：定义斜体文本；
  • <u>：下划线
  • <strike> ：为文字加一条中线；
  • <sup>,<sub>：上角标和下角表。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5基础</title>
</head>
<body>
    <h1>这是标题h1</h1>
    <h2>这是标题h2</h2>
    <h3>这是标题h3</h3>
    <h4>这是标题h4</h4>
    <h5>这是标题h5</h5>
    <h6>这是标题h6</h6>
    <p>这是段落p</p>
    <p>这是段落p</p>
    <span>这是span</span>
    <span>这是span</span>
    <hr>
    <br>
    <b>粗体</b>
    <em>斜体</em>
    <u>下划线</u>
    <strike>中间线</strike>
    <p>这是<sup>上标</sup>。</p>
    <p>这是<sub>下标</sub>。</p>
</body>
</html>

3、图形标签<img>

img 元素向网页中嵌入一幅图像。从原理上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img>属性：

src：指定要显示图片的路径；

alt：图片加载失败时显示的内容；

title：鼠标悬浮时显示的内容；

width: 图像的宽度

height:图像的高度 (宽高两个属性只用一个会自动等比缩放.)

<img src="HTML5.jpg" alt="加载失败" title="HTML5标志" width="100px">

4、超链接标签<a>

标签定义超链接，用于从一张页面链接到另一张页面。

<a>属性：

href：设置链接指向的页面的 URL；

target：规定在何处打开链接文档；

download：指定被下载的超链接目标。可以实现图片点击时下载；

<a href="https://www.baidu.com" target="_blank">这是超链接</a>

实现锚定的功能

<a href="#second">转到第二章</a>
<h4 id="second">第二章</h4>

5、列表标签

<ul>：无序列表unorder list；
<ol>：有序列表order list；
<li>：列表中的成员。

<dl>：定义列表defined list；
<dt>：列表标题；
<dd>：列表成员。

<ul>
    <li>无序列表成员1</li>
    <li>无序列表成员2</li>
</ul>
<ol>
    <li>有序列表成员1</li>
    <li>有序列表成员2</li>
</ol>
<dl>
    <dt>北京</dt>
    <dd>朝阳</dd>
    <dd>西城</dd>
</dl>

6、表格标签<table>

定义 HTML 表格；

sytle属性

border-collapse：属性设置表格的边框是否被合并为一个单一的边框；

separate：默认值。边框会被分开；

collapse：边框会合并为一个单一的边框；

inherit：从父元素继承 border-collapse 属性的值。

<table>属性：

border：设置表格边框，指定宽度；

cellpadding：cell边框与内容的距离；

cellspacing：表边框与cell边框的距离；

rowspan：单元格竖跨多少行，上下合并；

colspan：单元格横跨多少列，左右合并；

元素：

<tr>: table row；

　　<th>: table head cell；

　　<td>: table data cell；

<table border="5px" cellpadding="5px" cellspacing="10px" style="text-align: center">
    <tr>
        <th colspan="3">LPL加油！</th>
    </tr>
    <tr>
        <td>战队</td>
        <td>国家</td>
        <td>分数</td>
    </tr>
    <tr>
        <td>EDG</td>
        <td rowspan="2">中国</td>
        <td>4-0</td>
    </tr>
    <tr>
        <td>RNG</td>
        <td>3-1</td>
    </tr>
</table>

7、表单标签<form>

<form>属性：

action：设置当提交表单时向何处发送表单数据；

method：表单的提交方式GET/POST，默认取值是GET；

enctype：在发送表单数据之前如何对其进行编码；

name：设置表单的名称；

target：设置在何处打开 action URL。

<input>元素：

name：定义input元素的名称，向后端提交数据时，name值就为数据字典中的键；

value：定义input元素的值，向后端提交数据时，value值就为数据字典中的键；

size：定义输入字段的宽度；

type属性：

text：单行文本输入框。默认宽度为 20 个字符；

password：密码输入框；

checkbox：复选框；

radio：单选按钮；

file：定义输入字段和 "浏览"按钮，供文件上传；

reset：重置按钮，会清除表单中的所有数据；

submit：提交按钮会把表单数据发送到服务器；

button：定义可点击按钮（多数情况下与JS结合使用）。

<label>元素

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性；如果您在 label 元素内点击文本，就会触发此控件。你点击“用户”字体，则会进入后面的text框中。

<select>元素

　　创建单级或多级菜单。

<form action="http://127.0.0.1:8080" method="get">
    <p>
        <label for="username">用&emsp;户：</label>
        <input type="text" name="username" id="username">
    </p>
    <p>
        <label for="password">密&emsp;码：</label>
        <input type="password" name="password" id="password">
    </p>
    <p>
        <span>权&emsp;限：</span>
        <label for="upload">上传</label><input type="checkbox" name="one" id="upload">
        <label for="download">下载</label><input type="checkbox" name="two" id="download">
    </p>
    <p>
        <span>家目录：</span>
        <label for="home_root">/root</label><input type="radio" name="homedir" id="home_root">
        <label for="home_app">/app</label><input type="radio" name="homedir" id="home_app">
    </p>
    <label for="area">地区</label>
    <select name="area" id="area">
        <optgroup label="华东">
            <option value=37>山东</option>
            <option value=33>浙江</option>
        </optgroup>
        <optgroup label="华北">
            <option value="11">北京</option>
            <option value="13">河北</option>
        </optgroup>
    </select>

    <p>
        <label for="filename"><input type="file" name="filename" id="filename"></label>
    </p>
    <p><input type="reset"></p>
    <p><input type="submit"></p>
</form>

posted @ 2019-09-11 18:19  houyongchong  阅读(501)  评论(0)  编辑  收藏  举报