HTML快速入门 、 基本标签用法 、 Form标点及控件 、 CSS 概述案例

最新推荐文章于 2020-11-27 19:10:17 发布
最新推荐文章于 2020-11-27 19:10:17 发布
阅读量357 收藏
点赞数
分类专栏： 第五阶段案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36345864/article/details/106107597
版权

Top

NSD Devweb DAY01

  1. 案例1：HTML 文档片段
  2. 案例2：为HTML页面添加图像和链接
  3. 案例3：为 HTML文档添加表格
  4. 案例4：为 HTML 页面添加导航目录
  5. 案例5：创建表单
  6. 案例6：使用 CSS 样式

1 案例1：HTML 文档片段

1.1 问题

  1. 【参见COOKBOOK】

1.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：HTML标题

HTML 标题是通过<h1> - <h6> 标签来定义的

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

实例演示如图-1所示：

图-1

步骤二：HTML段落

HTML 段落是通过标签 <p> 来定义的

 
  1. <p>这是一个段落。</p>

实例演示如图-2所示：

图-2

步骤三：HTML链接

HTML 链接是通过标签 <a> 来定义的.

 
  1. <a href="http://www.baidu.com">这是一个链接使用了 href 属性</a>

实例演示如图-3所示：

图-3

2 案例2：为HTML页面添加图像和链接

2.1 问题

  1. 创建 html 文档
  2. 使用图像和链接元素为页面添加内容

2.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：HTML实例

1)图像链接实例

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>hello world</title>
  6. </head>
  7. <body>
  8.  
  9. <p>创建图片链接:
  10. <a href="http://www.baidu.com">
  11. <img border="10" src="smiley.gif" alt="HTML 百度" width="32" height="32"></a></p>
  12.  
  13. <p>无边框的图片链接:
  14. <a href="http://www.baidu.com">
  15. <img border="0" src="smiley.gif" alt="HTML 百度" width="32" height="32"></a></p>
  16.  
  17. </body>
  18. </html>

2)锚点实例：

 
  1. <p>
  2. <a href="#C4">查看章节 4</a>
  3. </p>
  4.  
  5. <h2>章节 1</h2>
  6. <p>这边显示该章节的内容……</p>
  7.  
  8. <h2>章节 2</h2>
  9. <p>这边显示该章节的内容……</p>
  10.  
  11. <h2>章节 3</h2>
  12. <p>这边显示该章节的内容……</p>
  13.  
  14. <h2><a name="C4">章节 4</a></h2>
  15. <p>这边显示该章节的内容……</p>
  16.  
  17. <h2>章节 5</h2>
  18. <p>这边显示该章节的内容……</p>

步骤二：实例演示

1)图像链接如图-6所示：

图-4

此时，点击图片超链接会把用户带到百度的首页。

2)锚点实例如图-7所示：

题-5

此时点击查看章节4，会把用户带到章节4位置

步骤三：HTML实例解析

1)HTML链接语法：

 
  1. <a href="url">链接文本</a，target="_blank">

使用<a>元素创建超级链接

href 属性描述了链接的目标。

使用 target 属性，可以定义被链接的文档在何处显示。

2)HTML链接锚点使用方式：

 
  1. 定义锚点:
  2. <a name=" anchorname1">锚点一</a>
  3. 链接到锚点，在锚点名前加上#：
  4. <a href="# anchorname1">...</a>

锚点是文档中某行的一个记号，用于链接到文档中的某个位置

3)HTML图像语法：

 
  1. <img src="url" alt="some_text">

使用<img>元素创建图像

在页面上显示图像，需要使用源属性（src）。源属性的值是图像的 URL 地址，即存储图像的位置。

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

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

3 案例3：为 HTML文档添加表格

3.1 问题

  1. 【参见COOKBOOK】

3.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：HTML实例

 
  1. <table border="1">
  2. <tr>
  3. <td>第一行,第一列</td>
  4. <td>第一行,第二列</td>
  5. </tr>
  6. <tr>
  7. <td>第二行,第一列</td>
  8. <td>第二行,第二列</td>
  9. </tr>
  10. </table>

步骤二：实例演示如图-8所示：

图-6

步骤三：HTML实例解析

1)创建表格：

表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），

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

