如何使用html制作网页_html网页制作-程序员宅基地

技术标签：前端 html

如何使用html制作网页

一、html简介

1.1概念

HTML即HyperText Mark-up Language ，意思是超文本标记语言。HTML不是一种编程语言，而是一种标记语言。超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。html文档也叫 Web页面，其实就是一个网页。如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

1.2 开发工具

电脑中自带的记事本可以用于编写html，但是为了编写代码的效率和代码的可读性，我们通常要借助一些开发工具。我们常用的代码编辑工具很多，如SublimeText,WebStorm和VSCode等。本文以VSCode作为示范。

二、html的基础语法

2.1基本结构

HTML文本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容，它的标记语法是以“<”和">"，主要有两种形式的标签，分别是双标签（<标签名字>标签内容<标签名字>）和单标签（<标签名字/>）。
标签中可以添加属性，格式为：<标签名属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>
html文本的基本结构如下，在编辑器中可以通过"！"+回车键直接导出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.2注释

html文档代码中可以插入注释，注释是对代码的说明和解释。
格式为：<!-- 注释内容-- >

<!-- 里面是注释嗷 -->

2.2head头部设置

head标签作用于网页的头部，它的内容不会在正文中显示出来，主要完成对当前网页的各种设置
head中主要包含以下几种标签
在这里插入图片描述

三、文本标签

常用的文本标签主要有如下几种
在这里插入图片描述
接下来我们通过一个案例来观察以上几种文本标签的使用方法和实际效果如何
html文本如下

<!DOCTYPE html>
<html lang="en"> <head>
 <meta charset="UTF-8">
 <title>⽂本标题示例</title>
</head> <body>
 <h3>文本标签使用案例</h3>
 <h1>标题一</h1>
 <h2>标题二</h2>
 <h3>标题三</h3>
 <h4>标题四</h4>
 <h5>标题五</h5>
 <h6>标题六</h6>
 <i>斜体</i> <br/>
 <em>强调斜体</em> <br/>
 <b>加粗</b><br/><br/>
 <strong>强调加粗</strong><br/>
 <del>删除线</del><br/>
 <u>下划线</u> <br/><br/>
</body>
</html>

实际网页效果为：
在这里插入图片描述
（我们可以将这段html文本写在记事本中，并通过修改.txt文件的后缀，改为.html，即可通过网页来观察以上功能）

四、格式化标签

常用的格式化标签主要包括以下几种
在这里插入图片描述
接下来针对以上功能进行演示

<!DOCTYPE html>
<html lang="en"> <head>
 <meta charset="UTF-8">
 <title>格式化标签案例演示</title>
</head> <body>
 <h3>HTML介绍</h3>
 <p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式
 统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
 <p>“超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互
 关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。</p>
 <hr/>
 <!-- 列表标签 -->
日程表
 <ul>
 <li>看书</li>
 <li>看书</li>
 <li>看书</li>
 <li>玩游戏</li>
 </ul>
 <ol type="a">
 <li>看书</li>
 <li>看书</li>
 <li>看书</li>
 <li>玩游戏</li>
 </ol>
 <dl>
 <dt>问：一加一等于几</dt>
 <dd>答：不知道</dd>
 <dt>问：HTML?</dt>
 <dd>答：超文本标记语言</dd>
 <dt>问：树上有些什么</dt>
 <dd>答：金苹果</dd>
 </dl>
 <div>aaa</div>
 <div>bbb</div>
 <span>aaaa</span><span>bbbb</span>
</body>
</html>

它的实际显示效果如下：
在这里插入图片描述

五、图像标签

在HTML网页中插入一张图片，使用img标签，他是一个单标签： img
主要包含以下几种常用属性
src：图片名及url地址
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度
border：边框线粗细
演示实例：

<!DOCTYPE html>
<html lang="en"> <head>
 <meta charset="UTF-8">
 <title>Document</title>
</head> <body>
 <h3>图像标签实例</h3>
 <img src="./你的名字.jpg" title="图片" width="300" />
 <img src="./你的名字.jpg" width="280" border="2" />
</body>
</html>

实际效果：
在这里插入图片描述

六、超链接标签a

href="链接目标url地址"显示文字
a标签的属性：
href: 必须，指的是链接跳转地址
target: 表示链接的打开方式：
_blank 新窗口
_parent 父窗口
_self 本窗口（默认）
_top 顶级窗口
framename 窗口名
title：文字提示属性（详情）
使用锚点链接时跳转地址为#加上标签的id

七、表格标签

在这里插入图片描述
实例演示：


<!DOCTYPE html>
<html lang="en"> <head>
 <meta charset="UTF-8">
 <title>Document</title>
</head> <body>
 <h3>HTML标签实例--表格标签</h3>
 
 <table border="1" width="700" cellspacing="0" cellpadding="4">
 <caption><h3>学生信息表</h3></caption>
 <tr>
 <th>学号</th>
 <th>姓名</th>
 <th>年龄</th>
 <th>班级</th>
 </tr>
 <tr>
 <td>1001</td>
 <td>张三</td>
 <td>22</td>
 <td>python04</td>
 </tr>
 <tr>
 <td>1002</td>
 <td>李四</td>
 <td>22</td>
 <td rowspan="2">python04</td>
 </tr>
 <tr>
 <td>1003</td>
 <td colspan="2">王五</td>
 <!--<td>22</td>-->
 <!--<td>python04</td>-->
 </tr>
 </table>
</body>
</html>

实际显示效果如下
在这里插入图片描述

本文链接：https://blog.csdn.net/LOVEGOOD1/article/details/108536818

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

这些年职业爬虫师教会我的技巧（一）-程序员宅基地

