Web网页制作期末复习(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接

news2024/12/23 5:26:03

目录

HTML5介绍

HTML5的DOCTYPE声明 

HTML基本骨架

标题标签

段落、换行、水平线

图片

图片路径*

超链接


HTML5介绍

HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以.html结尾

HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如:<html>

标签有两种表现形式:

  1. 双标签,例如:<html></html>
  2. 单标签,例如:<img>

HTML5的DOCTYPE声明 

DOCTYPE是document type(文档类型)的缩写。<!DOCTYPE html>是H5的声明位于文档的最前面,处于标签之前。它是网页必备的组成部分,避免浏览器的怪异模式。

 

 

HTML基本骨架

html标签:

定义了HTML文档。这个标签限定了文档的开始点和结束点。

head标签:

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。

body标签:

body元素定义文档的主题。body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

title标签:

  1. 可定义文档的标题。
  2. 它显示在浏览器窗口的标题栏或者状态栏上。
  3. <title>标签是<head>标签中唯一必须要求包含的东西,就是说写head一定要写title。
  4. <title>的增加有利于SEO优化。

SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求。

meta标签:

meta标签用来描述一个HTML网页文档的属性,关键词等,例如:charset="utf-8"是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式,通常使用utf-8

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

标题标签

标题标签:<h1>~<h6>

正确使用标题,请确保将HTML标题标签只用于标题,不要仅仅是为了生成粗体或者大号的文本而使用标题。正确使用标题有益于SEO。

段落、换行、水平线

承载段落文本信息使用段落标签:<p></p>

<p>这是一个段落</p>
<p>这是另一个段落</p>

换行:<br>

换行标签为单标签。

<p>这个<br>段落<br>演示了换行的效果</p>

水平线:<hr/>

用于在HTML页面中创建水平线,也是单标签。

属性:

  1. color:设置水平线的颜色
  2. width:设置水平线的宽度
  3. size:设置水平线的高度
  4. align:设置水平线的对齐方式(默认居中),可选值left/right

图片

<img>标签定义HTML页面中的图像

<img src="" alt="" title="" width="" height="">

注意: <img>是单标签,不需要进行闭合操作。

属性:

  1. src:路径(图片地址与名字)
  2. alt:规定图像的替代文本
  3. width:规定图像的宽度
  4. height:规定图像的高度
  5. title:鼠标悬停在图片上给予提示

图片路径*

绝对路径:绝对路径是电脑的盘符存储与访问的具体地址。

E:\Windows\1.jpg

相对路径:两者相对关系,两者在同一路径下可以直接访问。

  1. 子级关系:/
  2. 父级关系:../
  3. 同级关系:./(可以省略不写)
<img src="1.jpg" alt="">
<img src="/1.jpg" alt="">
<img src="../1.jpg" alt="">

 网络地址:图片具体的网络地址。

 

超链接

描述

HTML使用标签<a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,我们可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<a href="ulr">链接文本</a>

属性

在标签<a>中使用了href属性来描述链接的地址,在默认情况下,链接将以以下形式出现在浏览器中:

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。
  2. 访问过的链接为紫色并带有下划线。
  3. 点击链接时,链接显示为红色并有下划线。

注意:这些效果都可以通过CSS样式进行修改。


end 


 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/654329.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在提交代码时有哪些注意事项

分享 10 种适合初学者的技术&#xff0c;这些技术将帮助您立即编写更好的代码。因此&#xff0c;如果您准备好将您的编码技能提升到一个新的水平&#xff0c;请继续阅读&#xff01; 1. 从计划开始 编写更好代码的最佳方法之一是从计划开始。在开始编码之前&#xff0c;请花几…

SQL详细处理流程.md

连接器&#xff1a;管理连接&#xff0c;权限验证解析器&#xff1a;词法以及语法分析优化器&#xff1a;生成执行计划&#xff0c;选择合适索引执行器&#xff1a;操作引擎获取结果存储引擎&#xff1a;存储数据&#xff0c;提供读写接口

iterm2 ssh免密码登录

不需要下载其他插件&#xff0c;使用脚本 目录 操作步骤如下&#xff1a; 实际举例如下&#xff1a; 1.编写sh文件 2.编辑sh文件 3.进入iterm2&#xff0c;打开profiles&#xff0c;edit profiles 4.验证 扩展 expect脚本 操作步骤如下&#xff1a; 在你电脑你想编辑的…

阿里云国际站:阿里云服务器安全性如何?有哪些安全措施和防护机制?

阿里云国际站&#xff1a;阿里云服务器安全性如何&#xff1f;有哪些安全措施和防护机制&#xff1f;   阿里云服务器安全性简介   作为全球领先的云计算服务提供商&#xff0c;阿里云始终注重保障用户数据安全。在面对各种网络攻击和安全威胁时&#xff0c;阿里云积极构建…

mysqldump 数据备份

使用实例 使用方法 Usage: mysqldump [OPTIONS] database [tables] OR mysqldump [OPTIONS] --databases [OPTIONS] DB1 [DB2 DB3…] OR mysqldump [OPTIONS] --all-databases [OPTIONS] For more options, use mysqldump --help OPTION通常是&#xff1a;-u 用户名 -p …

【计算机网络自顶向下】计算机网络从0到1全篇总结-2023电子科技大学期末考试

相关术语 URI&#xff1a;Uniform Resource Identifier 统一资源标识符&#xff0c;指的是一个资源 URL&#xff1a;Uniform Resource Location 统一资源定位符&#xff0c;URI的子集&#xff0c;用地址定为的方式指定一个资源 URN&#xff1a;Uniform Resource Name 统一资…

基于微信小程序新疆特色产品团购系统设计与实现+第四稿+文档

博主介绍&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 项目名称 基于微信小程序新疆特色产品团购系统设计与实现第四稿文档 视频演示 视频去哪了呢&#xff1f;_哔哩哔哩_bilibili 系统介绍 2.3.1 主要功能描述 在…

常见技术场景

常见技术场景 1.单点登录这块怎么实现的 1.1 概述 单点登录的英文名叫做&#xff1a;Single Sign On&#xff08;简称SSO&#xff09;,只需要登录一次&#xff0c;就可以访问所有信任的应用系统 在以前的时候&#xff0c;一般我们就单系统&#xff0c;所有的功能都在同一个…

我准备蓝桥杯的这一年

我准备蓝桥杯的这一年 文章目录 我准备蓝桥杯的这一年起步和目标确定渐入佳境焦虑疲惫&#xff0c;一天又一天国赛我来力总结 我将我这段 流水账分为四个阶段。谨以此文&#xff0c;祭奠我这一年来的焦虑、白发~ &#xff0c;最终也取得了预期的成绩。不知未来再看此章会作何感…

hadoop基础

FileSystem使用 核心类 org.apache.hadoop.fs.FileSystem 文件系统类 抽象类 //静态方法创建对象 public static FileSystem newInstance(URI uri,Configuration conf,String user) /*参数一 URI 分布式文件系统 HDFS的资源地址 NN地址 hdfs://linux01:8020参数二 Configu…

Unity常见框架探索-ET框架探索

简介 ET框架是类ECS的一个Unity前后端框架 论坛地址为&#xff1a;https://et-framework.cn Git地址为&#xff1a;https://github.com/egametang/ET 预备知识 Unity程序集的使用 接入流程 本文将会以7.2版本进行分析。所以直接clone github上的仓库&#xff0c;将工程导…

1743_MATLAB 2-D绘图小结

全部学习汇总&#xff1a; GreyZhang/g_matlab: MATLAB once used to be my daily tool. After many years when I go back and read my old learning notes I felt maybe I still need it in the future. So, start this repo to keep some of my old learning notes servral …

【网络协议详解】——知识点复习(期末不挂科版)

课本&#xff1a; 目录 &#x1f552; 1. 概述&#x1f558; 1.1 GNS3&#x1f558; 1.2 Wireshark &#x1f552; 2. PPP协议&#x1f552; 3. VLAN技术&#x1f552; 4. STP技术&#x1f552; 5. IPV6&#x1f552; 6. 路由表&#x1f552; 7. RIP协议&#x1f552; 8. OSPF…

Jenkins pipeline 中 checkout 代码

pipeline 中 具有checkout 功能的脚本命令如下 git branch: "master", url: "https://gitee.com/liuboliu/******.git"完整的脚本命令如下 pipeline {agent anystages {stage(checkout) {steps {git branch: "master", url: "https://gite…

I2C中为什么线与?为什么要有上拉电阻?

1、为什么采用漏极开路&#xff1f; 首先&#xff0c;连接到 I2C 上的设备是开漏输出的。以漏极开漏输出&#xff08;OD&#xff09;为例&#xff0c;是指将输出级电路结构改为一个漏极开路输出的 MOS 管。这样做的好处在于&#xff1a; 防止短路。可以实现“线与”逻辑&#…

移动DICT项目是什么?

DICT项目 我们运营商的伙伴&#xff0c;很多人都知道我们的DICT&#xff0c;但是大家知不知道什么是DICT。你想一想&#xff0c;所谓的DICT&#xff0c;就是指的大数据技术与IT和CT的深度融合。 实际上&#xff0c;DICT的可以拆分成三个词&#xff0c; 第一个DT&#xff0c…

腾讯服务器CentOS Stream 8安装redis详情的步骤

tencent服务器安装的系统版本创建一个新的文件夹 /athena/redis mkdir /athena cd /athena mkdir redis1、切换到 “redis” 目录&#xff1a; cd /athena/redis2、使用 YUM 包管理器安装 GCC、C 和 Make 软件包&#xff1a; yum install gcc-c make -y这条命令将使用 YUM …

C++【set 和 map 学习及使用】

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; C修行之路 &#x1f383;操作环境&#xff1a; Visual Studio 2019 版本 16.11.17 文章目录 &#x1f307;前言&#x1f3d9;️正文1、预备知识1.1、关联式容器1.2、键值对1.3、树型结构的关联式容器 2、set2.…

网工内推 | 网络运维专场,弹性工作,14薪

01 南凌科技股份有限公司 招聘岗位&#xff1a;网络运维工程师 职责描述&#xff1a; 1、负责及时响应客户需求、做好客户报障接收&#xff0c;受理与记录工作&#xff0c;及时做好值班记录与故障交接&#xff1b; 2、通过网管平台实时监控客户线路及机房设备的运行状态、性能…

mNGS 02:SnakeMake流程简介

<~生~信~交~流~与~合~作~请~关~注~公~众~号生信探索> 流程代码在&#xff1a;https://jihulab.com/BioQuest/SnakeMake-mNGS 或https://github.com/BioQuestX/SnakeMake-mNGS 教程链接在&#xff1a;https://doc.bioquest.cn/mngs mNGS Pipeline summary Metagenomic nex…