2)<table>元素常用属性

width，设置表格宽度

height，设置表格高度

align，设置表格对齐方式(left|center|right)

border，设置表格边框宽度

cellpadding，设置内边距(单元格边框与内容之间的距离)

cellspacing，设置外边距(单元格之间的距离)

bgcolor，设置表格背景颜色

3)<tr>元素常用属性

align，设置水平对齐方式(left|center|right)

valign，设置垂直对齐方式(top|middle|bottom)

4)<td>元素常用属性

align，设置水平对齐方式(left|center|right)

valign，设置垂直对齐方式(top|middle|bottom)

width，设置宽度

height，设置高度

colspan，设置单元格跨列

rowspan，设置单元格跨行

步骤四：不规则表格HTML实例

 
  1. <body>
  2.  
  3. <h4>单元格跨两格:</h4>
  4. <table border="1">
  5. <tr>
  6. <td>Name</td>
  7. <td colspan="2">Telephone</td>
  8. </tr>
  9. <tr>
  10. <td>Bill Gates</td>
  11. <td>555 77 854</td>
  12. <td>555 77 855</td>
  13. </tr>
  14. </table>
  15.  
  16. <h4>单元格跨两列:</h4>
  17. <table border="1">
  18. <tr>
  19. <td>First Name:</td>
  20. <td>Bill Gates</td>
  21. </tr>
  22. <tr>
  23. <td rowspan="2">Telephone:</td>
  24. <td>555 77 854</td>
  25. </tr>
  26. <tr>
  27. <td>555 77 855</td>
  28. </tr>
  29. </table>
  30.  
  31. </body>

步骤五：实例演示如图-9所示：

图-7

步骤六：HTML实例解析

设置单元格 <td> 的跨行或者跨列属性

1)跨列：colspan，水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数

2)跨行：rowspan，垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数。

4 案例4：为 HTML 页面添加导航目录

4.1 问题

  1. 使用列表元素为 html 文档添加导航目录

4.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：HTML实例

1)有序列表

 
  1. <h4>编号列表：</h4>
  2. <ol>
  3. <li>Apples</li>
  4. <li>Bananas</li>
  5. <li>Lemons</li>
  6. <li>Oranges</li>
  7. </ol>
  8.  
  9. <h4>大写字母列表：</h4>
  10. <ol type="A">
  11. <li>Apples</li>
  12. <li>Bananas</li>
  13. <li>Lemons</li>
  14. <li>Oranges</li>
  15. </ol>

2)无序列表

 
  1. <h4>圆圈列表：</h4>
  2. <ul style="list-style-type:circle">
  3. <li>Apples</li>
  4. <li>Bananas</li>
  5. <li>Lemons</li>
  6. <li>Oranges</li>
  7. </ul>
  8.  
  9. <h4>正方形列表：</h4>
  10. <ul style="list-style-type:square">
  11. <li>Apples</li>
  12. <li>Bananas</li>
  13. <li>Lemons</li>
  14. <li>Oranges</li>
  15. </ul>

3)嵌套列表

 
  1. <ul>
  2. <li>Coffee</li>
  3. <li>Tea
  4. <ul>
  5. <li>Black tea</li>
  6. <li>Green tea</li>
  7. </ul>
  8. </li>
  9. <li>Milk</li>
  10. </ul>

步骤二：实例演示：

1)有序列表如图-7所示：

图-7

2)无序列表如图-8所示：

图-8

3)嵌套列表如图-9所示：

图-9

步骤三：HTML实例解析

1)有序列表：

<ol>元素编写有序列表，<ol> 元素中只能包含具体的列表项元素 <li>

有序列表常用属性type：

作用：指定列表项前面标识的类型

取值：

1：按数字方式排列，默认值

A：按照大写英文字母方式排列

a：按照小写英文字母排列

I ：按大写罗马字符方式排列

i：按小写的罗马字符排列

2)无序列表：

<ul>元素表示无序列表，<ul> 元素中只能包含具体的列表项元素 <li>

无序列表常用属性type：

作用：指定列表项前面标识的类型

取值：

disc 默认值，实心原点

circle ：空心原点

square：实心方块

none：不显示任何标识

3)嵌套列表：

列表中允许再出现列表

