百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

HTML简单介绍及常见元素

liuian 2025-04-26 19:24 37 浏览

<!doctype html>
    <html>
        <head>
 <meta charset="utf-8">
 <title>Head First Lounge</title>
 <style>
 body {
 background-color: #eaf3da;
 }
 </style>
    　　</head>
    <body>
    　　<h1>Welcome to the New and Improved Head First Lounge</h1>
    　　　　<img src="http://www.cnblogs.com/drinks.gif" alt="Drinks">
    　　　　<p>Join us any evening for refreshing 
<a href="http://www.cnblogs.com/elixir.html">elixirs</a>,
cinversation and maybe a game or two of <em>Dance Dance Revolution</em>.
Wireless access is always provided; BYOWS (Bring your own Web Server).
</p> <h2>Directions</h2> <p>You'll find us right in the center of downtown Webville.
If you need help finding us, checkout out
our <a href="http://www.cnblogs.com/directions.html">detailed
directions</a>. <q>Come join us!</q>
</p> <ol> <li>Walla Walla, Wa</li> <li>Magic City, ID</li> <li>Bountiful, UT</li> <li>Last Chance, Co</li> </ol> <blockquote> Passing cars, When you can't see,
May get You,<br/> A glimpse,<br/> Of eternity. </blockquote> </body>
</html>

要进入Web的世界,在你面前只有一个障碍,那就是要学会它的语言.

HTML和CSS就是我们用来创建网页的语言

Web服务器存储并提供由HTML和CSS创建的网页.浏览器获取网页,并根据HTML和CSS显示网页的内容.

HTML是超文本标记语言(Hyper Text Markup Language)的缩写,用来建立网页的结构.

HTML会告诉浏览器文档的结构:标题放在哪里,段落放在哪里,那些文本需要强调等.有了这些信息,浏览器会使用它内置的默认样式来表现这个结构.

CSS是层叠样式表(Cascading Style Sheets)的缩写,用来控制HTML的表现.

利用CSS可以描述要如何表现你的内容,例如改变为你喜欢的字体、颜色、大小等,使之看起来更加美观.

尽管这意味着需要学习两种语言,但是你会发现,由于每个语言各有其擅长的方面,与视图使用一种语言兼顾这两方面的工作相比,实际上学习两种语言让他们各司其职反而更容易.

