HTML 基础概念 - soarli博客

HTTP 基础知识

HTTP 概述

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。1960 年美国人 Ted Nelson 构思了一种通过计算机处理文本信息的方法，并称之为超文本（Hypertext）,这成为了 HTTP 超文本传输协议标准架构的发展根基。Ted Nelson 组织协调万维网协会（World Wide Web Consortium）和互联网工程工作小组（Internet Engineering Task Force ）共同合作研究，最终发布了一系列的 RFC，其中著名的 RFC 2616 定义了 HTTP 1.1。

注：定义来自于搜狗百科。

请求方法
HTTP/1.1 定义的请求方法有 8 种：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。最常的两种是 GET 和 POST，如果是 RESTful 接口的话一般会用到 GET、POST、DELETE、PUT。

常见状态码

200 ：成功。
400 ：客户端请求有语法错误，服务器端不能理解。
401 ：该请求可能未经过授权。
403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。
404 ：该资源没找到。
500 ：服务器端发生了一个不可预知的错误。
503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常。

网站概述

网站(Website)是指在因特网上根据一定的规则，使用 HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。

注：定义来自百度百科。

网站的组成
在早期，域名、空间服务器与程序是网站的基本组成部分，随着科技的不断进步，网站的组成也日趋复杂，目前多数网站由域名、空间服务器、DNS 域名解析、网站程序、数据库等组成。

浏览器访问过程

当我们在浏览器中输入一个网址，比如www.shiyanlou.com，浏览器就会加载出实验楼的主页。那么从我们输入网址到打开网页，浏览器的访问过程具体是什么呢？

首先浏览器请求 DNS 服务器，通过 DNS 获取相应的域名对应的 IP。
通过 IP 与目的主机建立 TCP 连接。
发送和接受数据（获取网页内容）。
断开 TCP 连接。

网站的文件处理

文件上传到服务器，一般可以存放于本地文件系统、数据库和远程 FTP 等。

浏览器如何处理文件，文件的上传与下载到底是怎么回事？前端的各种处理方式：

传统 flash 上传
新增 iframe 框 ajax 上传
表单数据提交
HTML5 的新工具——File API
此处讲一下 iframe 框 Ajax 上传和表单数据提交：
iframe 框上传：通过新建一个隐藏的 iframe 框，把数据放到这个 iframe 框架里，然后把它提交到服务器端处理，服务器返回的信息也是由 iframe 框调用父框架的方法处理。
表单数据提交：重点有两个，一个是 FormData 的数据对象，一个是 level2 的 XMLHttpRequest 对象。
表单数据：

var form= new FormData();
form.append(field,file,filename);
//field是表单里的key，就类似于一般表单里的name，file文件对象，filename是传送至服务器里的文件名，一般缺省

注：当 FormData 里含有文件时，就要将 enctype 指定为 multipart/form-data 而不是 application/x-www-form-urlencoded。

<form enctype="multipart/form-data"></form>

XMLHttpRequest对象
创建xhr对象:

if (typeof XMLHttpRequest !== 'undefined') {
//code for all browsers
    xhr = new XMLHttpRequest();
} else {
//code for IE5 and IE6
    var v = [
        "Microsoft.XmlHttp",
        "MSXML2.XmlHttp.2.0",
        "MSXML2.XmlHttp.1.0"
    ];
    for (var i=0; i < v.length; i++){
        try {
            xhr = new ActiveXObject(v[i]);
            break;
        } catch (e){}
    }
}
return xhr;

注：该程序段包含return语句，需要放在函数体里调用。

xhr 发起请求:

xhr.open(method,url,async);//method:请求的类型，GET或POST；url:文件在服务器上的位置；async：bool类型，true为异步，false为同步
xhr.overridemimeType('..');//设定content-type，例如你想上传一个.txt文件，此处设置为text/plain
xhr.send(form);//只有当请求类型method为POST时，才需要form参数，其他情况使用xhr.send()即可

xhr 处理事件:

xhr.onreadystatechange=function(evt){
    if(this.readystate!==4) return;
    if(this.status==200){success..}//执行此判断时 readystate = 4。当(readystate == 4 && status == 200) = true,执行success内容。
    else fail;
};

