一文掌握HTML语言的基础语法
myzbx 2024-12-02 22:43 23 浏览
基础准备
我使用的是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>- 上一篇：什么是HTML
- 下一篇：Dreamweaver/Html常用标签(代码)含义汇总
相关推荐
- 砌体植筋拉拔试验检验值到底是6.0KN，还是10.2KN，如何计算确定
-
砌体拉结筋植筋养护完成后，需对所植钢筋进行拉拔试验，以检验植筋的锚固强度是否满足设计要求。检测时，按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013，以同品种、同...
- 柴油机功率如何计算?计算柴油机功率需要哪些参数?
-
在汽车领域，对于柴油机功率的计算是一项重要的工作，它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先，我们要了解计算柴油机功率常用的公式。在...
- 变压器短路阻抗的作用和计算方法（变压器短路阻抗的作用和计算方法是什么）
-
变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据，它是二次侧短接并流过额定电流时，一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢？其实变压器的阻抗电压乃是...
- 9.35m层高高支模支撑架计算书（支模架多高属于高支模）
-
某工厂新扩建的建筑面积为1989.2m^2，建筑物总体分为2层，但局部为4层。建筑物檐高19.4m，建筑物总高23m。建筑物呈长方形设置，长度为48.20m，宽度为23.88m，结构形式为框架结构...
- 吊篮(悬挂装置前梁加长)安全复核计算书
-
吊篮（悬挂装置前梁加长）安全复核计算书一种超常规搭设的高处作业吊篮，因使用要求将吊篮悬挂装置前梁加长设置，本计算书针对这种工况的校核，以作参考。计算依据：1、《高处作业吊篮》GB/T19155-...
- 电功率计算公式精编汇总（电功率计算视频讲解）
-
一、电功率计算公式：1在纯直流电路中：P=UIP=I2RP=U2/R式中：P---电功率（W），U---电压（V），I----电流（A），R---电阻（Ω)。2在单相交流电路中：P=UIcosφ...
- 灌注桩承载力检测方法及步骤（灌注桩承载力不够怎么办）
-
检测灌注桩的承载力是确保基础工程安全可靠的关键环节，检测结果的精细能准确为我们提供可靠的数据，让我们能准确判断桩基础的承载力，方便后续施工安排，同样也能让我们根据数据分辨出有问题桩基，采取可靠有效的措...
- 很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法
-
高中数学必看：向量叉乘，体积的神。大家都知道a、b的向量是什么意思，但是a、b的向量又是什么？很多同学都不知道，向量的向量在高中阶段非常有用，虽然它是大学的知识，在高中阶段可以干两件事。·第一件事，表...
- 施工升降机基础(设置在地库顶板回顶)计算书
-
施工升降机基础（设置在地库顶板回顶）计算书计算依据：1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...
- 剪力墙水平钢筋根数如何计算?（剪力墙水平钢筋绑扎搭接规范）
-
剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素，具体步骤如下及依据：1.基本计算公式水平钢筋根数计算公式为：根数=（墙高-起步距离）/间距（墙高-起步距离）/间距...
- 直流电路常用计算公式（直流电路常用计算公式有哪些）
-
1、电阻导体阻碍电流通过的能力叫做电阻，用字母R表示，单位欧(Ω)。R=ρl/s式中R-导体的电阻，欧(Ω)；ρ-导体的电阻率，欧·米(Ω·m)；l-导体的长度，米(m)；s-导体的截面积，平方米(m...
- 电气主电路图的绘制特点（电气原理图主电路）
-
1、电气主电路图中的电气设备、元件，如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制，而母线则水平绘制。电气主电路图除特殊情况外，几乎无一例外地画成单线图，并以母线为核心将各个项目(如...
- 中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)
-
中考物理专题：功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度，需满足两要素：作用在物体上的力、物体沿力方向移动距离。例如推箱子时，若箱子未移动，推力不做功；若箱子滑动，推力做...
- 40亿QQ号，不超过1G内存，如何去重?
-
分享一道网上很火的面试题：40亿QQ号，不超过1G的内存，如何去重？这是一个非常经典的海量数据去重问题，并且做了内存限制，最多只能1GB，本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...
- 填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!
-
今天分享下植筋间距及保护层要求：根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm，植筋为两根及以上时水平间距为不应小于5d（d为钢筋直径）。根据混凝土结构后锚固技...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)