HTML 基础学习笔记

Posted on Edited on In

自学 html 基础笔记。

Web 前端简单介绍

web 前端包含：

  • pc 端页面
  • 移动端页面

web 前端首先要解决用户体验的问题

认识网页

网页的组成

网页主要由文字、图片和按钮等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及 Flash 等。

Web 标准

1：w3c 万维网联盟组织：用来制定 web 标准的机构（组织）

2：web 标准：制作网页要遵循的规范

3：web 标准规范的分类：结构标准；表现标准；行为标准

  • 结构标准：html（用来制作网页的）
  • 表现标准：css（对网页进行美化的）
  • 行为标准：javascript（让网页动起来，具有生命力）

4：web 标准总结：

  • 结构标准：相当于人的身体
  • 表现标准：相当于人的衣服
  • 行为标准：相当于人的动作

浏览器介绍

浏览器是网页运行的平台，常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari 和 Opera 等。

浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内 ，容以及页面的格式信息。

IE Google/Opera FireFox Safari
trident blink gecko webkit

浏览器与服务器

1：浏览器向服务器发送请求（通过http协议）

2：http协议：超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范

3：https：加密处理

4：url协议:平时我们写的网址就是 url 地址

url协议：规定 url 地址的格式

协议规定格式： scheme://host.domain:port/path/filename

scheme: 定义因特网服务的类型。常见的就是http

host: 定义域主机（http 的默认主机是www）

domain: 定义因特网域名 比如：w3school.com.cn

:port 定义端口号（网页默认端口 :80）

path: 网页所在服务器上的路径

filename: 文件名称

认识 html

概念

html (Hyper Text Markup Language ) 中文译为 超文本标记语言，主要是通过 html 标记对网页中的文本，图片，声音等内容进行描述。

HTML 之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的 超级链接，通过超链接可以实现网页的跳转。从而构成了丰富多彩的 Web 页面。

html 结构

基本结构如下：

1
2
3
4
5
6
7
<! Doctype html>
  <html lang="en">
      <head>
         <title></title>
      </head>
      <body></body>
  </html>

各部分的含义：

1
2
<!-- 文档类型 -->
<! Doctype html>
1
2
<!-- 根标签 -->
<html></html>

<html></html> 用于告知浏览器其自身是一个 HTML 文档，</html> 标记标志着 HTML 文档的开始，</html> 标记标志着 HTML 文档的结束，在他们之间的是文档的头部和主体内容。 

1
2
<!-- <html lang="en"> 向搜索引擎表示该页面是html语言，并且语言为英文网站 -->
<html  lang="en">

这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对 html 页面本身不会有影响。

1
2
<!-- html文档头部分 -->
<head></head>

主要用来封装其他位于文档头部的标记。一个 HTML 文档只能含有一对 <head> 标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。 

1
2
<!-- 网页的标题 -->
<title></title>

<title> 标记用于定义HTML页面的标题，<title></title> 之间的内容将显示在浏即给网页取一个名字，必须位于 <head> 标记之内。一个HTML文档只能含有一对 <title></title> 标记，将显示在浏览器窗口的标题栏中。

1
2
<!-- html结构的主体部分 -->
<body></body>

<body> 标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于 <body> 标记内，<body> 标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对 <body> 标记，且 <body> 标记必须在 <html> 标记内，位于 <head> 头部标记之后。

标签的分类

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>；
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>；
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签；
  • 开始和结束标签也被称为开放标签和闭合标签；

HTML标记—双标记

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

1
2
3
<标记名></标记名>
<!-- 例如： -->
<body></body>

该语法中 <标记名> 表示该标记的作用开始，一般称为 开始标记（start tag），</标记名> 表示该标记的作用结束，一般称为 结束标记（end tag）。和开始标记相比，结束标记只是在前面加了一个关闭符 /。

HTML标记—单标记

单标记也称空标记，只有开始标签没有结束标签：

1
2
3
<标记名>
<!-- 例如： -->
<! doctype html>

