首页 > 其他分享 >HTML网页制作初学习

HTML网页制作初学习

时间:2025-01-19 13:28:46浏览次数:3  
标签:网页 标签 标题 HTML 字体 Document 制作 回车

文章目录


前言:博主的编译软件为VSCode,编译软件不同或许写的方法不同

1.认识HTML

HTML 指的是超文本标记语言( HyperText Markup Language)的简写
HTML 不是一种编程语言,而是一种描述网页的标记语言
HTML文档也叫做 web 页面

2.标签介绍

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

单标签:一般用于声明一些属性 eg: 告诉计算机其为HTML文件

双标签:决定范围 eg: 文章的本体在双标签中间,可以在双标签中间修改

UTF-8: 万国码,即可以输出所有国家的文字

GB2312: 中国码,只能输出中国字

title 版头内容 在双标签中间空格处修改

body 页面内容 在双标签中间空格处修改

(想输出上述框架的话,不需要背,在编译器中输入英文!+回车即可)

2.1换行标签

br+回车 单标签
因为在编辑器中的换行,在浏览器中展示一个空格

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <br>
</body>
</html>

2.2水平线标签

hr+回车运行后可以显示一个水平线, 单标签

(下面标签不在写回车,但都要回车)

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <hr>
</body>
</html>

2.3标题标签

h1–h6 字体加大加粗,且单独成行。字体逐渐变小,直到h6停止变小

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>标题</h1>
   <h2>标题</h2>
   <h3>标题</h3>
   <h4>标题</h4>
   <h5>标题</h5>
   <h6>标题</h6>
</body>
</html>

运行结构如下:
上述代码的运行结果

2.4字体标签

em 字体倾斜 双标签 不能独占一行
strong 字体加粗 双标签 不能独占一行

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <em>内容写在这里</em>
   <strong>内容写在这里</strong>
</body>
</html>

运行结果如下:
上述代码的运行结果

2.5段落标签

p 双标签,标签里的内容是一个自然段,每个段落之间自动换行

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <p>我家很温暖 </p>
</body>
</html>

2.6图片标签

img

  • src:路径( ./代表当前目录
    …/代表上级目录)

  • alt:对图片补充说明,当图片加载不出来时显示

  • hieght/width:对图片长/宽的规定(注:其后要加单位px)

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <img src="路径写这" alt="补充说明写这">
</body>
</html>

2.7超链接

a 可以跳转到另一个链接或其他(eg:tel:电话 mailto 邮箱)

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <a href="链接或其他写这里">备注写这</a>
</body>
</html>

2.8 锚链接

锚链接,点击内容可以跳转到指定位置
下面代码的意思是 点5跳转到3

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <h1>1</h1>
  <h1>2</h1>
  <h1 id="name"></h1id>3</h1>
  <h1>4</h1>
  <a href="#name"><h1>5</h1></a>  <!-- 跳转到3    #代表id-->
</body>
</html>

2.9特殊符号

  • 空格 &nbsp

  • 大于号 &gt(可以直接从键盘上输)

  • 小于号 &lt(可以直接从键盘上输)

  • 引号 &quot(后加的内容全在引号内,可以直接从键盘上输)

  • 版权符号 &copy

  • 注释,解释说明,取消的话,重复一下上述操作 ctrl+/
    注意:书写时遵循 W3C标准:
    1 标签名称,属性名称必须小写
    2标签必须严格嵌套,并且必须闭合,即使是空元素标签也必须闭合
    3 属性值必须用引号引起来

如果有错误,欢迎指正。

标签:网页,标签,标题,HTML,字体,Document,制作,回车
From: https://blog.csdn.net/2403_89957632/article/details/145241360

相关文章

  • 举例说明HTML5的标签meter的用法
    HTML5的<meter>标签用于表示一个范围内的测量值或者一个分数值。这个标签特别适用于表示像磁盘使用量、查询结果的相关性或者产品评分这样的数据。<meter>标签通常用于表示已知范围的测量值,例如0到100。<meter>标签有以下几个重要的属性:value:表示当前的测量值,必须在mi......
  • HTML5的output是非常棒的一个标签,你对它有了解吗?
    HTML5中的<output>标签确实是一个很有用的元素,它主要用于在网页上表示计算结果或脚本的输出。以下是对<output>标签的详细解释:一、定义与用法<output>标签是HTML5中新增的元素,用于定义不同类型的输出,特别是当需要展示脚本计算或处理后的结果时。这个标签通常与<form>表单元素一......
  • 你有用过HTML5的track标签吗?说说它的运用场景有哪些?
    HTML5的<track>标签是HTML5中新引入的元素,主要用于为HTML5视频(<video>)和音频(<audio>)元素提供文本轨道,比如字幕、标题、说明、章节导航、元数据等。这些信息可以显示在视频或音频的播放界面上,从而增强用户的观看或听音体验。<track>标签的运用场景主要包括:字幕和标题:这是<track>......
  • 请使用纯HTML制作一个进度条
    当然,以下是一个简单的纯HTML进度条示例:<!DOCTYPEhtml><html><head><title>纯HTML进度条</title><style>.progress-bar{width:100%;background-color:#f3f3f3;border-radius:13px;......
  • 前端——Html+CSS
    目录CSS引入方式颜色表达方式CSS选择器去掉超链接的下划线路径表示行高和首行缩进常见标签布局标签flex布局表单标签表单项标签 改变鼠标指针的样式表格标签div{box-sizing:border-box;}CSS引入方式具体有3种引入方式,语法如下表格所示:名称语法描述示例......
  • 基于 HTML5 Canvas 制作一个精美的 2048 小游戏--day2
    为了使2048游戏的设计更加美观和用户友好,我们可以进行以下几项优化:改善颜色方案:使用更温馨的颜色组合。添加动画效果:为方块的移动和合并添加渐变效果。优化分数显示:在分数增加时使用动画效果。以下是改进后的代码示例:1.CSS样式(style.css)body{display:flex;......
  • 前端小案例——网页井字棋
        前言:我们在学习完了HTML、CSS和JavaScript之后,就会想着使用这三个东西去做一些小案例,不过又没有什么好的案例让我们去练手,本篇文章就提供里一个案例——网页井字棋。✨✨✨这里是秋刀鱼不做梦的BLOG✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN......
  • 黑马前端学习笔记(1)HTML5篇
    第一天目录第一天1、HTML定义2、标签语法3、HTML基本骨架4、标签的关系5、注释6、排版标签①标题标签②段落标签③换行和水平线标签④文本格式化标签7、图像标签①基本使用②属性8、路径①相对路径-从当前文件位置出发查找目标文件②绝对路径-从盘符出发查找......
  • HTML应用指南:利用GET请求获取星巴克门店数据
    本篇文章,我们将探究GET请求的实际应用,我们使用Python的requests库通过GET请求抓取星巴克门店信息。星巴克作为全球知名的咖啡连锁品牌,其门店分布广泛,获取这些门店的信息对于数据分析、市场研究以及商业决策都具有重要意义。我们将以获取全国的星巴克门店为例,详细讲解请求的构......
  • HTML应用指南:利用GET请求获取全国特斯拉充电桩位置
    随着电动汽车的普及,充电基础设施的建设变得至关重要。作为电动汽车领域的先驱,特斯拉不仅在车辆技术创新上持续领先,还积极构建广泛的充电网络,以支持其不断增长的用户群体。为了提升用户体验和服务质量,开发人员和数据分析师经常需要访问特斯拉充电桩的位置信息,并将其集成到导航......