百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

一文掌握HTML语言的基础语法

myzbx 2024-12-02 22:43 10 浏览



基础准备

我使用的是Hbuilder编辑器，在hbuilder中创建一个HTML文件。


在hbuilder中运行HTML文件


效果



HTML文档结构

<!DOCTYPE html>
<html>
	<head>
		<!--网页的头部 -->
	</head>
	<body>
		<!--网页内容 -->
	</body>
</html>

<!-- -->   用于注释代码


HTML常用标签

基础标签

  • html 最外层的元素
  • head 网页的头部
  • title 网页的标题
  • body 网页内容

文本格式化

  • i/em 斜体
  • strong 加粗
  • q 引用
  • blockquote 长引用
  • code 元素定义编程代码示例
<i>武汉，加油！</i>
<em>湖北,加油！</em>

<strong>武汉，加油！</strong>

<q>HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能，清爽的界面，强大的功能和于一身。</q>

<blockquote>
  HX是轻量编辑器和强大IDE的完美结合体。敏捷的性能，清爽的界面，强大的功能和于一身。
</blockquote>

<code>var a = 1 </code>

实验效果


标题段落

  • h1-h6 表示标题 数字越大 字体越小
  • p 段落标签
  • hr 水平分割线
  • br 换行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用标题和段落</title>
	</head>
	<body>
		
		<!-- 标题-->
		<h1>武汉加油！</h1>
		<h2>武汉加油！</h2>
		<h3>武汉加油！</h3>
		
		<h4>武汉加油！</h4>
		<h5>武汉加油！</h5>
		<h6>武汉加油！</h6>
		
		<!--段落标签-->
		<p>武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！</p>
	
	    <hr > <!--水平分割线-->
		<p>武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！武汉加油！</p>

<!-- 换行符-->
武汉加油！武汉加油！武汉加油！武汉加油！
<br>武汉加油！武汉加油！武汉加油！
        
	</body>
</html>


块元素

  • div 盒子
  • span 功能和div类似，span可以用来装一小段文字 和div的区别就是 在一行内显示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03</title>
	</head>
	<body>
		
		<i style="background-color: blue;">武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ </i>
		
		<div style="background-color: aqua;">
			武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！
		</div>
		<div style="background-color: aqua;">
			武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！
		</div>
		
		<span style="background-color: blue;">
			武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！
		</span>
		<span style="background-color: blue;">
			武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！ 武汉加油！
		</span>
	</body>
</html>

最终效果


图片

  • img
  • img标签必须加上 src属性 才能把图像展示出来
  • alt属性： 当图片没有办法显示的时候用来提示用户的文字
  • title属性：当鼠标移动到图片的时候，用来提示用户的文字
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用图片</title>
	</head>
	<body>
		hello
		
		<img src="images/02.png" alt="风景图" title="测试图片" >
	</body>
</html>


链接

  • a标签 超链接
  • href属性： 超链接的地址
  • target属性：_blank 表示新建一个浏览器标签页来显示超链接的内容，不会覆盖原来的网页_parentsearchtop
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
		<a href="http://www.baidu.com" target="_parent">百度一下</a>
	    <a href="http://www.baidu.com" target="_search">百度一下</a>
		<a href="http://www.baidu.com" target="_top">百度一下</a>
	
	</body>
</html>


列表

  • ol 有序列表
  • ul 无序列表
  • li 列表项
  • type 定义类型
  • disc 实体圆点
  • circle 空心圆
  • square 实体方形
  • a 小写字母 （有序）
  • A 大写字母（有序）
  • 默认数字（有序）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		
		<!--有序列表-->
		
		<ol type="1"> 
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<ol type="A">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		<ol type="a">
			<li>北京</li>
			<li>上海</li>
		</ol>
		
		
		<!-- 无序列表-->
		<ul type="disc">
			<li>北京</li>
			<li>上海</li>
		</ul>
		<ul type="circle">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		<ul type="square">
			<li>北京</li>
			<li>上海</li>
		</ul>
		
		
	</body>
</html>


表格

  • tablecaption 表格标题
  • th 表头
  • tr 行
  • td 单元格
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table</title>
	</head>
	<body>
		<table border="1px" cellspacing="" cellpadding="">
			<caption>招聘信息</caption>
			<tr>
				<th>职位名称</th>
				<th>薪资水平</th>
			</tr>
			<tr>
				<td>前端工程师</td>
				<td>20k</td>
			</tr>
			
			<tr>
				<td>后端工程师</td>
				<td>20k</td>
			</tr>
		</table>
	</body>
</html>


相关推荐

SUS631化学成分特性及适用范围（sus316的材料成分）