被嵌套的列表只能出现在<li></li>中

无序列表中可以嵌套有序列表，有序列表中也可以嵌套无序列表

5 案例5：创建表单

5.1 问题

  1. 【参见COOKBOOK】

5.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：form元素解析

1)表单作用：用于接收用户的数据并提交给服务器

2)表单中的两个要素：form 元素、表单控件（用于与用户进行交互的元素）

3)表单元素标记：使用<form></form>元素创建表单

4）表单常用属性：

action：指定提交给服务器的处理程序的地址

method：指出表单数据提交的方式，取值为get或post

enctype：指定表单数据进行编码的方式，即允许将什么样的数据提交给服务器

name：表单名称

 
  1. 表单使用表单标签 <form> 来设置:
  2. <form>
  3. .
  4. input 元素
  5. .
  6. </form>

步骤二：HTML表单控件-文本域

1)文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

 
  1. <form>
  2. First name: <input type="text" name="firstname"><br>
  3. Last name: <input type="text" name="lastname">
  4. </form>

2)浏览器显示如图-10所示：

图-10

3)常用属性如下：

border-collap

name：定义控件名称

value：值

maxlength 最大输入字符

readonly 只读

placeholder 提示占位符

2)密码字段

步骤三：HTML表单控件-密码字段

1)密码字段通过标签<input type="password"> 来定义:

 
  1. <form>
  2. Password: <input type="password" name="pwd">
  3. </form>

2)浏览器显示如图-11所示：

图-11

3)常用属性如下：

border-collap

name：定义控件名称

value：值

maxlength 最大输入字符

readonly 只读

placeholder 提示占位符

步骤四：HTML表单控件-单选框、复选框

1)<input type=" radio "> 定义了单选框. 用户需要从若干给定的选择中选取一个选项。

 
  1. <form>
  2. <input type="radio" name="vehicle" value="Bike">I have a bike<br>
  3. <input type="radio" name="vehicle" value="Car">I have a car
  4. </form>

2)浏览器显示如图-12所示：

图-12

3)<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

 
  1. <form>
  2. <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  3. <input type="checkbox" name="vehicle" value="Car">I have a car
  4. </form>

4)浏览器显示如图-13所示：

图-13

5)常用属性如下：

name:除定义名称之外，还有分组作用，一组的单元按钮和复选框，name属性必须一致，提交时会把复选框中的内容按照数组进行提交

value值，提交前定义，当前用户选择的时候，会将该控件value值提交给服务器

checked设置预选中，该属性无值

步骤五：HTML表单控件-按钮

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

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

 
  1. <form name="input" action="html_form_action.php" method="get">
  2. Username: <input type="text" name="user">
  3. <input type="submit" value="Submit">
  4. </form>

2)浏览器显示如图-14所示：

图-14

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

3)<input type="reset">定义了重置按钮

当用户单击reset重置按钮时，表单的内容会被清空

 
  1. <form name="input" action="html_form_action.php" method="get">
  2. Username: <input type="text" name="user">
  3. <input type="submit" value="Submit">
  4. <input type="reset" value="reset">
  5. </form>

4)浏览器显示如图-15所示：

图-15

5)<input type="button">定义了普通按钮：

 
  1. <form action="">
  2. <input type="button" value="Hello world!">
  3. </form>

6)浏览器显示如图-16所示：

图-16

属性：value ：按钮上的文本

步骤六：HTML表单控件-隐藏域和文件选择框

1)隐藏域

作用：想提交给服务器但不想给用户看的数据要放在隐藏域中

语法：<input type=”hidden”>

属性：

name：控件名称

value：控件的值

6)文件选择框：

作用：提交文件

语法：<input type=”file”>

属性：

name:控件名称

6 案例6：使用 CSS 样式

6.1 问题

【参见COOKBOOK】

  1. 使用内联样式为<p>元素设置样式
  2. 使用内部样式表为<h1>元素设置样式
  3. 使用外部样式表为<h2>元素设置样式

6.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：使用内联样式为<p>元素设置样式

1)样式定义在 HTML 元素的标准属性 style 里

2)CSS语法:

只需要将分号隔开的一个或者多个属性/值对作为元素的style 属性的值

属性和属性值之间用：连接