注： xhr 对象有 0,1,2,3,4 五个状态,五个状态顺序变化，onreadystatechange 事件在状态变化时被触发。当状态为 4 的时候，回话结束，无论错误还是获得响应。 (readystate == 4 && status == 200) = true 说明从服务器成功获得响应,可以对服务端返回的数据进行处理。

前端入门学习路径

pic001

HTML简介

知识点

HTML 标签
HTML 文件结构
HTML 元素
HTML 属性
HTML 样式
HTML 链接
HTML 排错
HTML 列表
HTML 元数据
HTML 块
HTML 布局
文本格式
文档和网站架构

HTML 定义

HTML(Hyper Text Markup Language)中文译为“超文本标记语言”，主要是通过 html 标记对网页中的文本，图片，声音等内容进行描述。超文本标记语言的结构包括“头”部分（英语：Head ）、和“主体”部分（英语：Body ），其中“头”部分提供关于网页的信息，“主体”部分提供网页的具体内容。

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

HTML 标签

超文本标记语言（英语简称：HTML ）标记标签通常被称为 HTML 标签，HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，

例如“主体”<body>跟<BODY>表示的意思是一样的，推荐使用小写。

双标签（双标记）

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名></标记名>

常见的双标签有：

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<h2></h2>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>
<ol></ol>
<dt></dt>
<dd></dd>
<mark></mark>
<iframe></iframe>

例子：

<a href="https://www.shiyanlou.com">实验楼</a>

单标签（单标记）

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

<标记名/>

常见的单标签有：


<br/>     <!--换行-->
<hr />    <!--水平分隔线-->
<meta />
<img />

标签的关系

嵌套关系

<head>  
    <title>  
    </title>  
</head>

并列关系

<head></head>
<body></body>

HTML 文件结构

一个 HTML 文件是有其固定的结构的：

<html>
    <head>...</head>
    <body>...</body>
</html>

<html>称为根标记，用于告知浏览器其自身是一个 HTML 文档， <html>标记标志着 HTML 文档的开始，</html>标记标志着 HTML 文档的结束，在他们之间的是文档的头部和主体内容。
<head>标记用于定义 HTML 文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记。一个 HTML 文档只能含有一对 <head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
<title>标记用于定义 HTML 页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个 HTML 文档只能含有一对 <title> </title>标记，<title> </title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：

<title>网页名称</title>

<body>标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于 <body>标记内， <body>标记中的信息才是最终展示给用户看的。一个 HTML 文档只能含有一对 <body>标记，且 <body>标记必须在 <html>标记内，位于 <head>头部标记之后。

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

例子：

<p>I Love You</p>

注：这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签<p>，以及一个结束标签 </p>。元素内容是：I Love You。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。

例子：

<a href="https://www.shiyanlou.com">实验楼</a>

注：HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定。

HTML 样式

通过设置 style 属性来更改 HTML 的样式。

HTML 样式实例 - 背景颜色

<html>

<body>
<p style="background-color:red">实验楼</p>
</body>

</html>

注：通过"background-color"属性值的设置来给背景设置颜色。

HTML 样式实例 - 字体、颜色和尺寸

<html>

<body>
<p style="font-family:arial;color:green;font-size:50px;">实验楼</p>
</body>

</html>

注：通过对 style 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计尺寸。

HTML 样式实例 - 文本对齐

<html>

<body>
<h1 style="text-align:center">实验楼</h1>
</body>

</html>

注：上面的标题“实验楼”相对于页面居中对齐。

HTML 链接

链接可以是一个字，一个词，或者一组词，
也可以是一幅图像，
您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，
箭头会变为一只小手。我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
例子：

<a href="https://www.shiyanlou.com/">实验楼</a>

注：上面这行代码显示为：实验楼。点击这个超链接会把用户带到实验楼的首页。提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。暂时没有确定链接目标时，通常将标记的 href 属性值定义为“#”(即 href="#")，表示该链接暂时为一个空链接。

通过 name 属性创建锚点链接，使用户能够快速定位到目标内容（比如页面中某个小节）。创建锚点链接分为两步：