什么是 HTML？

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)
  • HTML 不是一种编程语言，而是一种标记语言(markup language)
  • 标记语言是一套标记标签(markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

通过HTML,我们利用标记来表示内容提供结构.我们把匹配标记以及它们包围的内容称为元素.

而元素是什么呢?它通常由三部分组成:一个开始标记、内容和一个结束标记。不过有些元素(比如<img>)有所例外。

下面来介绍下常见的元素:

HTML 标题（Heading）

是通过 <h1> - <h6> 等标签进行定义的。从<h1>到<h6>,字体由大到小.除非创建一个非常复杂,庞大的文档,否则一般不会用到<h3>以后的标题.

例如:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释是这样写的：

<!-- This is a comment -->

HTML 段落

是通过 <p> 标签进行定义的。

例如:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

例如:

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

hr 元素可用于分隔内容。

HTML 折行

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

例如:

<p>This is<br />a para<br />graph with line breaks</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML 链接

是通过 <a> 标签进行定义的。

例如:

<a href="http://www.w3school.com.cn">This is a link</a>

其中<a>元素的href属性指定了连接的目标文件.

HTML 图像

是通过 <img> 标签进行定义的。

例如:

<img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Drinks">

其中<img>元素的src属性指定了在web页面上显示的图像文件的位置,alt属性需要指定描述这个图像的一些文本.

这里的例如href,src,alt,都是元素的属性,写法都一样,首先是属性名,后面是一个等于号,然后是双引号括起来的属性值.

无序列表unorderlist

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>

例如:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表orderlist

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

例如:

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

简短的引用

通过<q>元素可以为现有的文字里添加简短的引用

例如:

　<p>You'll find us right in the center of downtown Webville.<q>If you need help finding us,</q> checkout out 
our Come join us! </p>

很长的引用

可以使用<blockquote>元素来为一段或多段文字添加引用

例如:

<blockquote> Passing cars, When you can't see,
　　　　　　　　 May get You,<br/>
 A glimpse,<br/>
 Of eternity.
</blockquote>

强调

可以使用<em>元素来标记你想用不同方式显示的文本,比如你想强调一个要点

例如:

<p>Join us any evening for refreshing cinversation and maybe a game or two of <em>Dance Dance Revolution</em>.Wireless access is always provided; BYOWS (Bring your own Web Server).
</p>

现在已经知道了很多基本的元素了,其他还有显示计算机代码的<code>元素,显示时间或日期的<time>元素等等就不列举了.

相关推荐

使用Assembly打包和部署Spring Boot工程

SpringBoot项目的2种部署方式目前来说，SpringBoot项目有如下2种常见的部署方式一种是使用docker容器去部署。将SpringBoot的应用构建成一个docke...

java高级用法之:调用本地方法的利器JNA

简介JAVA是可以调用本地方法的，官方提供的调用方式叫做JNI，全称叫做javanativeinterface。要想使用JNI，我们需要在JAVA代码中定义native方法，然后通过javah命令...

Linux中如何通过Shell脚本来控制Spring Boot的Jar包启停服务?

SpringBoot项目在为开发者带来方便的同时，也带来了一个新的问题就是Jar包如何启动？在一般情况下我们都是采用了最为经典的java-jar命令来进行启动。然后通过ps命令找到对应的应用线程通...

牛逼!自己手写一个热加载（人民币手写符号一个横还是两个横）

热加载：在不停止程序运行的情况下，对类（对象）的动态替换JavaClassLoader简述Java中的类从被加载到内存中到卸载出内存为止，一共经历了七个阶段：加载、验证、准备、解析、初始化、使用、...

java 错误: 找不到或无法加载主类?看看怎么解决吧!

问题扫述：项目名称调整，由原来的com.mp.qms.report.biz调整为com.mp.busicen.mec.qms.report.biz后。项目在IDEA直接运行，但打包部署到服务器...

如何将 Spring Boot 工程打包成独立的可执行 JAR 包

导语：通过将SpringBoot项目打包成独立的可执行JAR包，可以方便地在任何支持Java环境的机器上运行项目。本文将详细介绍如何通过Maven构建插件将SpringBoot...

class 增量发包改造为 jar 包方式发布

大纲class增量发包介绍项目目录结构介绍jar包方式发布落地方案class增量发包介绍当前项目的迭代修复都是通过class增量包来发版本的将改动的代码class增量打包,如下图cla...

Jar启动和IDE里启动Sprintboot的区别

想聊明白这个问题，需要补充一些前提条件，比如Fatjar、类加载机制等1、Fatjar我们在开发业务程序的时候，经常需要引用第三方的jar包，最终程序开发完成之后，通过打包程序，会把自己的代码和三...

Java 20年，以后将往哪儿走?（java还能流行多久）

在今年的Java20周年的庆祝大会中，JavaOne2015的中心议题是“Java的20年”。甲骨文公司Java平台软件开发部的副总裁GeorgesSaab的主题演讲就将关注点放在了java...

Spring Boot Jar 包秒变 Docker 镜像实现多环境部署

你是否在互联网大厂后端开发工作中，遇到过这样的困扰？当完成一个SpringBoot项目开发，准备将Jar包部署到不同环境时，却发现各个环境依赖不同、配置复杂，部署过程繁琐又容易出错，不仅耗费...

从0开始，让你的Spring Boot项目跑在Linux服务器

1搭建Linux服务器1.1购买阿里云服务器或安装虚拟机这里建议是CentOS7.X或CentOS8.X，当然其他的Linux如deepin、Ubuntu也可以，只是软件环境的安装包和安装方式...

【技术】Maven 上传第三方jar包到私服

通过nexus后台上传私服以NexusRepositoryManagerOSS2.14.5-02为例。登录nexus后台。定义Maven坐标Maven坐标有两种方式：1.自定义参数；2....

JVM参数、main方法的args参数使用

一、前言我们知道JVM参数分为自定义参数、JVM系统参数，Javamain方法的参数。今天就谈谈怎么使用吧。二、查看jvm参数定义自定义参数我们打开cmd窗口，输入java，就能看到自定义参数的格式...

Maven项目如何发布jar包到Nexus私服

Maven项目发布jar包到Nexus私服在编码过程中，有些通用的代码模块，有时候我们不想通过复制粘贴来粗暴地复用。因为这样不仅体现不了变化，也不利于统一管理。这里我们使用mavendeploy的方...

干货丨Hadoop安装步骤!详解各目录内容及作用

Hadoop是Apache基金会面向全球开源的产品之一，任何用户都可以从ApacheHadoop官网下载使用。今天，播妞将以编写时较为稳定的Hadoop2.7.4版本为例，详细讲解Hadoop的安...

一周热门
最近发表
标签列表