多对属性之间用；隔开

3)要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。下例展示如何改变段落的颜色和左外边距

 
  1. <body>
  2. <p style="color:red;margin-left:20px">段落文本（p）：使用内联样式</p>
  3. </body>

4)实例演示如图-17所示：

图-17

步骤二：使用内部样式表为<h1>元素设置样式

1)样式表规则位于文档头元素中的 <style> 元素内

文档的 <head> 元素内添加 <style> 元素

2)在 <style> 元素中添加样式规则

可以定义多个样式规则

每个样式规则有两个部分：选择器和样式声明

3)选择器：决定哪些元素使用这些规则

4)样式声明：一对大括号，包含一个或者多个属性/值对

5)当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表，实例如下所示：

 
  1. <html>
  2. <head>
  3. <style>    
  4.         h1 {color:blue;}
  5. </style>        
  6. </head>
  7. <body>
  8. <h1>一级标题（h1）：使用内部样式表</h1>
  9. </body>
  10. </html>

实例演示如图-18所示：

图-18

步骤三：使用外部样式表为<h2>元素设置样式

1)创建一个单独的样式表文件用来保存样式规则

一个纯文本文件，文件后缀为 .css

该文件中只能包含样式规则

样式规则由选择器和样式声明组成

 
  1. h2 {
  2. color:green;
  3. background-color:silver;
  4. }

2) 在需要使用该样式表文件的页面上，使用<link> 元素链接需要的外部样式表文件，

在文档的 <head> 元素内添加 <link> 元素：

 
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="myStyle.css" />
  4. </head>
  5. <body>
  6. <h2>二级标题（h2）：使用外部样式表</h2>
  7. </body>
  8. </html>

实例演示如图-19所示：

图-19

我爱DC
关注
专栏目录
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4764
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
CSS基础知识整理
菜鸟博客
11-05 2600
目录一、css基础1.选择器1.1标签选择器1.2类选择器1.3id选择器1.4后代选择器1.5子代选择器1.6并集选择器1.7交集选择器1.8hover伪类选择器1.9通配符选择器1.10结构伪类选择器1.10.1查找单个1.10.2查找多个1.10.3 根据类型查找1.11 类与id的区别1.11链接伪类选择器1.12焦点伪类选择器1.13属性选择器2.字体文本相关样式2.1字体样式2.1.1字体大小font-size2.1.2字体粗细font-weight2.1.3字体样式font-style2.1.
几个HTML5入门学习的好例子(代码)
10-16
HTML5将慢慢地变成网络的领军者，希望对有兴趣有朋友有所帮助
HTML5基础实例（三）
Pitbull2014的博客
06-19 254
不知道从哪说起那就一段一段代码的说吧 实例一：iframe框架显示 　　写一个这样的网页： 分析： 1.需要三个链接，一个是默认的百度链接，默认显示在那个框里，另外；两个是点击跳转的超链接。 2.需要iframe框架分割 <!DOCTYPE html> <html lang="en"> <head> <meta ch...
html 基础实例
fuhoo的专栏
07-12 411
 http://www.w3.org">            段落实例     标题1     标题2     标题3     标题4     标题5     标题6     左对齐的水平线     居中的水平线     右对齐的水平线     第一段落     第二段落     第三段落     第一个换行第二个换行第三个换行        预格