使用“链接文本”创建链接文本。
使用相应的 id 名标注跳转目标的位置。
例子：

<html>
<body>

<p>
<a href="#winter">查看冬天。</a>
</p>

<h2>春</h2>
<p>万物复苏</p>

<h2>夏</h2>
<p>夏日绵绵</p>

<h2>秋</h2>
<p>秋高气爽</p>

<h2><a name="winter">冬</a></h2>
<p>白雪皑皑</p>

</body>
</html>

注：点击“查看冬天”页面会跳转到冬。

target 属性：用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种，其中 _self 为默认值，_blank 为在新窗口中打开方式。
下面的例子会在新窗口打开文档：

<a href="https://www.shiyanlou.com/" target="_blank">实验楼</a>

注：target 默认属性为：_self，使得目标文档载入并显示在相同的框架或者窗口中作为源文档。

HTML 排错

编码的时候我们经常会遇到 bug，那么当 html 报错的时候，我们怎么迅速地找到错误之处呢？

方案1：
使用 Dreamweaver，在“站点”菜单中找到“检查站点范围的链接”，点击“检查站点范围的链接”后，在软件下方会出现链接检查窗口，它可以快速帮你检查出有问题的链接。

方案2：
理清楚自己的逻辑，根据错误原因去推测应该会是哪几行 html 代码有问题，另外可以通过注释的方式把其余正确无关项的代码注释掉，从而减少代码量，更有益于我们找到错误。

方案3：
网上有很多找错插件，可自行搜索使用。

HTML 列表

HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。

有序列表（ol）

定义：
有序列表是一列项目，列表项目使用数字进行标记。

有序列表始于<ol> 标签。每个列表项始于 <li> 标签。

有序列表有 type 和 start 属性。

语法格式：

<ol type=value1 start=value2>
    <li></li>        
</ol>

注：
value1 表示有序列表项目符号的类型, value2 表示项目开始的数值。
type 属性如下所示：

type类型	描述
type=1	表示列表项目用数字表示（1，2，3...)
type=a	表示列表项目用小写字母表示（a,b,c...)
type=A	表示列表项目用大写字母表示（A,B,C...)
type=i	表示列表项目用小写罗马数字表示(i,ii,iii….)
type=I	表示列表项目用大写罗马数字表示(I,II,III…)

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>



        <body>

            <h4>数字列表：</h4>
            <ol>
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>小写字母列表：</h4>
            <ol type="a">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>大写写字母列表：</h4>
            <ol type="A">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>小写罗马字母列表：</h4>
            <ol type="i">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>

            <h4>大写罗马字母列表：</h4>
            <ol type="I">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ol>
        </body>

</html>

注：type 默认为数字列表，即不给 type 设置属性值时显示的为数字列表。

无序列表（ul）

定义：
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于<li>。

无序列表的各个列表项之间没有顺序级别之分，是并列的。

ul 的 type 属性：默认值: disc，方块: square，空心圆: circle。
语法格式：

<ul>
    <li>列表项1</li>   
    <li>列表项2</li>   
    <li>列表项3</li>
    ......
</ul>

注：

<ul></ul>标记用于定义无序列表，<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>。

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>



        <body>

            <h4>Disc 项目符号列表：</h4>
            <ul type="disc">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

            <h4>Circle 项目符号列表：</h4>
            <ul type="circle">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

            <h4>Square 项目符号列表：</h4>
            <ul type="square">
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>

        </body>

</html>

自定义列表（dl）

定义：

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。
每个自定义列表项以 <dt>开始。
每个自定义列表项的定义以 <dd>开始。
自定义列表的列表项前没有任何项目符号。

语法格式：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    ...
</dl>

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <body>

            <h2>一个自定义列表：</h2>

            <dl>
                <dt>春天</dt>
                <dd>万物复苏 </dd>
                <dd>百花争艳 </dd>
                <dd>适合学习</dd>
                <dt>夏天</dt>
                <dd>夏日绵绵</dd>
                <dd>烈日炎炎</dd>
                <dd>适合学习</dd>
            </dl>

        </body>

</html>