标签关系

  • 嵌套关系：类似父亲和儿子之间的关系
1
2
3
4
5
6
<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>
  • 并列关系：类似与兄弟之间的关系
1
2
<head></head>
<body></body>

html 标签介绍

单标签

文本注释标签

1
<!-- 文本注释标签 Ctrl+/  -->

文本换行标签

1
你好<br>我来自中国

效果演示：
你好
我来自中国

横线标签

1
<hr>

效果演示：

双标签

段落标签

1
2
<p>这是一行文字</p>
<p>这也是一行文字</p>

效果演示：

这是一行文字

这也是一行文字

标题标签

注意：标题标签只能取到数字 1-6 

1
2
3
4
5
6
<h1>这是一个标题1</h1>
<h2>这是一个标题2</h2>
<h3>这是一个标题3</h3>
<h4>这是一个标题4</h4>
<h5>这是一个标题5</h5>
<h6>这是一个标题6</h6>

文本标签

1
<font></font>

例如：

1
<font  size="10"  color="red">优美的文字</font>

效果演示：
优美的文字

文本格式化标签

文字加粗显示

1
<strong>该减肥了！</strong>

效果演示：
该减肥了！

文字斜体

1
<em>这行字是斜的</em>

效果演示：
这行字是斜的

文字下横线

1
2
<ins>文字下横线</ins>
<u>文字下横线</u>

效果演示：
文字下横线
文字下横线

文字删除线

1
2
<del>删除线</del>
<s>删除线</s>

效果演示：
删除线
删除线

图片标签

1
<img>
属性 描述
src 设置显示图片（图片名称或者图片路径）
title 用来设置鼠标放在图片上显示的文字
alt 当图片无法正常显示的时候，对图片的描述
width 用来设置图片宽度
height 用来设置图片的高度 
1
2
<!-- 下图来自百度图片 -->
<img src="www.baidu.com/imags/1.png" title="HTML" alt="测试图片" width="200" height="200">

效果演示：
测试图片

相对路径

  • 当图片和文件（html）在同一个文件夹中时，src 属性中直接写上图片名称即可。
1
<img src="1.jpg">
  • 当图片在文件（html）的下一级目录中时，src 属性中写上图片所在的文件夹名 +“/” + 图片名称
1
<img src="1/1.jpg">
  • 当图片在文件（html）的上一级目录中时，src 属性中写上 ../图片所在文件夹名 + “/” + 图片名称
1
<img src="../2/1.jpg">

绝对路径

凡是带有 磁盘路径 的都是绝对路径，或者带有 网站地址 的也是绝对路径。

1
2
<img src="D:\a\1.png">
<img src="www.baidu.com/imags/1.png">

超链接

在HTML中创建超链接非常简单，只需用 <a></a> 标记环绕需要被链接的对象即可，其基本语法格式如下：

1
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 描述
href 用于指定链接目标的 url 地址，当为 <a> 标记应用 href 属性时，它就具有了超链接的功能。
target 用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种，其中 _self 为默认值， _blank 为在新窗口中打开方式。
在 <head> 标签中使用 <base> 标签可以设置网页整体链接的打开状态。 
1
2
3
<head>
    <base target="_blank">
</head>

实例：

1
2
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.renkaigis.com" target="_blank">Kai's Blog</a>

效果演示：
百度
Kai’s Blog

注意:

（1）暂时没有确定链接目标时，通常将 <a> 标记的 href 属性值定义为“#”(即 href="#" )，表示该链接暂时为一个空链接。

（2）不仅可以创建文本超链接，在网页中各种网页元素，如 图像、表格、音频、视频 等都可以添加超链接。

锚链接

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：

  • 使用 “ <a href="#id名"> 链接文本 </a> ” 创建链接文本；
  • 使用相应的 id 名标注跳转目标的位置。
1
2
3
4
5
<!-- 例如在网页顶部写个你好 -->
<p id="db">你好</p>

<!-- 给 a 标签设置 href 属性 "#id名称" -->
<a href="#db">返回顶部</a>