HTML5基础小结（二）——标签小例
dawuafang
10-27 118
随篇博客的思维导图，继续： 二，看下标签的使用，这里看几个小例子（效果图不再给出）： 1，结构标签的使用，这里来看一个页面的布局： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; /* *{border:1px solid red;height:20px} 所有的...
HTML5基础 实例
weixin_30252709的博客
10-25 78
<!DOCTYPE html><html>　　<head> 　　　　<title>李清照简介</title>　　</head>　　<body><h1>人物简介</h1><br/><strong>李清照</strong><em>（1084年...
DIV+CSS学习笔记总结篇
qianduan666a的博客
07-29 914
DIV+CSS学习笔记总结篇 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： 第一、梳理知识架构 负责内容的HTML 负责外观的css（层叠样式表） 负责行为
HTML基础（六）---列表和表单标签
BearStarX的博客
10-30 944
一、列表标签 列表标签分为三种类型：无序列表、有序列表、自定义列表 1、无序列表标签与属性 无序列表是以&lt;ul&gt;...&lt;/ul&gt;表示的，具有三种无序列表类型情况： 第一、&lt;ul type="disc"&gt; 是实心圆点，默认的情况 第二、&lt;ul type="circle"&gt;是空心原点   第三、&lt;ul type="squa
前端与移动开发入门基础html完结版
Denisedan的博客
07-15 6657
前端与移动开发 PC端 主要是电脑端,主要是网页开发 移动端 泛指可移动的设备(手机 平板) 可以开发运行在移动端的页面 如手机app 小程序 认识网页 网页主要由文字 图片 链接 音频 视频 动画等元素构成 常见的浏览器及内核(了解) IE浏览器(内核trident) Edge浏览器(同ie) 谷歌浏览器(内核chromium/blink) Safari浏览器(内核webkit) ...
一个简单的HTML5小例子
07-25
对于一个初学者来说，最消耗时间的地方就是基础，因此希望通过此例子的一些注释讲解能让初学者更快的了解html5
html5 入门代码及案例
04-02
大一老师给的代码，一学期的东西，前端入门，打好基础
HTML5的时钟实例（初级者）
04-27
HTML5的时钟实例，适合于HTML5的初级者学习，直接打开就可以看到效果
HTML5从入门到精通-中文最新教程-含代码案例
12-04
HTML5从入门到精通 中文最新教程 含html5代码案例 从浅到深，一步步把领你到html5的殿堂 让你深入了解html5,早日学习到新一代web,移动编程技术 HTML5从入门到精通 中文最新教程 含html5代码案例
HTML常用标签的使用
qq_22242915的博客
01-25 416
hn标题标签 包含h1、h2、h3、h4、h5、h6，n从1到6逐渐变小，超过6按照6显示 特点：加粗、加黑显示，单独占用一行，与上下两行有一定的行间距 hr水平线标签 size属性：水平线的高度，单位像素 noshade属性：没有阴影，取值：noshade，表示显示纯色 hr /> hr size="5" /> hr noshade="noshade" /> f
html常用的标签及属性
mab_1994的博客
11-27 425
html常用的标签及属性 网页的格式为:html head body 三大部分组成 标签 html标签： 完全闭合 和 自闭和 html元素是否换行 分为： 块元素和内联元素（行级元素） 浏览器的默认渲染模式：是从左-右 从上-下 h标签： … 文字由大到小 加粗 是块元素 hr标签：水平线，是块元素 br标签：强制换行标签 p标签：段落标签，用来文字分段，是块元素 文本格式化标签： 1.b 加粗 行级元素 2.strong 加粗
html常用标签（form标签）
weixin_30868855的博客
09-17 351
一、form标签 form标签是html标签中非常重要的一个标签。常用于注册、登录页面的使用。 <form action="提交地址" method="提交方式"> </form> 注：method的值有两个。get（默认值）和post。get数据安全性没有post高。post的速度没有get快。 form常用的元素： 1、文本框 <input ty...
HTML5初学----基础代码案例汇总
你好，明天，，的博客
03-11 1977
正在学习HTML5，边学边更吧，基础代码案例汇总。我这里以学校的官网为网页的主题。 1. 网页基本框架（包含article、aside、section、header、footer标签） 注：二级下拉菜单通过JS函数代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
HTML入门（二）-常用标签使用
GAN_3的博客
07-04 276
在HTML入门(一)阐述了HTML的基本结构，此处针对body内的HTML元素做简要概述 <body> 元素包含了可见的页面内容 一、是什么 用于描述HTML文档，“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签 二、HTML元素属性介绍 1.如何通过元素描述文档信息？ 一是 通过元素内容 二是 通过元素属性为HTML元素添加额外的附加信息，例如图像标签需要使用src指向图像地址 2.什么是元素属性 属性是
HTML+CSS标签参考手册：快速入门与实战指南
作者李刚通过丰富的实例，深入浅出地阐述了这两种语言的使用方法。全书分为上下两篇，共计19章，涵盖了从基础到进阶的各种标签和属性。 上篇HTML标记详解，从第1章到第11章，主要介绍HTML的基本概念和各种标签。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值