HTML基础简介、内容标签、属性、表格表单

TML基础简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML是一个网页文件的拓展名，和txt、jpg、mp3一样，是一个文件格。.html文件就是网页文件。

2.html 的格式化标签

<!DOCTYPE>
<html>
--html是一个双标签开始标签
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是标题
</head>
<body>--用来存放页面中的内容
</body>
</html> --结束标签

DOCTYPE----文档类型声明
meta标签----设置页面编码格式，关键字，以及页面的描述
<title></title>--------->标题部分
<head></head>------>页面的头部分
<body></body>------>页面的主体部分

2.内容标签

这其中<hr> <br> 是单标签
<div></div> <span></span> 无意义区块容器标签
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

HTML标记—注释标记

<!--注释语句-->

标题：
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

段落：
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 链接

<a href="http://www.runoob.com">这是一个链接</a>
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
URL - 统一资源定位器
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

这里需要注意:使用超链接做下载,并不是超链接完成的下载功能,而是通过超链接跳转到了一个有下载功能的页面。

常见的 URL Scheme

HTML 图像

alt 属性用来为图像定义一串预备的可替换的文本。

3.HTML属性

属性实例:

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：<a href="http://www.runoob.com">这是一个链接</a>

4.HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

5.HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定
当用户要在表单中键入字母、数字等内容时，就会用到文本域
密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
单选有时需要设置默认选项,需要设置checked属性:
<input type="radio" name="sex" checked ="checked"/>男

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多选框一般不需要设置默认选项,如果要设置,也是设置checked属性

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
这里需要注意的是: Submit必须要和form一起使用才能达到效果
action 设置表单提交参数路径
method 当前请求方式(同iOS开发网络请求一样,get/post)

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

图片按钮(使用不多)

Select下拉框

selected默认选项
<select>
<option selected="selected" >选项一</option>
<option>选项二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、无序和定义列表:

无序列表使用 <ul> 标签
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项项使用数字来标记。
<ol>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ol>
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除点去除下划线
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.内联样式- 在HTML元素中使用"style" 属性

HTML样式实例 - 背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

HTML 样式实例 - 文本对齐方式

<h1 style="text-align:center;">居中对齐的标题</h1>

而关于其他CSS内容,这里就简单介绍一下:

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 样式标签

最后提一下什么是Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

篇我们学习CSS列表。

对于列表，大家并不陌生。比如下面的无序列表和有序列表。

在 HTML 中，最常用的两种列表的类型就是无序列表和有序列表，使用 ol 和 ul 元素实现。列表项通过列表元素属性，实现空心实心圆点和数字字母等不同的形式。

在 CSS 中，列表属性允许我们为有序列表、无序列表设置不同的列表项标记，甚至可以使用一个图像，还可以为列表和列表项添加背景颜色。

应用 list-style-type 属性设置不同的列表项标记。属性值有很多，

比如：

circle 空心圆点，

disc 实心圆点，

square 小方点，

decimal 数字，

upper-roman 大写罗马字母，

lower-alpha 小写字母等等。

举个例子。

创建创建 css-list.html 文件和 list-style.css 文件。打开 html 文件，构建基础代码，使用 emmet 命令：小括号 ul 大于 li 乘以3 再乘以3 (ul>li*3)*3。回车，创建了三组无序列表。给三个 ul 元素添加 class 属性，值分别为 a，b，c。给每个列表项填入一些文本。

HTML
<body>
  <ul class="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <ul class="b">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ul>
  <ul class="c">
    <li>大前端</li>
    <li>前端架构</li>
  </ul>

  <ol class="d">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
  <ol class="e">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ol>
  <ol class="f">
    <li>大前端</li>
    <li>前端架构</li>
  </ol>
</body>

拷贝这三组无序列表，将 ul 元素名称修改为 ol，三个 class 值改为 d，e，f。

打开 css 文件，定义选择器 ul.a，声明样式 list-style-type: circle，设置列表项标记为空心圆点。拷贝两组样式，修改选择器 ul.b，ul.c。修改 list-style-type 属性值分别为 disc，实心圆点，square 小方点。

无序列表效果就做好了！

定义选择器 ol.d，声明样式 list-style-type: decimal，设置列表项标记为数字。拷贝两组样式，修改选择器 ol.e，ol.f。修改 list-style-type 属性值分别为 upper-roman，大写罗马字母，lower-alpha 小写字母。

有序列表也实现了！

CSS
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: disc;
}

ul.c {
  list-style-type: square;
}

ol.d {
  list-style-type: decimal;
}

ol.e {
  list-style-type: upper-roman;
}

ol.f {
  list-style-type: lower-alpha;
}

有关更多的 list-style-type，大家参照这个案例。

list-style-image 属性指定了一个图像作为列表项的标记。属性值为 url 小括号，括号里写入图片的路径 url('./xxx.gif') 。

举个例子。

在 html 里，拷贝第一组 ul，将 class 的值改为 g。在 css 里，定义选择器 ul.g，声明样式属性 list-style-image，值为 url 小括号，图片路径为当前目录下的 purple.gif。

看看效果，列表项用图片标记了！

除了更换列表项的标记，还可以设置标记的位置，通过 list-style-position 属性来实现。这个属性的值有两个：outside，表示标记在列表项之外。inside，表示标记在列表项内部。