效果演示：

你好

返回顶部

特殊字符

特殊字符 描述 字符的代码
空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
￥ 人民币 &yen;
© 版权 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方（上标2） &sup2;
³ 立方（上标3） &sup3;

列表

无序列表（ul）

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

例如：

1
2
3
4
5
6
7
8
大家喜欢吃什么水果
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>水蜜桃</li>
    <li>菠萝</li>
</ul>

效果演示：
大家喜欢吃什么水果

  • 苹果
  • 香蕉
  • 菠萝

属性：type

（默认值）实心圆点：disc

实心方块：square

空心圆圈：circle

实例：

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>
<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
</ul>
<ul type="circle">
    <li>苹果</li>
    <li>香蕉</li>
</ul>

有序列表（ol）

1
2
3
4
<ol>
    <li></li>
    <li></li>
</ol>

属性：type

A（ABCD排序），a（abcd排序），i（小写的罗马数字），I（大写的罗马数字）

属性：start=”3”，表示从第几个数开始

1
2
3
4
5
6
把大象放冰箱分几步？
<ol type="a"  start="3">
    <li>打开冰箱门</li>
    <li>把大象放进去</li>
    <li>关上冰箱门</li>
</ol>

效果演示：

把大象放冰箱分几步？

  1. 打开冰箱门
  2. 把大象放进去
  3. 关上冰箱门

自定义列表（dl）

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

1
2
3
4
5
6
<dl>
    <dt></dt>  小标题
    <dd></dd>  列表项
    <dd></dd>
    <dd></dd>
</dl>

一般用于网页的底部，例如：

1
2
3
4
5
6
7
<!-- 自定义列表 -->
<dl>
    <dt>售后服务</dt>
    <dd>收货地址</dd>
    <dd>在线支付</dd>
    <dd>联系客服</dd>
</dl>

效果演示：

售后服务
收货地址
在线支付
联系客服

小补充

页面背景音乐

1
<embed src="1.mp3" hidden="true">

属性：

  • src：设置音乐路径
  • hidden：隐藏播放按钮，true 隐藏，false 显示

页面滚动效果

1
2
3
4
<!-- 中间的内容可以为 文字、图片，也可以是由程序生成的文字或图片 -->
<marquee>
    ...
</marquee>

实例展示：

1
<marquee bgcolor="blue" >我会滚动</marquee>

效果演示：

我会滚动

属性 描述
height 设置高度
width 设置宽度
bgcolor 设置背景颜色
behavior 设定滚动的方式：
alternate：表示在两端之间来回滚动；
scroll：表示由一端滚动到另一端，会重复；
slide：表示由一端滚动到另一端，不会重复。
direction 设定滚动的时间：
down：向下滚动；
left：向左滚动；
right：向右滚动；
up：向上滚动。
loop 设置滚动次数，-1 表示一直滚下去

Meta标签和Link标签

Meta 标签

meta 的属性有两种：name 和 http-equiv。

name 属性

主要用于描述网页，对应于 content（网页内容）。

  • 1、用来说明网页使用的字符集，即编码格式
1
<meta  charset="utf-8">
  • 2、用以说明生成工具（如Microsoft FrontPage 4.0）等；
1
<meta name="generator" contect="">
  • 3、向搜索引擎说明你的网页的关键词；
1
<meta name="keywords" contect="">
  • 4、告诉搜索引擎你的站点的主要内容；
1
<meta name="description" contect="">
  • 5、告诉搜索引擎你的站点的制作的作者；
1
<meta  name="author"  contect="你的姓名">
  • 6、有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是 The Robots META 标签。
1
<meta   name="robots" contect= "all|none|index|noindex|follow|nofollow">

robots 其中的属性说明如下：

设定为 all：文件将被检索，且页面上的链接可以被查询；

设定为 none：文件将不被检索，且页面上的链接不可以被查询；

设定为 index：文件将被检索；

设定为 follow：页面上的链接可以被查询；