文章浏览阅读309次。阅读文本大概需要 4 分钟。随着 Python 越来越火爆爬虫这个行业也逐渐被人所重视起来，但市面上教的一些爬虫的技巧大多是一些基础类的知识，然而在实际的爬虫工作中你会遇..._爬虫师

A required class was missing while executing org.apache.maven.plugins:maven-war-plugin:2.1.1:war-程序员宅基地

文章浏览阅读5k次。完美解决方案:http://stackoverflow.com/questions/18442753/a-required-class-was-missing-while-executing-org-apache-maven-pluginsmaven-warthis happened to me too after adding the version tag, that was mi..._a required class was missing while executing org.apache.maven.plugins:maven-

常见的电平标准 USB/TTL/RS232/RS485_usb电平标准-程序员宅基地

文章浏览阅读1.9w次，点赞13次，收藏75次。RS232电平或者说串口电平:指得都是计算机9针串口的电平，采用负逻辑：－15v ~ －3v 代表1 ，＋3v ~ ＋15v 代表0 。RS485电平和RS422电平：由于两者均采用差分传输（平衡传输）的方式，所以它们的电平方式，一般有两个引脚 A,B 发送端 AB间的电势差U为UB-UA: ＋2 ～＋6v : 1 ，－2 ～－6v : 0 ，接收端 AB间的电势差U为：大于＋200_usb电平标准

mysql+pivot+列转行_sql的行转列(PIVOT)与列转行(UNPIVOT)-程序员宅基地

文章浏览阅读1.5k次。CREATE TABLE [StudentScores]([UserName] NVARCHAR(20), --学生姓名[Subject] NVARCHAR(30), --科目[Score] FLOAT, --成绩)INSERT INTO [StudentScores] SELECT ..._mysql pivot

机器学习概论1——简介_机器学习的完整性-程序员宅基地

文章浏览阅读407次。机器学习概论1——简介_机器学习的完整性

【达梦数据库】数据库测试-程序员宅基地

文章浏览阅读4.2k次，点赞2次，收藏21次。数据库测试是依据数据库设计规范对软件系统的数据库结构、数据表及其之间的数据调用关系进行的测试。本文主要介绍了两项常用的测试基准 TPC-C 和 TPC-H ，并通过达梦数据库 DM8 分别进行了数据库测试。..._数据库测试

随便推点

STM32G030F6P6 芯片实验 (一)_stm32g030f6p6 晶振-程序员宅基地

文章浏览阅读878次。搞片小系统版: 套 STM32F103C8T6小系统板格式. M0+, 试试感觉. _stm32g030f6p6 晶振

云上更安全？亚马逊云科技宣布将持续加大在中国区域安全合规领域投入-程序员宅基地

文章浏览阅读5.3k次。编辑 | 宋慧出品 | CSDN云计算新冠疫情对我们工作产生了深远的影响，远程在线的工作与交流愈加普及，国内更多公司在推出居家办公的“混合办公”模式。不过，这也给了网络攻击更多的机会，CSDN看到，有多个安全领域的报告都显示，针对身份和边缘的攻击与安全风险正在不断增加，云上安全备受关注。近日，亚马逊云科技宣布将持续加大在中国区域安全合规领域的投入，在为客户提供安全合规的基础设施和云服务基础上，将与光环新网及西云数据共同加速安全合规服务和功能在中国的落地，并进一步加强与亚马逊云科技合作伙伴

java只有值传递没有引用传递_普通数据类型为什么不能进行引用传递-程序员宅基地

文章浏览阅读191次。java中的参数传递不管是基本数据类型还是引用数据类型只有值传递，没有引用传递，也就是说Java中参数传递的是内容，而不是引用。下面看几个例子。例1：/* 1. 基本数据类型的参数传递 2. */package ch.demo2;public class TestDemo1 { public static void main(String[] args) { int a = 5..._普通数据类型为什么不能进行引用传递

linux 下多线程错误 undefined reference to `sem_init'_undefined reference to `sem_post-程序员宅基地

文章浏览阅读7.3k次，点赞7次，收藏8次。原文地址::http://www.cnblogs.com/stli/archive/2010/03/11/1683823.htmlundefined reference to `sem_init'undefined reference to `sem_post'undefined reference to `sem_wait'编译选项需要加入一个多线程g_undefined reference to `sem_post

UDS(三)网络层时间参数_uds时间参数-程序员宅基地

文章浏览阅读1.1w次，点赞15次，收藏163次。网络层定义了N_Ar、N_As、N_Br、N_Bs、N_Cr、N_Cs六个时间参数。网络层在检测到错误的时间传递至上层使用者1.当N_As 超时时，即发送方没有及时发送出N_PDU，系统将放弃信息的接收并传递<N_Result> = <N_TIMEOUT_A>的N_USData.comfirm指示2.当N_Ar超时时，即接收方没有及时发送出N_PDU，系统将放弃信息的接收并传递<N_Result> = <N_TIMEOUT_A>的N_USData.co_uds时间参数

软件架构场景之—— BFF：如何处理好微服务之间千丝万缕的关系？_bff:如何处理好微服务之间千丝万缕的关系?-程序员宅基地

文章浏览阅读1.4k次。业务场景之前设计的一个供应链系统中，它包含了商品、销售订单、加盟商、门店运营、门店工单等服务，涉及了各种用户角色，比如总部商品管理、总部门店管理、加盟商员工、门店人员等，而且每个部门的角色还会进行细分。而且这个系统中还包含了两个客户端 App：一个面向客户，另一个面向公司员工和加盟商此时，整个供应链系统的架构如下图所示上图中的网关层主要负责路由、认证、监控、限流熔断等工作路由：所有的请求都需要通过网关层进行处理，网关层再根据 URI 将请求指向对应的后台服务，如果同一个服务存在多个服_bff:如何处理好微服务之间千丝万缕的关系?