HTML 元数据

定义
元数据就是用来描述数据的数据。 HTML 中也有很多元数据，下面为大家简单介绍一下。

<meta>标签提供关于 HTML
文档的元数据：描述（description）、
关键词（keywords）、文档的作者（author）等其他元数据。

例子：

<!DOCTYPE HTML>
<html>
<head>
    <meta name="author" content="www.shiyanlou.com"/>
    <meta name="description"  content="A simple example"/>
</head>
<body>
    <a href="https://www.shiyanlou.com">实验楼</a>
</body>
</html>

HTML 块

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。

常见块级元素： <h1>,<p>, <ul>, <table>。

内联元素

内联元素在显示时通常不会以新行开始。宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变。

常见内联元素：<b>, <td>, <a>, <img>。

HTML 布局（div，span）

HTML 布局主要有两种：使用 div 元素的布局和使用 span 元素的布局，那么他们的优缺点是什么呢？下面我们将详细的进行介绍。

使用 div 元素布局
例子：

div 部分：

<body>

<div id="header">
    <h1>实验楼</h1>
</div>

</body>

css 部分：

<style>

#header {
    background-color:black;
    color:red;
    text-align:center;
    padding:25px;
}
</style>

使用 table 元素布局

例子：

<body>

<table class="syl">
<tr>
  <td>
    实验楼。
  </td>
</tr>
</table>

</body>

css 部分：

<style>
table.syl {
    width:100%;
    border:1px solid #d4d4d4;
}
table.syl td {
    padding:10px;
    width:20px;
}
</style>

table 元素布局：

优点：

理解比较简单。
不同的浏览器看到的效果一般相同。

缺点：

显示样式和数据绑定在一起。
布局的时候灵活度不高。
一个页面可能会有大量的 table元素，代码冗余度高。
增加带宽。
搜索引擎不喜欢这样的布局。

div 元素布局：

优点：

符合 W3C 标准。
搜索引擎更加友好。
样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
节省代宽，代码冗余度低。
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

注：DIV+CSS 并不是要我们抛弃 table，因为 table 在显示数据时更加方便，因此我们要根据实际情况灵活应用。

文本格式

定义：
文本格式其实就是文本的样式，比如说文章的换行，文字的加粗，斜体等等类似这些的，都是文本格式，这些都是通过文本格式标签实现的。

常用的文本格式化标签：

标签	描述
`<b>`	定义粗体文本
`<big>`	定义大号字
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

文档和网站架构

标题

通常在顶部有一个大标题和（或）图标。这是一个网站的主要常见信息，通常存在于每一个网页。

主要内容

中心的一个大区域，包含给定网页的大部分独特内容。

侧栏

一些次要信息、链接、引言、广告等。

页脚

横跨页面底部的条纹，通常包含精美的打印、版权通知或联系信息。

为了实现这样的语义标记，HTML 提供了可以用来表示这些部分的专用标签，例如：

标题：<header>
导航栏：<nav>
主要内容：<main>具有代表性的内容段落主题可以使用 <article>, <section>，<div>元素。
侧栏：<aside>经常嵌套在<main>中
页脚：<footer>
例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>实验楼</title>
  </head>

  <body>

    <header>
      <h1>This Is Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
     </nav>

    <main>
      <article>
        <h1>Article heading</h2>
        <p>好好学习天天向上</p>
        <h2>subsection</h3>
        <p>今天适合学习</p>
        <h3>Another subsection</h3>
        <p>学习使我快乐</p>
      </article>

      <aside>
        <h2>Related</h2>
         <ul>
          <li><a href="#">春天万物复苏</a></li>
          <li><a href="#">夏天夏日绵绵</a></li>
          <li><a href="#">秋天秋高气爽</a></li>
          <li><a href="#">冬天白雪皑皑</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>©Copyright 2018 by CHD.</p>
    </footer>

  </body>
</html>

注：快来区分一下哪些部分组成上面所讨论的内容（标题、导航栏、主要内容、侧栏、页脚）吧。

