梅科尔HTML培训第一次作业

最新推荐文章于 2024-07-18 15:09:01 发布
最新推荐文章于 2024-07-18 15:09:01 发布
阅读量480 收藏
点赞数
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49786709/article/details/122781443
版权

HTML

HTML标签

  • 是由尖括号包围的关键词，如<HTML>；
  • 通常是成对出现的，比如<p></p>

HTML元素

  • “HTML标签”和"HTML元素"通常都是描述相同的意思。但是严格来说，一个HTML元素包含了开始标签与结束标签
    如: <p>梅科尔工作室</p>
  • <br>为换行。

HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br>就是没有关闭标签的空元素
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br/>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使<br> 在所有浏览器中都是有效的，但使用 <br/>其实是更长远的保障。

HTML结构

<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
</body>

  • 只有body的部分会在网页中显示

HTML标题

  • HTML标签通过<h1>~<h6>来进行定义的。
  • h1对应的字体字号最大，随着数字的增大字体逐渐变小。
  • 请确保将HTML只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。使用时应将h1用作主标题，代表最重要的，其后是h2，代表次重要的，之后以此类推。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<!--浏览器会自动地在标题地前后添加空行-->

HTML段落

HTML段落是通过标签<p>来定义的。

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

HTML链接

HTML链接是通过标签<a>来定义的

<img src = "/image/logo.png" width="258" height="39"/>

HTML元素

属性是HTML元素提供的附加信息。

  • HTML元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般开始于开始标签
  • 属性总是以名称/值对的形式出现。比如：name = “value”。

HTML属性参考

属性描述
class为html元素定义一个或多个类名(classname) (类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式
title描述了元素的额外信息

HTML水平线

<hr>标签在HTML页面中创建水平线。可用于分隔内容。

水平线

HTML注释

浏览器会忽略注释，不会显示。

<!--这是一个注释-->

HTML段落

段落通过<p>来定义。

<p>这是一个段落</p>
<p>这是另一个段落</p>
  • 浏览器会自动地在段落的前后两行添加空行。(</p>是块级元素)

HTML折行

如果希望在不产生一个新段落的情况下进行换行，请使用<br>标签

<p>这个<br>段落<br>演示了分行的效果</p>
结果显示为：
这个
段落
演示了分行的效果

HTML输出格式影响

对于HTML，无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。
当显示页面的时候，浏览器会移除源代码中多余的空格和空行。所有连续的空格都会被显示为一个空格，多个空行同理。

HTML文本字体

<b>加粗文本</b>
<br>
<i>斜体文本<i>
<br>
<code>电脑自动输出</code>
<br>
这是<sub>下标</sub>和<sup>上标</sup>

通常标签<strong>替换加粗标签<b>来使用，<em>替换<i>使用

HTML<head>

<title>元素

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎页面的标题

<base>元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<link>元素

  • <link>标签定义了文档与外部资源之间的关系。
  • <link> 标签通常用于链接到样式表:

<style>元素

  • <style>标签定义了HTML文档的样式文件引用地址.
  • <style>元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML图像

<img src = "url" alt="some_text">
url指存储图像的位置。
  • 浏览器将图像显示在文档中图像标签出现的地方。如果你的图像标签置于两个段落之间，那么浏览器会首先希纳是第一个段落，然后显示图片，最后显示第二段。

alt属性

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

设置图像的高度与宽度

<img src="maker.jpg" alt="Pulpit rock" width="304" height="228">
属性值默认为像素

HTML表格

  • 表格由<table>标签定义
  • 表格内行由标签<border=“1”
    cellpadding=“10”>定义，每行内由<td>标签分割为若干单元格。td数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格和边框属性

使用<border>；<table border=“1”>

表格表头

使用<th>标签进行定义。大对数表头会把表头显示为粗体居中的文本

单元格边距

<table border=“1” cellpadding=“10”>

跨列

<td colspan=“2” style=“background-color:#FFA500;”>
表示占两列的长度，这两劣合并成一列

HTML列表

无序列表：有序列表始于<ul>标签。每个列表项始于<li>标签
有序列表：有序列表始于<ol>标签。每个列表项始于<li>标签
自定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- White cold drink</dd>
</dl>
浏览器显示如下：
Coffee
- black hot drink
Milk
- White cold drink

HTML区块

大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始(和结束)。如：<h1><p><ul><table>
内联元素在显示时通常不会以新行开始。如：<b>,<td>,<a>,<img>

<div>元素

<div>为块级元素，可用于组合其他HTML元素的容器。如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性

<span>

<span>为内联元素，可用作文本的容器。
如果与CSS一同使用，<div>元素可用于对部分文本设置样式属性

CSS

CSS实例
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。

id和class选择器

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

#para1{
	text-align:center;
	color:red;
}

class选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."表示：

.center{text-align:center;}
所有拥有center类的HTML元素均为居中

也可以指定特定的HTML元素使用class。
在以下实例中，所有的p元素使用class = "center"让该元素的文本居中。

p.center{text-align:center}

如何插入样式表

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 区域使用<style>元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

内联样式表

使用<style>标签在文档头部定义内部样式表。

<head>
<style>
hr{color:sienna;}
p {margin-left:20px;}
body{background-image:url("images/back40.gif");}

作业总结

多个按钮居中，一排显示：

