如何使用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

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

智能推荐

已解决（selenium操作火狐浏览器报错）TypeError: init() got an unexpected keyword argument ‘firefox_options‘-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏18次。已解决（selenium操作火狐浏览器报错）TypeError: __init__() got an unexpected keyword argument ‘firefox_options‘_typeerror: __init__() got an unexpected keyword argument 'chrome_options

python方差_Python编程：方差、标准差、均方差、均方根值、均方误差、均方根误差...-程序员宅基地

文章浏览阅读315次。python实现代码# -*- coding: utf-8 -*-import mathdef get_average(records):"""平均值"""return sum(records) / len(records)def get_variance(records):"""方差反映一个数据集的离散程度"""average = get_average(records)return sum(..._pycharm方差计算代码

jmeter接口测试实例（五）对cookies的自动管理，实现登录后修改用户信息_jmeter中post请求如何更改每次的用户名-程序员宅基地

文章浏览阅读902次。一、前提：cookie是保存在本地，用来记录用户信息，最典型的作用是判断用户是否已经登录。如果一个接口，需要用户登录后，才能进行操作，如下，修改用户信息那么这时候，就需要用到cookie去识别这个登录的用户，因为要修改的是这个登录的用户的信息。二、使用1、jmeter.properties 中将CookieManager.save.cookies 设置为true。完成后重启jmet..._jmeter中post请求如何更改每次的用户名

python新建项目没有venv_pycharm配置venv虚拟环境-程序员宅基地

文章浏览阅读7.5k次，点赞2次，收藏2次。虚拟环境的好处：搭建独立的python运行环境，不与其他产生冲突虚拟环境有助于包的管理和防止版本冲突3.删除卸载方便虚拟环境的搭建：1.进入python的Scripts下，执行：pip3 install virtualenv2.选择建立虚拟环境的文件夹，我这边是直接在D盘software下面创建了一个virtualenv，如图：image.png3.创建虚拟环境：virtualenv --no-s..._pycharm没有venv怎么办

M1芯片的Mac在开发iOS项目时遇到的问题汇总（模拟器无法运行，Cocoapods错误等）_oc cocospods 安装依赖库之后不能使用模拟器了-程序员宅基地

文章浏览阅读2.3k次。--pod install时报错，且错误提示中有“ffi”字眼，提示错误：/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.3/lib/ffi/library.rb:275: [BUG] Bus Error at 0x00000001042fc000 ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.arm64e-darwin20]解决方案：juejin.cn/post/698064…--pod repo upd_oc cocospods 安装依赖库之后不能使用模拟器了

编辑器VSCode使用心得-程序员宅基地

文章浏览阅读540次。工欲善其事必先利其器，趁手的工具会使我们开发事半功倍。市面上的编辑器我用过许多，编辑器使用经历Notepad++，（开源）这个应该是最轻量级的吧，查看代码还好，编辑代码就算了官网地址：https://notepad-plus-plus.org/Brackets，（开源）这个也不错，github-star：30k了，上次发布版本是6月..._vscode nextick

随便推点

西部数码mysql怎么用织梦_[原创]织梦程序(DeDeCms)常见问题集锦-程序员宅基地

文章浏览阅读95次。前言：织梦程序是最知名的cms程序，使用广泛,但很多朋友对织梦还不太熟悉,通过工单分析得知,经常容易出现本文中的问题,本次统一整理出来,希望对新手朋友有帮助,本文写的非常详细,请仔细阅读,一、描述：“dedecms错误警告：连接数据库失败，可能数据库密码不对或数据库服务器出错”如图：分析：用织梦程序制作的站点做迁移服务器后容易出现这个问题,原因是程序中设置的数据库连接信息有误连接不到数据库,解决方..._西部数码支不支持织梦的程序

免安装mysql启动3534错误处理_mysql 免安装版本启动时 3534出错_mysql-程序员宅基地

文章浏览阅读295次。上午在win7下安装MYSQL,只到“net start mysql”这一步报错:3534的错误：于是在百度中搜索关键字“mysql服务无法启动3534”。参考以下两个链接中的方法，解决了3534启动失败的问题：mysql服务无法启动3534错误。http://jingyan.baidu.com/article/219f4bf7e978fcde442d38a9.htmlhttp://blog.cs..._免安装mysql启动失败

评测了10款画流程图软件，这4款最好用！（完全免费）_好用的流程图软件免费-程序员宅基地

文章浏览阅读5.1w次，点赞58次，收藏295次。最近在做项目和复习的时候，用了不少流程图软件给我帮了大忙，所以今天就来分享分享你在网上搜索一下流程图软件，能找到很多很多：但这些软件多数并不是专门绘制流程图的软件，它可能是一些思维导图软件、或者说一些产品交互原型图软件，使用时或多或少有些麻烦。而且，普遍这些软件缺点也很多，比如：只有在线版：ProcessOn（https://www.processon.com）导出功能收费：迅捷流程图软件体积庞大：VISIO就没有一款简单易用、绿色免费的流程图软件吗？阿虚花了不少时间，挨着_好用的流程图软件免费

在CentOS6.9安装Azkaban3.50.0_centos6.9 azkaban-程序员宅基地

文章浏览阅读1.4k次。cd /data/install_pkgwget https://github.com/azkaban/azkaban/archive/3.50.0.tar.gztar -zxvf 3.50.0.tar.gzvi /data/install_pkg/azkaban-3.50.0/azkaban-common/src/main/java/azkaban/utils/EmailMessage..._centos6.9 azkaban

Java项目基于ssm+vue.js的学生宿舍维修服务平台附带文章和源代码设计说明文档ppt-程序员宅基地

文章浏览阅读586次，点赞23次，收藏30次。博主介绍：CSDN特邀作者、985计算机专业毕业、某互联网大厂高级全栈开发程序员、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序、前端、python等技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导、面试辅导、简历修改。精彩专栏推荐订阅2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐。

ultralytics的YOLOv8改为自用版本_from ultralytics.utils.plotting import annotator, -程序员宅基地

文章浏览阅读944次。由于需要用pyqt给yolov8做一个界面，而ultralytics一层嵌一层，不是很好用，所以对它的这个源码进行精简，具体代码我放到了这里，ultralytics使用的版本是8.0.54。具体代码如下，需要根据自己的情况来修改data的配置文件以及权值文件，在代码的49和50行。_from ultralytics.utils.plotting import annotator, colors, save_one_box modul