挑战：构建出有内容的网页

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
    </head>

    <body>

        <h1> 42摄氏度：成都创出100年气象史上高温新纪录</h1>

        2017年07月07日 <br>

        10:43:96 来源： <strong>新华网</strong>
        <hr>
        <p> <em>新华网成都7月7日电（记者李小花）7日7时36分至47分这一时间段，成都气象观测站测得当日最高温达42摄氏度。这是成都有气象记录以来100年的高温新纪录，打破了此前1934年创下的40.2摄氏度的历史极值。</em></p>

        <p><ins>成都已经连续２天发出了最高等级的红色高温警报。</ins>成都中心气象台首席服务官李刚说，今年副热带高压强度特别强，对成都地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。6日成都已出现了气象史上７月份“第四高”的高温值，这使得7日的“基础”气温就很高，超过了30摄氏度，然后不断地升温。此外，6日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p>

        <p>在成都历史上，出现40摄氏度以上极端高温的几率并不大。根据相关资料，中心城区观测站
            <font color="red" size="5">100年来仅出现了5次记录</font>，除了这一次的新纪录，还有就是1934年7月12日的40.2摄氏度；1934年8月25日、2009年7月20日、2010年8月13日的40摄氏度。</p>

        <p> <del>由于气温实在太高，成都6日下午不少地区出现了热对流天气。气象台说，首先是双流地区，下起了热雷雨。到15时05分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</del></p>
    </body>

</html>

HTML表格

简介

在网页中插入表格可以使网页上的内容排列整齐，让浏览者对表格中表达的数据及其含义一目了然。本节将重点讲解 HTML 表格的相关内容，表格在网页中主要有 2 种用途：1 是存放数据，2是组织网页内容。

知识点

HTML 表格概述
表格基础
高级表格特性和可访问性

HTML 表格概述

日常生活中我们会遇到各种表格，课程表，值日表，成绩表等等。而在 HTML 语言中，我们有时候也需要绘制表格，那么究竟该如何绘制呢？

表格基础

还记得我们之前学习的列表吗？列表是表格吗？

在这里我们对列表和表格作一个简单的区分：

列表顾名思义，只有列存在的表格，布局是从上往下的。

而表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，一个表格通常由多行多列组成。

在 HTML 语言中表格至少由<table>标签、<tr>标签和<td>标签这 3 对标签组成。下面详细为大家讲解这三个标签。

表格基本标签

`<table>`标签

<table>... </table>标签用于在 HTML 文档中创建表格。它包含表名和表格本身内容的代码。

`<tr>`标签

<tr>标签用于定义每一行。

`<td>`标签

<td>标签用于定义每一列。

例子：

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

你是否发现好像缺了点什么？这个表格为什么没有边框呢？接下来让我们为它添加一个 border 属性再来看看效果。

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

注：border="1" 是指表格边框的厚度为 1 像素（px），它的默认值为 0。

注：其余属性的使用和 border 类似，只需要在 table 标签中添加属性即可，大家可以尝试着使用。

学习地址：

https://www.shiyanlou.com/courses/1236

版权属于：soarli
本文链接：https://blog.soarli.top/archives/64.html
转载时须注明出处及本声明。

HTTP 基础知识

HTTP 概述

网站概述

浏览器访问过程

网站的文件处理

前端入门学习路径

HTML简介

知识点

HTML 定义

HTML 标签

双标签（双标记）

单标签（单标记）

标签的关系

嵌套关系

并列关系

HTML 文件结构

HTML 元素

HTML 属性

HTML 样式

HTML 链接

HTML 排错

HTML 列表

有序列表（ol）

无序列表（ul）

自定义列表（dl）

HTML 元数据

HTML 块

块级元素

内联元素

HTML 布局（div，span）

div 部分：

css 部分：

使用 table 元素布局

css 部分：

table 元素布局：

优点：

缺点：

div 元素布局：

优点：

文本格式

文档和网站架构

标题

导航

主要内容

侧栏

页脚

挑战：构建出有内容的网页

HTML表格

简介

HTML 表格概述

表格基础

表格基本标签

<table>标签

<tr>标签

<td>标签

发表评论 取消回复

`<table>`标签

`<tr>`标签

`<td>`标签

发表评论取消回复