设定为 noindex：文件将不被检索，但页面上的链接可以被查询；

设定为 nofollow`：文件将不被检索，页面上的链接可以被查询。

http-equiv 属性

1
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
  • 网页重定向，表示的是 5 秒后网页自动跳转到指定网址。
1
<link  rel="icon"  href="favicon.ico">

给网页 titile 中放置小图标

1
<link rel="stylesheet"   href="1.css">

引入外部样式表

表格（table）

表格基本结构

在 HTML 语言中，表格至少由 <TABLE> 标签、<TR> 标签和 <TD> 标签这 3 对标签组成。

1.<table>
<table>...</table> 标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用 <td>...</td> 标签定义。

2.<tr>
表格行用 <tr> 标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用 <tr> 标签表示，并用相应的 </tr> 结束.

3.<td>
表格的每一行又有若干表格单元格，用 <td>...</td> 标签表示。td 是”表格数据(Table Data)”的英文缩写。<td> 标签定义一个列，嵌套于 <tr> 标签内。
border 属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。

基本语法：

1
2
3
4
5
6
7
8
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>职业</td>
        <td>籍贯</td>
    </tr>
</table>

属性介绍：

  • bord：设置表格边框的厚度
  • width：设置表格宽度
  • height：设置表格高度
  • cellspacing：设置单元格之间的距离
  • cellpadding：文字距离单元格边框的距离
  • bgcolor=”red”：设置背景颜色
  • align=”center” | left | right：给 tr 或者 td 设置让文字居中，给 table 设置让表格居中
属性名 含义 常用属性值
border 设置边框，默认为0，没有边框 单位为 px 像素值
cellspacing 设置单元格与单元格之间的距离 单位为 px 像素值，默认为 2px
cellpadding 设置文字与单元格之间的距离 默认 1px
width 设置表格的宽度 单位 px
height 设置表格的高度 单位 px
align 设置表格在网页中的对其方式 left 左
rigth 右
center 居中
bgcolor 设置背景颜色 white，red，green等

设置表格表头，用法和 td 一样

表头一般位于表格的第一行或第一列，其文本加粗居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
        <th>籍贯</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>码农</td>
        <td>江苏</td>
    </tr>
</table>

效果演示：

姓名年龄职业籍贯
小明18码农江苏

表格属性设置示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1" width="200" height="300" cellspacing="0" cellpadding="20" bgcolor="red">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
        <th>籍贯</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>码农</td>
        <td>江苏</td>
    </tr>
</table>

效果演示：（本应整个表格都是 bgcolor 的，这里显示有问题）

姓名年龄职业籍贯
小明18码农江苏

设置表格标题：

caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
    <!-- 设置表格标题 -->
    <caption> <h3>人员信息表</h3></caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
        <th>籍贯</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>码农</td>
        <td>江苏</td>
    </tr>
</table>

效果演示：

人员信息表

姓名年龄职业籍贯
小明18码农江苏

表格结构

1
2
3
4
5
<table>
    <thead></thead>    头
    <tbody></tbody>    身体
    <tfoot></tfoot>    脚
</table>

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体如下所示：

  • <thead></thead>：用于定义表格的头部，必须位于 <table></table> 标记中，一般包含网页的logo和导航等头部信息。
  • <tbody></tbody>：用于定义表格的主体，位于 <table></table> 标记中 <thead></thead> 标记之后，一般包含网页中除头部和底部之外的其他内容。
  • <tfoot></tfoot>：用于定义表格的页脚，位于 <table></table> 标记中 <tbody></tbody> 标记之后，一般包含网页底部的企业信息等。

补充知识：单元格的合并

横向合并

1
2
3
4
5
<tr>
    <td></td>
    <td colspan="2"></td>
    <td></td>
</tr>

实例展示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 实例展示 -->
<table border="1" cellspacing="0" cellpadding="20">
    <tr>
        <th>姓名</th>
        <th colspan="2">年龄</th>
        <!--<th>职业</th>-->
        <th>籍贯</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td>码农</td>
        <td>江苏</td>
    </tr>
</table>

效果演示：

姓名年龄籍贯
小明18码农江苏

纵向合并

1
2
3
4
5
6
7
8
9
10
<tr>
    <td></td>
    <td rowspan="2"></td>  <!-- 纵向合并 -->
    <td></td>
</tr>
<tr>
    <td></td>
    <!--<td></td>-->
    <td></td>
</tr>

实例展示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 实例展示 -->
<table border="1" cellspacing="0" cellpadding="20">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
        <th>籍贯</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>18</td>
        <td rowspan="2">码农</td>  <!-- 纵向合并 -->
        <td>江苏</td>
    </tr>
    <tr>
        <td>小白</td>
        <td>21</td>
        <!--<td>前端</td>-->
        <td>北京</td>
    </tr>
</table>

效果演示：

姓名年龄职业籍贯
小明18程序猿江苏
小白21北京

表单（form）

表单介绍

表单的作用：主要负责数据采集功能。

对于表单构成中的表单控件、提示信息和表单域，对他们的具体解释如下：

  • 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
  • 提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
  • 表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

基本语法：

1
<form name="form_name" action="url" method="get|post">…</form>

属性介绍：

  • Name ：定义表单的名称；
  • Action ：用来指定表单处理程序的位置（服务器端脚本处理程序）；
  • Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get。

get数据提交：① 通过地址栏的方式进行数据提交，将用户输入的信息显出来；② get提交安全性差。

post提交：① 数据通过后台进行提交，不会将用户信息显示出来；② 安全性比较好。

表单域

1
2
3
<form action="">
    …
</form>

容纳表单空间和提示信息的一个区域。

表单控件

input 控件

语法：

1
<input  type=“控件类型”>

在上面的语法中，<input> 标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input> 标记还可以定义很多其他的属性，其常用属性如下表所示。

属性 属性值 描述
type text
password
radio
checkbox
button
submit
reset
image
hidden
file		 单行文本输入框
密码输入框
单选按钮
复选框
普通按钮
提交按钮
重置按钮
图像形式的提交按钮
隐藏域
文件域
name 由用户自定义 控件的名称
value 由用户自定义 input 控件中的默认文本值
size 正整数 input 控件在页面中的显示宽度
readonly readonly 该控件内容为只读（不能编辑修改）
disabled disabled 第一次加载页面时禁用该控件（显示为灰色）

文本输入框

1
2
<!-- 文本输入框 -->
用户名：<input type="text" maxlength="6"   name="username"  value="1234" >

效果演示：
用户名：

属性:

  • maxlength：设置文本输入框最多能输多少字符
  • readonly=”readonly”：设置文本输入框为只读（不能编辑）
  • disabled+”disabled”：控件属于非激活状态
  • name=”username”：给输入框设置名称
  • value：设置默认显示的值

密码输入框

1
2
<!-- 密码输入框 -->
密码：<input type="password" name="pwd" value="123">

效果演示：
密码：

属性用法与文本输入框的用法一样。

单选按钮

1
2
3
4
<!-- 单选按钮 -->
性别：
<input type="radio" name="xb"  checked="checked" value="nan">男
<input type="radio" name="xb" value="nv" >女

效果演示：
性别：男 女

注意：实现单选效果一定要给控件设置相同的名称

属性：

  • checked=”checked”：设置默认选中项

多选控件

1
2
3
4
兴趣爱好：
<input type="checkbox" checked="checked">抽烟
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">烫头

效果演示：
兴趣爱好：抽烟喝酒烫头

属性：

  • checked=”checked”：设置默认选中项

图片上传控件

1
2
头像：
<input type="file">

效果演示：
头像：

表单提交按钮

1
2
<!-- 表单提交按钮 -->
<input type="submit"  value="登录">

效果演示：

普通按钮

1
2
<!-- 普通按钮 -->
<input type="button"  value="普通按钮">

效果演示：

注意：该按钮不能进行表单提交。通常和 js 代码配合使用。

重置按钮

清空所有表单数据，恢复到初始状态

1
2
<!-- 重置按钮 -->
<input type="reset">

效果演示：

图片按钮

1
2
<!-- 图片按钮 -->
<input type="image" src="按钮.jpg">

注意：该控件也可以进行表单的提交。

select 控件

在 HTML 中，要想制作下拉菜单，就需要使用select控件。

下拉列表

1
2
3
4
5
6
7
8
9
出生地：
省：
<select multiple="multiple">
    <option>山东</option>
    <option>山西</option>
    <option>河南</option>
    <option>河北</option>
    <option  selected="selected">北京</option>
</select>

效果演示：
出生地：省：

属性：

  • selected=”selected”：设置默认选中项
  • multiple=”multiple”：可以实现多选效果

下拉列表分组显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
市(区)：
<select id="name">
    <optgroup label="北京市">
        <option>西城区 </option>
        <option>东城区</option>
        <option>海淀区</option>
        <option>昌平区</option>
    </optgroup>
    <optgroup label="上海市">
        <option>黄浦区 </option>
        <option>松江区</option>
        <option>浦东新区</option>
        <option>静安区</option>
    </optgroup>
</select>

效果演示：
市(区)：

textarea 控件

如果需要输入大量的信息，就需要用到 <textarea></textarea> 标记。通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下：

1
2
3
<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

属性：

  • cols：相当于宽度
  • rows：相当于高度
1
2
3
自我介绍：
<textarea cols="20" rows="5">
</textarea>

效果演示：
自我介绍：

组合表单

fieldset 用于表单分组。
语法：

1
2
3
<fieldset>
    <legend>用户注册</legend>
</fieldset>

举例：

1
2
3
4
5
6
7
<fieldset>
    <legend>用户注册</legend>
        用户名：<input type="text" maxlength="6"   name="username"  value="" >
        <br>
        <br>
        密码：<input type="password" name="pwd" value="123">
</fieldset>

效果演示：

用户注册 用户名：

密码：

表单补充

判断网址

1
2
3
<!-- 判断网址 -->
<input type="url">
<input type="submit">

效果演示：

判断邮箱

1
2
3
<!-- 判断邮箱 -->
<input type="email">
<input type="submit">

效果演示：

日期控件

1
2
3
<!-- 日期控件 -->
<input type="date">
<input type="submit">

效果演示：

时间控件

1
2
3
<!-- 时间控件 -->
<input type="time">
<input type="submit">

效果演示：

带有 spinner 控件的数字字段

1
2
3
<!-- 带有 spinner 控件的数字字段 -->
<input type="number">
<input type="submit">

属性：

  • step：表示每次加减的值（即步长）

效果演示：

带有 slider 控件的数字字段

1
2
3
<!-- 带有 slider 控件的数字字段 -->
<input type="range">
<input type="submit">

属性：

  • max：最大值
  • min：最小值
  • step：每次加减的值（即步长）

效果演示：

定义拾色器

1
2
3
<!-- 定义拾色器 -->
<input type="color">
<input type="submit">

效果演示：

标签语义化

  • 标签语义化概念：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

  • 标签语义化意义：

1: 网页结构合理

2: 有利于 SEO :和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；

3: 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）;

4: 便于团队开发和维护.

  • 标签语义化（注意事项）

1：尽可能少的使用无语义的标签 div 和 span ；

2：在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u 等，改用 css 设置。

4：需要强调的文本，可以包含在 strong 或者 em 标签中。strong 默认样式是加粗（不要用b），em 是斜体（不用 i ）；

总结

我的 html 基础学习是跟着传智播客2016年的视频课程学习的，基础就这些内容，特别整理下来以加深记忆。内容或多或少会与网络上的内容有些许出入。总的来说 html 很简单，很容易上手。但这只是基础，html + css + javascript 才能做出真正漂亮的网页。

千里之行，始于足下，接下来的路，加油！