.btn{
	/*居中;有inline才可以显示在同一行*/
	display:inline-block;
	margin: 0 auto;
	/*按钮的反馈消失*/
	outline:none;
	/*使得按钮外的一圈线条消失*/
	border:none;
}

float:left使得多个块可以在同一行显示，但是有个大坑，这会使得其父元素背景的图片被遮住。因为运用了这个属性的块浮动，使得其父元素没有被子元素撑开，使得背景图片没有办法被展示出来。

bioioid_song
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML,CSS易错题总结
Shirley_0513的博客
12-12 2272
1. 阅读下面HTML代码，段落标签<p>内文本最终显示的颜色是 <style type="text/css"> body { color:#333; } #text{ color:#666; } .content { color:#00f; } .gray { color:#f00; } </style&...
HTML简单笔记
boyames的博客
08-13 105
HTML简单笔记 <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落 只有 <body
HTML常见属性
weixin_44606322的博客
04-12 255
##标签都有的四个属性 属性 描述 class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式（inline style） title 描述了元素的额外信息 (作为工具条使用) ##快捷键 accesskey 姓名：<input type="text" name="" id...
网页设计之HTML实战(7) -- HTML中的块元素＜div＞
x879014419的博客
05-15 801
1、块级元素 块级元素在浏览器显示时，会以新行来开始（和结束）。 如：＜h1＞,＜hr＞,＜br＞,＜p＞,＜ul＞,＜table＞,＜div＞等。 2、内联元素 内联元素在显示时通常不会以新行开始。 如：：＜b＞, ＜td＞, ＜a＞, ＜img＞等。 3、HTML ＜div＞元素 HTML＜div＞ 元素是块级元素，它是其他 HTML 元素的容器。 ＜div＞ 元素没有特定的含义。由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，＜div＞元素可用于对大的内容块设置样式属性。 ＜
html css学习
u013121938的专栏
09-25 292
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式（inline style） title 描述了元素的额外信息 (作为工具条使用) 标签在 HTML 页面中创建水平线。 标签
4-HTML 属性与使用
ajream的博客
07-28 158
文章目录HTML属性HTML 属性的使用 HTML属性 HTML 元素可以设置属性，用来描述标签具有的功能 属性总是以名称/值对的形式出现，比如：name="value"。 例如： HTML 链接由 标签定义。链接的地址在 href 属性中指定： <a href="https://www.w3cschool.cn">这是一个链接</a> 效果： 这是一个链接 HTML 属性的使用 属性值应该始终被包括在引号内。 双引号是最常用的，不过也可以使用单引号。 在某些个别的情况下
科尔摩根AKM2G 安装手册。
06-29
科尔摩根AKM2G是一款高性能的伺服驱动器，专为各种工业自动化应用设计。本安装手册提供了详细的机械安装和电气安装指南，确保用户能够安全、正确地使用该产品。AKM2G支持多种反馈类型，包括DSL和EnDat，以满足不同...
科尔摩根伺服安装接线手册.pdf
05-08
科尔摩根伺服安装接线手册是科尔摩根公司出品的一份安装手册，旨在为用户提供AKD、AKD BASIC和AKD PDMM系列产品的安装和使用指南。手册涵盖了产品的安装、使用、维护和故障排除等方面的知识。 手册的主要内容包括...
卡拉科尔：卡拉科尔河畔帕尔吉纳
02-17
在信息技术领域，HTML（HyperText Markup Language）是构建网页的基础语言，而"卡拉科尔：卡拉科尔河畔帕尔吉纳"这一标题可能代表着一个项目或者网站，它位于卡拉科尔河边的帕尔吉纳地区。虽然标题并未直接涉及技术...
科尔摩根mpi
10-30
科尔摩根运动控制mpi函数库函数详细介绍。。
科尔摩根伺服驱动设置软件
03-23
科尔摩根伺服驱动设置软件是专门用于配置和调试科尔摩根伺服驱动器的工具，它为用户提供了方便的界面和功能，以便优化伺服系统的性能。本文将深入探讨该软件的相关知识点，包括其基本功能、使用流程以及在实际应用中...
HTML常用的 元素的属性
qq_42467563的博客
10-13 155
属性 描述 class 为html元素定义一个或多个类名（classname）(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式（inline style） title 描...
HTML - 元素/标签和属性基础
皮皮blog
12-29 3725
HTML元素简介HTML 文档由 HTML 元素定义。HTML 文档由嵌套的 HTML 元素构成。"HTML 标签" and "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。元素的内容是开始标签与结束标签之间的内容。Note:即使您忘记了使
html 关闭信息窗口
cuisidong1997的博客
07-14 347
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 938
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
DDei在线设计器-HTML渲染
最新发布
hoslay1的专栏
07-18 219
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1394
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
[计网初识2]web的3个核心标准html，url，http
qq_43235540的博客
07-15 697
web的3个核心标准-->HTML,URL,HTTP的构成，
前端开发体系+html文件详解
m0_63432840的博客
07-14 565
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状。此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径。优先级：行内样式>内部样式=外部样式。
科尔摩根运动控制mpi轴对象详解
这个对象的主要职责是每采样一次就根据Motion Supervisor给出的运动命令来计算轴的命令位置。Axis对象内部存储了各种关键数据，包括命令位置（即将要达到的位置）、实际位置（当前轴的实际位置）和错误数据（如位置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值