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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/LOVEGOOD1/article/details/108536818

智能推荐

18.12.5_linux installer for c2000 cgt-程序员宅基地

文章浏览阅读142次。dumpbin使用查看lib导出函数https://blog.csdn.net/ermen2009/article/details/17964813_linux installer for c2000 cgt

android kt框架,GitHub - bitxiao/KtArmor-MVVM: Android快速开发框架, KtArmor 寓意着 为Android 赋予战斗装甲, 方便开发者快速进行An...-程序员宅基地

文章浏览阅读479次。前言学习了Kotlin有一段时间了, 每次写项目/Demo的时候, 总是用到网络请求、MVP、MVVM、常用工具类、通用自定义View, 索性把这些整合到一起, 搭成一个Android的脚手架——KtArmor. 框架是我个人经验的积累, 总结. 如有不妥, 望各位大佬指出.什么是KtArmor ?KtArmor 寓意着 为Android 赋予战斗装甲, 方便开发者快速进行Android 开发。节..._android kt

linux共享动态库中同名对象重复析构-两次析构或多次析构引起的double free解决办法_全局变量跨dll 调用导致析构double free-程序员宅基地

文章浏览阅读2.1k次。原文链接:http://chengxu.org/p/541.htmlLinux 平台下的共享动态库,一般都是通过选项“-fPIC”编译出来。有些应用程序需要链接多个共享库,此时如果在这些共享库中存在相同作用域范围的同名静态成员变量,那么当程序访问完静态成员变量结束析构时,由于内存的 double free 会导致程序 core dump;该问题是由于 Linux 编译器的缺陷造成的,本文就此问题进..._全局变量跨dll 调用导致析构double free

Golang 常见设计模式之装饰模式_goland 装饰模式-程序员宅基地

文章浏览阅读2.4k次,点赞4次,收藏3次。尽管 Go 语言中装饰模式没有 Python 中应用的那么广泛,但是它也有其独到的地方。接下来就一起看下装饰模式在 Go 语言中的应用。_goland 装饰模式

Orthogonal Convolutional Neural Networks_orthognal convolution neural-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏2次。文章目录概主要内容符号说明Y=Conv(K,X)Y=Conv(K,X)Y=Conv(K,X)的俩种表示Y=KX~Y=K\tilde{X}Y=KX~Y=KXY=\mathcal{K}XY=KXkernel orthogonal regularizationorthogonal convolutionWang J, Chen Y, Chakraborty R, et al. Orthogonal ..._orthognal convolution neural

Windows7 Server 2008 下安装Oracle 10g提示“程序异常终止,发生未知错误”的解决方法_oracle10程序异常终止一 windows 2008-程序员宅基地

文章浏览阅读7.3k次。我的Oracle 10g版本是10.2.0.1.0,选择高级安装,提示“程序异常终止,发生未知错误”。1.修改Oracle 10G\database\stage\prereq\db\refhost.xml在 后面添加 2.到install目录中找到oraparam.ini文件,把#Windows=4.0,5.0,5.1,5.2修_oracle10程序异常终止一 windows 2008

随便推点

123456_使用fdisk对磁盘进行分区时,lvm分区的类型为-程序员宅基地

文章浏览阅读694次。1_使用fdisk对磁盘进行分区时,lvm分区的类型为

内存管理之程序内存分布-程序员宅基地

文章浏览阅读377次。在多任务操作系统中的每一个进程都运行在一个属于它自己的内存沙盘中。这个沙盘就是虚拟地址空间(virtual address space)。1 32位虚拟内存布局在32位模式下虚拟地址空间总是一个4GB的内存地址块。这些虚拟地址通过页表(page table)映射到物理内存,页表由操作系统维护并被处理器引用。每一个进程拥有一套属于它自己的页表,但是还有一个隐情。只要虚拟地址被使用,那么...

Bootstrap3 全局样式_bootstrap3 权限选择样式-程序员宅基地

文章浏览阅读423次。Bootstrap 3 的目标是简洁、直观、强悍的前端开发框架,让 Web 开发变得更好、更快、更强壮,我们有必要先了解一下 Bootstrap 底层结构的关键部分。 HTML5文档类型Bootstrap使用了HTML5特定的元素和CSS属性,在使用Bootstrap的时候,所有HTML文档的第一行代码必须是 <!DOCTYPE html>。如:<!DOCTYPE h..._bootstrap3 权限选择样式

linux管道举例理解_linux中的管道举例-程序员宅基地

文章浏览阅读4.7k次,点赞24次,收藏89次。linux管道举例理解一、管道的定义:“|”二、查找2.1统计当前目录下有多少个文件2.2查看当前目录下的前n(3)个文件2.3查看wang.txt文件包含i的字符行2.4查看内存使用情况2.5查询进程三、更改一、管道的定义:“|”一般我们在进行操作的时候,命令很多,但我们只想要其中一部分,那么就可以使用管道了。管道是Linux中很重要的一种通信方式,是把一个前一个结果的输出直接连接到另一个..._linux中的管道举例

hdu 1686 kmp Oulipo-程序员宅基地

文章浏览阅读499次。http://acm.hdu.edu.cn/showproblem.php?pid=1686对于我这种刚开始学的人来说 刚开始我觉的很难 不会做哦 但是看了一下别人的一下子就知道了 还是不是太熟了 需要加强练习哦 呵呵 其实这是一道简单的kmp 的算法 只要你在index_kmp() 将 i 的值一直小于N 就可以了 还是看看我具体

实战篇:Linux 安装 Oracle 11GR2 数据库保姆级教程_liunxoracle11gr2-程序员宅基地

文章浏览阅读2.1w次,点赞204次,收藏603次。没接触Linux的朋友不用害怕,跟着本篇文章一步步操作,安装Oracle如喝水般简单且标准。_liunxoracle11gr2

推荐文章

热门文章

相关标签