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

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

智能推荐

艾美捷Epigentek DNA样品的超声能量处理方案-程序员宅基地

文章浏览阅读15次。空化气泡的大小和相应的空化能量可以通过调整完全标度的振幅水平来操纵和数字控制。通过强调超声技术中的更高通量处理和防止样品污染，Epigentek EpiSonic超声仪可以轻松集成到现有的实验室工作流程中，并且特别适合与表观遗传学和下一代应用的兼容性。Epigentek的EpiSonic已成为一种有效的剪切设备，用于在染色质免疫沉淀技术中制备染色质样品，以及用于下一代测序平台的DNA文库制备。该装置的经济性及其多重样品的能力使其成为每个实验室拥有的经济高效的工具，而不仅仅是核心设施。

11、合宙Air模块Luat开发：通过http协议获取天气信息_合宙获取天气-程序员宅基地

文章浏览阅读4.2k次，点赞3次，收藏14次。目录点击这里查看所有博文本系列博客，理论上适用于合宙的Air202、Air268、Air720x、Air720S以及最近发布的Air720U（我还没拿到样机，应该也能支持）。先不管支不支持，如果你用的是合宙的模块，那都不妨一试，也许会有意外收获。我使用的是Air720SL模块，如果在其他模块上不能用，那就是底层core固件暂时还没有支持，这里的代码是没有问题的。例程仅供参考！..._合宙获取天气

EasyMesh和802.11s对比-程序员宅基地

文章浏览阅读7.7k次，点赞2次，收藏41次。1 关于meshMesh的意思是网状物，以前读书的时候，在自动化领域有传感器自组网，zigbee、蓝牙等无线方式实现各个网络节点消息通信，通过各种算法，保证整个网络中所有节点信息能经过多跳最终传递到目的地，用于数据采集。十多年过去了，在无线路由器领域又把这个mesh概念翻炒了一下，各大品牌都推出了mesh路由器，大多数是3个为一组，实现在面积较大的住宅里，增强wifi覆盖范围，智能在多热点之间切换，提升上网体验。因为节点基本上在3个以内，所以mesh的算法不必太复杂，组网形式比较简单。各厂家都自定义了组_802.11s

线程的几种状态_线程状态-程序员宅基地

文章浏览阅读5.2k次，点赞8次，收藏21次。线程的几种状态_线程状态

stack的常见用法详解_stack函数用法-程序员宅基地

文章浏览阅读4.2w次，点赞124次，收藏688次。stack翻译为栈，是STL中实现的一个后进先出的容器。要使用 stack，应先添加头文件include<stack>，并在头文件下面加上“ using namespacestd;"1. stack的定义其定义的写法和其他STL容器相同, typename可以任意基本数据类型或容器：stack<typename> name;2. stack容器内元素的访问..._stack函数用法

2018.11.16javascript课上随笔（DOM）-程序员宅基地

文章浏览阅读71次。<li> <a href = "“#”>-</a></li><li>子节点：文本节点（回车），元素节点，文本节点。不同节点树：　　节点（各种类型节点）childNodes:返回子节点的所有子节点的集合，包含任何类型、元素节点（元素类型节点）：child。node.getAttribute(at...

随便推点

layui.extend的一点知识第三方模块base 路径_layui extend-程序员宅基地

文章浏览阅读3.4k次。//config的设置是全局的layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录}).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录}); //你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）layui.exten_layui extend

5G云计算：5G网络的分层思想_5g分层结构-程序员宅基地

文章浏览阅读3.2k次，点赞6次，收藏13次。分层思想分层思想分层思想-1分层思想-2分层思想-2OSI七层参考模型物理层和数据链路层物理层数据链路层网络层传输层会话层表示层应用层OSI七层模型的分层结构TCP/IP协议族的组成数据封装过程数据解封装过程PDU设备与层的对应关系各层通信分层思想分层思想-1在现实生活种，我们在喝牛奶时，未必了解他的生产过程，我们所接触的或许只是从超时购买牛奶。分层思想-2平时我们在网络时也未必知道数据的传输过程我们的所考虑的就是可以传就可以，不用管他时怎么传输的分层思想-2将复杂的流程分解为几个功能_5g分层结构