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

目录

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.mfbz.cn/a/29356.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于机器学习算法:朴素贝叶斯和SVM 分类-垃圾邮件识别分类系统(含Python工程全源码)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python 环境安装pytesseract注册百度云账号 模块实现1. 数据模块2. 模型构建3. 附加功能 系统测试1. 文字邮件测试准确率2. 网页测试结果 工程源代码下载其它资料下载 前言 本项目采用朴素贝叶斯和支持向量机&#xff08;S…

MySQL-SQL视图详细

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️努力不一定有回报&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xf…

原型模式(七)

不管怎么样&#xff0c;都要继续充满着希望 上一章简单介绍了抽象工厂模式(六), 如果没有看过,请观看上一章 一. 原型模式 引用 菜鸟教程里面的原型模式介绍: https://www.runoob.com/design-pattern/prototype-pattern.html 原型模式&#xff08;Prototype Pattern&#xf…

Camera | 11.瑞芯微摄像头采集图像颜色偏绿解决笔记

前言 在实际调试基于瑞芯微平台的camera过程中&#xff0c;发现显示的图片发绿&#xff0c; 现在把调试步骤分享给大家&#xff1a; 1、修改iq文件 sdk中位置&#xff1a; external/camera_engine_rkaiq/iqfiles/isp21/ov13850_ZC-OV13850R2A-V1_Largan-50064B31.xml【现在…

QT基础教程之一创建Qt项目

QT基础教程1创建Qt项目 根据模板创建 打开Qt Creator 界面选择 New Project或者选择菜单栏 【文件】-【新建文件或项目】菜单项 弹出New Project对话框&#xff0c;选择Qt Widgets Application 选择【Choose】按钮&#xff0c;弹出如下对话框 设置项目名称和路径&#xff0c;…

javaScript蓝桥杯---用什么来做计算

目录 一、介绍二、准备三、目标四、代码五、完成 一、介绍 古以算盘作为计算工具。算盘常为木制矩框&#xff0c;内嵌珠子数串&#xff0c;定位拨珠&#xff0c;可做加减乘除等运算。站在前人的肩膀上&#xff0c;后人研究出计算器&#xff0c;便利了大家的生活&#xff0c;我…

element-plus布局排版问题总结(更新ing)

文章目录 el-container空隙修改app组件 el-header容器空隙检查前端修改el-headerel-container el-container空隙 源码-更改了容器的显示&#xff0c;占满屏幕 <template><div class"common-layout"><el-container><el-header><el-row cl…

SpeechGen:用提示解锁语音语言模型(Speech LM)的生成能力

论文链接&#xff1a; https://arxiv.org/pdf/2306.02207.pdf Demo: https://ga642381.github.io/SpeechPrompt/speechgen.html Code: https://github.com/ga642381/SpeechGen 引言与动机 大型语言模型 &#xff08;LLMs&#xff09;在人工智能生成内容&#xff08;AIGC…

微服务技术简介

微服务技术简介 服务架构的演变微服务架构的常见概念微服务常见的解决方案Spring CloudSpring Cloud Alibaba微服务技术对比常用的微服务组件 微服务架构图 服务架构的演变 单体架构&#xff1a;当一个系统业务量很小的时候&#xff0c;将业务的所有功能集中在一个项目中开发&…

STM32速成笔记—串口通信

文章目录 一、什么是串口通讯二、串口通讯有什么用三、STM32的串口通信四、串口通信相关概念4.1 波特率4.2 全双工和半双工4.3 同步通信和异步通信 五、硬件连接六、串口通讯程序配置6.1 使能串口时钟和GPIO时钟6.2 初始化GPIO6.3 初始化串口参数6.4 使能串口6.5 串口接收中断6…

用python写网络爬虫

第二章 数据抓取 首先 &#xff0c; 我们会介绍一个叫 做Firebug Lite 的浏览器扩展&#xff0c; 用 于检查网页 内容 &#xff0c; 如 果你有一些网络开发背景的话&#xff0c; 可能 己经对该扩展十分熟悉 了 。 然后 &#xff0c;我们会介绍三 种抽取网 页数据的 方法 &…

java【抽象类与接口】

抽象类与接口 1 抽象类1.1 定义与使用1.2 抽象类和抽象方法使用原则 2 接口2.1 定义2.2 使用规则 3. JDK中内置接口3.1 Comparable接口3.2 Cloneable接口 抽象类与接口的对比 前言&#xff1a;如果强制要求子类必须覆写一些方法&#xff0c;则就会用到抽象类和抽象方法 1 抽象类…

使用 MATLAB 进行气象激光雷达图像分析(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

STM32——01-开发软件Keil5及STM32CubeMX的安装

1.1开发环境的安装 编程语言&#xff1a;C语言 需要安装的软件有两个&#xff1a;Keil5和STM32CubeMX 安装 安装包&#xff08;不需要太新&#xff0c;以 MDK324 为例&#xff0c;最新的 MDK327 有问题&#xff09; 安装过程一路下一步即可&#xff08;建议不要安装在 C …

2023-06-09:什么是Redis事务?原理是什么?

2023-06-09&#xff1a;什么是Redis事务&#xff1f;原理是什么&#xff1f; 答案2023-06-09&#xff1a; Redis中的事务是以一组命令的形式出现的&#xff0c;这些命令被认为是最小的执行单位。事务可以保证在一个单独独立的隔离操作中执行所有命令&#xff0c;而且所有命令…

深度研究微软的资产负债表和财务状况以及未来投资价值

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 微软股票的关键指标 猛兽财经认为&#xff0c;微软公布的2023财年第三季度财务业绩&#xff0c;有三个关键指标值得投资者关注。 第一个关键指标是利息收入。微软的利息收入目前已经同比增长了44%&#xff0c;从2022财年第…

从搭建hadoop开始学习大数据中分而治之的MapReduce(伪集群模式)

环境准备 首先需要将如下四个必要的文件下载到计算机&#xff08;已经附上了下载地址&#xff0c;点击即可下载&#xff09;。 Vmware Workstation 17.x 【官方的下载地址】 CentOS-7-x86_64-Minimal-2009【阿里云镜像站下载地址】 openjdk-8u41-b04-linux-x64-14_jan_2020【开…

踏上极速向未来之旅!——2023年量化科技嘉年华·专场回顾

2023年6月2日—3日&#xff0c;“2023量化科技嘉年华”在上海世博中心召开&#xff0c;这场为期两天的量化科技盛会&#xff0c;多方位呈现了量化科技创新成果&#xff0c;吸引了众多关注。 在嘉年华的第二天&#xff0c;多场主题论坛同步进行。 由华锐技术主办的“极速向未来…

ChatGPT 4 的 6 个最佳使用场景

作者&#xff1a;SYDNEY BUTLER 译者&#xff1a;明明如月 无论是在 ChatGPT 中还是通过 API&#xff0c;对 OpenAI 的 GPT-4 模型的访问比 GPT-3.5 限制更多。这意味着你需要慎重考虑在何种情况下使用 GPT-4&#xff0c;并选择性地将最适合的任务交给它&#xff0c;以便让其发…

短视频seo源代码部署步骤

一、 部署短视频SEO矩阵系统源代码&#xff0c;您需要遵循以下步骤&#xff1a; 准备服务器环境 首先&#xff0c;您需要准备一个服务器环境来托管源代码。您可以选择云服务器&#xff08;例如AWS&#xff0c;阿里云等&#xff09;或自己的私人服务器。 安装所需软件 在服务器…