sus631特性及适用范围：添加铝的沉淀硬化型钢种，用作弹簧、热圈及计器部件。sus631/17-7PH/S17700/0Cr17Ni7Al沉淀硬化型不锈钢日本SUS631(17-7PH国标0Cr17...

4年仅掉价不到3成!这辆45万的奥迪S5纯素车，值不值得买?

哈喽~大家好，检车家老司机又和你们见面啦！我是你们的老朋友建国，我曾是一枚修过7年车的汽车修理工，现在是一名专业的二手车检测技师，更是一枚事故车劝退师。欢迎收看本期二手车检测趣事，今天给大家带来的车型...

新旗舰什么样?7张图全方位预测三星Note4

夏天已经快结束了，这也就意味着今年上半年的重磅机型已经悉数发布完毕，我们先要做的就是过一段平淡的日子然后期待着下半年的重磅产品陆续登场。三星GALAXYNote4无疑是下半年最值得我们期待的机型之一，...

拍照为主兼顾视频，将来可能接单，索尼a7m3和松下s5怎么选?

最近有小伙伴问了我下面这么一个问题。想买一台全画幅微单，但是预算有限，看好了两款机型，他的问题是：拍照为主兼顾视频，将来可能接单，索尼a7m3和松下s5怎么选？这个问题，我就想到这个网友也是做过一些功...

GolangWeb框架Iris项目实战-JWT和中间件(Middleware)的使用EP07

前文再续，上一回我们完成了用户的登录逻辑，将之前用户管理模块中添加的用户账号进行账号和密码的校验，过程中使用图形验证码强制进行人机交互，防止账号的密码被暴力破解。本回我们需要为登录成功的用户生成Tok...

对焦大提升!松下S5M2 3.0固件&amp;S5M2X 2.0固件详细测试

前段时间，松下发布了最新的S5M2和S5M2X的固件，并且这是一个比较大的更新，对对焦性能、防抖性能有较大提升，还新增了录制代理文件以及预连拍功能。这都是超级实用的功能，松下不愧是固件大厂！自动对焦升...

三星Galaxy S5安卓5.0测试版曝光，总算好看点了

三星GalaxyS5安卓5.0测试版曝光，总算好看点了出处：IT之家原创（远洋）2014-10-3123:11:04评论IT之家报道，显然，三星正在将自家的TouchWiz用户界面适配谷歌最...

松下S5M2对焦变换功能讲解#松下相机

大家好，今天和大家分享松下相机一个非常好用的功能：对焦变换。这个功能通常用于近景的视频拍摄，比如像现在画面里出现的人偶、象棋，看到视频的对焦点非常平顺的依次从画面的上方移动到中间，再移动到靠下的位置。...

松下 S5M2的几个重要功能(拍照篇) 松下 S5M2的几个重要功能

赶在618结束之前，我来讲几个松下S5二代的重要功能，也许其中的某一项功能会成为你购买它的理由。·首先来讲一讲高分辨率模式，这是一个非常好用的功能。使用松下S52代的左边波轮，可以直接进入这个模式。进...

奥的斯电梯OTIS DCSS5-E门机自学习详细过程

奥的斯电梯DCSS5-E门机自学习详细过程1.将轿顶打检修2.插入TT时按“M”键，提示你按“3”键，按“3”3.关键一步，因为怕你误操作而更改门机运行曲线和重要参数，正常情况下你是看不到第三个菜单的...

玩转smardaten | 逻辑编排很难吗?看无代码平台操作

1、前言不知道各位小伙伴有没有使用过无代码软件平台的经历呢？有没有想过你可以通过简单的拖拽就能构建和部署强大的应用程序？简单地说，smardaten无代码系统使任何人都能够开发软件，无需高深的开发知...

关于编码的那些事 - URL 编码（url编码的作用）

作者：redmed背景Web项目中经常会遇到处理URL中Query的情况，来看下下面问题你有疑惑吗？项目中发现会用到qs、query-string、URLSearchParams、甚至q...

国服一周数据观察:新英雄千珏胜率不足50%

随着千珏的更新，5.20版本到现在已经有一周的时间了，这段时间我们的排位赛数据有什么变化呢?快来看下排位赛数据分析。选择率最高的英雄榜单与过去的变化不大，仍然是盲僧、薇恩和赵信荣登榜首。但这不代表这些...

iPhone系列领跑消费者最喜爱拍摄设备名单

现在连GalaxyS5都被iPhone4s，iPhone4这类老机型压在后面，由此可见苹果的产品比起三星真是畅销太多了。国外著名图片分享网站Flickr，今天公布了2015年用户们最喜欢使...

Galaxy S6图像处理性能不如iPhone6 Plus?

三星最近公布了旗舰机GalaxyS6，有许多人批评、褒奖，但更常拿来跟iPhone6比较（明明不同系统阿？），而这次又有报告指GalaxyS6的「图像处理」不如iPhone6Plus，究竟是...

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