举个例子。

在 html 里添加一个 h3 元素，填入一些文本。ul 点 h 大于 li 乘以 3 ul.h>li*3，创建一个无序列表，填入一些文本。拷贝这组列表，将 class 值改为 i。

在 css 里定义 ul.h 选择器，声明样式 list-style-position: outside。定义 ul.i 选择器，声明样式 list-style-position: inside。

仔细观察列表项标记的位置，如果这里画一条线，就一目了然了，outside，标记在列表内容的左侧，也是默认的位置。inside，标记在列表内容里面。

有时，我们不希望显示列表项标记，此时可以应用 list-style-type: none 来去掉他们。

再复制一组这个列表，将 class 值修改为 j。再定义选择器 ul.j，声明样式 list-style-type: none。

我们看，列表项标记消失了。

同样，列表属性也可以使用简写——list-style，被用来在一个声明中，设置所有的列表属性。属性值按照 list-style-type list-style-position list-style-image 顺序来书写，某个值缺省的话，就使用它的默认值。

复制两份列表，修改 class 值分别为 k，l （这个是艾奥）。

HTML
<ul class="k">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ul class="l">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

定义选择器 ul.k，声明样式 list-style: square inside url("purple.gif")。再定义选择器 ul.l，声明样式 list-style: none。

这样的简写，同样可以定义列表项的标记样式，方便快捷。

我们还可以用颜色来装饰列表，使它们看起来更有趣。添加到 ol 或 ul 标签的任何样式都会影响整个列表，而添加到 li 标签的属性只会影响单个列表项。

在 html 中再复制两组列表，修改 class 的值分别为 m，n。

HTML
<ul class="m">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <ol class="n">
    <li>Vue</li>
    <li>React</li>
    <li>小程序</li>
  </ol>

定义 ul.m 选择器，声明样式：background: #3399ff，padding: 20px。

定义 ol.n 选择器，声明样式：background: #ff9999，padding: 20px。

定义 ul.m li 选择器，声明样式：background: #cce5ff，color: darkblue，margin: 5px。

定义 ol.n li 选择器，声明样式：background: #ffe5e5，color: darkred，padding: 5px，margin-left: 35px。

这样，列表就装饰好了！

这里用到的 padding 和 margin 属性，给元素添加内外边距，我们在后面的课程里还会详细的研究。

CSS
ul.m {
  background: #3399ff;
  padding: 20px;
}

ol.n {
  background: #ff9999;
  padding: 20px;
}

ul.m li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}

ol.n li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=73

本文中，我们将讨论无序列表，在制作现代网站和应用程序时，无序列表的发展是不可避免的。

你是否做了很多很多名单的粉丝？我也不是。但是，这里我们不是在谈论家务或购物清单。我们正在讨论制作现代网站和应用程序时不可避免的有序和无序列表。

如前所述，在HTML和CSS中创建列表时，有两种类型：有序和无序。在有序列表的情况下，存在数字。另一方面，在无序列表的情况下，不存在计数，这就是为什么这些类型的列表的通用名称是项目符号列表。

使用列表时，正确格式化文本非常重要。

本文的重点将放在无序列表上，以及子弹的类型和属性。

无序列表使用

<ul></ul>

标签。我们来看一个简单的例子。

HTML

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<ul>

类型属性

该类型属性可以被用来确定哪个子弹的类型将在列表中被使用。该属性可以由三个不同的值组成：

Circle
Disc
Square

可以在<ul></ul>or <li></li>元素上设置项目符号类型，这意味着您可以在整个列表中设置样式，或者单独设置每个列表项目的样式。

需要知道的是在创建列表时使用哪种字体大小。

Bullet样式

为了改变项目符号样式，可以使用两个属性。该列表样式类型属性或列表样式。不同的是，通过使用第二个，我们可以同时更改多个属性。但我们会在稍后讨论。

CSS

.ul { list-style-type: square; }

这里我们看到列表样式设置为square。

使用自定义图像

借助CSS的强大功能，可以使用自定义图像作为子弹。通常，它是一个简单的小图标。为此，我们使用list-style-image。

CSS

ul { list-style-image: url(‘images/sample-bullet.png’); }

Bullet位置

我们也可以通过使用list-style-position属性来设置项目符号的位置。它可以有两个值：外部和内部。

CSS

ul { list-style-position: outside; }

CSS

ul { list-style-position: inside; }

第一张图片显示的是设置为外部的值，第二张图片的值设置为内部。

将值设置为外部时，表示子弹将位于列表项之外。并且，将值设置为内部时，子弹将位于列表项内。

不要忘记给列表一些样式。

如果这种造型不够，可以改变项目符号的颜色。

合并属性

如前所述，您可以通过设置列表样式来组合多个属性。

CSS

ul { list-style: square inside url("element.gif"); }

通过这个简写，我们同时设置了列表式样式，列表式样位置和列表式样图像。

概要

开发网站和应用程序时经常使用列表，所以您应该始终知道如何设计它们。我希望这个简短的解释能帮助你的项目。

在线咨询

上一篇：手把手教你使用Python网络爬虫获取B站视频选集内容（附源码）
下一篇：web常用编程语言对比排行

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML基础简介、内容标签、属性、表格表单

类型属性

Bullet样式

使用自定义图像

Bullet位置

合并属性

概要

您的项目需求