HTML基础---01
1. html是什么?
HTML超文本标记语言,是一种用来描述网页的一种标记语言。
2. html的作用?
制作网页,将来可以充当软件的界面。
3. html的编辑工具
3.1 记事本
1.1 新建记事本文件
1.2 写入html代码
<html><head><title>网页标题</title></head><body>这是我使用记事本创建的第一个网页</body>
</html>
1.3 修改记事本文件的名称【以“.html”结尾】
缺点:没有提示功能,所有的代码内容都需要手动输入,效率极低。
3.2 专业的IDE[集成开发环境]
1.Notepad++:http://www.html.cn/tool/edit/2.html
2.Sublime Text:http://www.html.cn/tool/edit/6.html
3.WebStorm: https://www.html.cn/tool/edit/8.html
4.HBuilderX: https://www.dcloud.io/hbuilderx.html
我们使用HBuilderX进行学习
4. HBuilderX的使用
- 下载: https://www.dcloud.io/hbuilderx.html
- 安装HBuilderX–直接将下载好的压缩包,在指定位置解压缩就可以安装成功。
- 创建html测试运行
文件–》新建–》html文件
编辑创建好的html文件
运行–》运行到浏览器–》Chrome/IE…
6.浏览器
无论我是使用记事本还是HBuilderX,创建出来的网页都是要在浏览器中运行查看结果。
浏览器就是网页的运行环境。
常见的浏览器
7. HTML 网页的基本结构
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>
了解html的标记含义
- HTML标记–由尖括号包围的关键词
- HTML标记–通常是成对出现的,有开始标记和结束标记
- 开始标记没有"/",结束标记有"/"
- 除过成对出现标记,也有少数几个独立出现的标记交独立标记
- HTML标记–不是我们自己定义的,而是html语法规范预先定义好的一组元素
我们学习html的主要部分也就是这些预先定义好的标记元素。
Html的基本结构
- Html通过3个主要的标记将整个html文件分割成2个主要部分。
- html标记–表示正个html文件,所有需要的元素都要放在这个元素之中才有效。
- head标记–表示html文件的头。head标记中定义声明的元素都是给浏览器执行html提供附加信息
- head标记中除过标题以外,其他的元素都是对用户不可见。
- body标记–表示html文件的身体。body标记中定义声明的元素都将为用户呈现其对应的效果。
8. html文件中的默认标记
1.!DOCTYPE html–html声明,指定html语法规范的版本,有助于浏览器中正确显示网页.
doctype 声明是不区分大小写的.以下方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
上面的html声明都是html5语法规范的版本
html4规范版本的语法声明
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
2.html标记–表示正个html文件,所有需要的元素都要放在这个元素之中才有效。
3.head标记–表示html文件的头。head标记中定义声明的元素都是给浏览器执行html提供附加信息
4.meta标记–给浏览器提供网页的字符编码,网页描述,关键词,文件的最后修改时间,作者,和其他附加信息。
5.charset=“utf-8”–html标记的属性,给html标记提供附加信息,
<meta charset=“utf-8”>–指定网页的字符编码
html标记的属性有2部分组成:属性名称[charset]=属性值[“utf-8”]
html标记的属性只能出现在开始标记中,可以有多个,中间用空格分隔
例如:<手机 品牌=“华为” 内存=“8G”>
上面的例子中,手机是一个标记的话,那么品牌和内存将是这个标记的属性
6.title标记–设置网页标题
7.body标记–表示html文件的身体。body标记中定义声明的元素都将为用户呈现其对应的效果。
9. HTML 段落与文字
1. html的段落标记–<p>段落的内容</p>
特点:
1.自成一行,会占满整行,在它的后面出现的内容将会在下一行显示。
2.段落与段落之间会有空行
通常的情况下p标记,后有一个设置水平对齐方式的属性align,它的取值left/center/right
例如:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML段落标记</title></head><body><h1>HTML段落标记--p</h1><h1>1.自成一行,会占满整行,在它的后面出现的内容将会在下一行显示</h1><h1>2.段落与段落之间会有空行</h1><p align="left">平凡的世界</p><p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。</p><h1>通常的情况下p标记,后有一个设置水平对齐方式的属性align,它的取值left/center/right</h1></body>
</html>
2. html中网页内容的标题标记
1.html网页的标题是通过title标记设置。
2.h1~h6一组标记–网页内容的标题标记
特点:
1.自成一行,会占满整行,在它的后面出现的内容将会在下一行显示。
2.h1~h6 显示出来的效果是字体依次变小。H1最大,h6最小。
3.不同的浏览器显示效果有所差异。
例如:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页内容的标题标记</title></head><body><h1>html网页的标题是通过title标记设置</h1><h1>h1~h6一组标记--网页内容的标题标记</h1><h2>1.自成一行,会占满整行,在它的后面出现的内容将会在下一行显示。</h2><h2>2.h1~h6 显示出来的效果是字体依次变小。h1最大,h6最小。</h2><h2>3.不同的浏览器显示效果有所差异。</h2>平凡的世界<h1>平凡的世界</h1><h2>平凡的世界</h2><h3>平凡的世界</h3><h4>平凡的世界</h4><h5>平凡的世界</h5><h6>平凡的世界</h6></body>
</html>
3.html中的回车换行标记
1.在html中键盘的回车键不能是内容回车换行。
2.回车换行–br[独立标记]
例如:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html中的回车换行标记</title></head><body><h1>html中的回车换行标记</h1><h1>1.在html中键盘的回车键不能使内容回车换行</h1>江雪千山鸟飞绝,万径人踪灭。孤舟蓑笠翁,独钓寒江雪。<h1>2.回车换行--br[独立标记]</h1>江雪<br>千山鸟飞绝,<br>万径人踪灭。<br>孤舟蓑笠翁,<br>独钓寒江雪。<br></body>
</html>
4.html中的分隔线标记
1.网页中的一条分隔线–<hr>
2.常用的属性
color属性–分隔线颜色【颜色单词/颜色码】
size属性—分隔线粗细【1~7】
width属性—分隔线长短【数字px】
align—水平对齐属性[left-左对齐 center-居中对齐 right-右对齐]
例如:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html中的分隔线标记</title></head><body><h1 align="center">平凡的世界——路遥</h1><hr align="right" color="red" width="200px" size="7"><h4 align="right">1986年首版</h4><hr><p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。</p><p>在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。</body>
</html>
5.html中设置字体的标记
1.font–html中设置字体的标记
2.常用属性
color属性—设置字体颜色【颜色单词/颜色码】
size属性----设置字体大小 最大值7
face属性—设置字体风格【C:\Windows\Fonts】
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html中设置字体的标记</title></head><body><p align="center"><font size="7px" face="方正粗黑宋简体">平凡的世界——路遥</font></p><hr><p><font size="3px" color="blue">1986年首版</font></p><hr><font size="4px" color="#00CD00" face="方正粗黑宋简体">1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。</font></body>
</html>
6. html中的居中标记
- center–html中的居中标记
- 水平居中显示的html标记\文字\图片
例如:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html中的居中标记</title></head><body><center><font size="7px" face="方正粗黑宋简体">平凡的世界——路遥</font><br><font size="3px" color="blue">1986年首版</font><br><font size="5px" face="方正粗黑宋简体">1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。</font></center></body>
</html>
7.一组文本格式化标记
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
< small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
< ins> | 定义插入字 |
< del> | 定义删除字 |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>一组文本格式化标记</title></head><body><h1>一组文本格式化标记</h1>普通大小样式的文本<br><b>粗体样式的文本</b><br><em>着重样式的文本</em><br><i>斜体样式的文本</i><br><small>小号样式的文本</small><br><strong>加强语气样式的文本</strong><br><ins>插入样式的文本</ins><br><del>删除样式的文本</del><br>X<sup>2</sup>-2X+1=0<br>X<sub>1</sub>=1;X<sub>2</sub>=-1</body>
</html>
8.字符实体—就是在网页中输出的特殊符号
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 |  ; |  ; | |
< | 小于号 | <; | <; |
> | 大于号 | >; | >; |
& | 和号 | &; | &; |
" | 引号 | "; | "; |
’ | 撇号 | &apos;(IE不支持) | '; |
¢ | 分 | ¢; | ¢; |
£ | 镑 | £; | £; |
¥ | 元 | ¥; | ¥; |
€ | 欧元 | &euro; | €; |
§ | 小节 | §; | §; |
© | 版权 | ©; | ©; |
® | 注册商标 | ® | ® |
™ | 商标 | &trade; | ™; |
× | 乘号 | ×; | ×; |
÷ | 除号 | ÷; | ÷; |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实体符号--特殊符号</title></head><body><!DOCTYPE html><br><html><br> <head><br> <meta charset="utf-8"><br> <title>实体符号--特殊符号</title><br> </head><br> <body><br> </body><br></html><br></body>
</html>
HTML基础---01相关推荐
- 电大计算机应用技术基础视频,电大形成性测评-计算机应用技术基础01
电大形成性测评-计算机应用技术基础01 (7页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 15.9 积分 01任务-在线作业试卷总分:100 ...
- 前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
- 【重难点】【Java基础 01】一致性哈希算法、sleep() 和wait() 的区别、强软弱虚引用
[重难点][Java基础 01]一致性哈希算法.sleep() 和wait() 的区别.强软弱虚引用 文章目录 [重难点][Java基础 01]一致性哈希算法.sleep() 和wait() 的区别. ...
- java 响铃 bel 使用_Java基础01
JAVA基础01 一.注释 1. 当项目结构一旦复杂起来,我们就要使用注释. 2. 注释不被执行,提高可读性,方便团队开发. 3. 多写注释是一个非常好的习惯 4. 单行注释 // 内容 5. 多行注 ...
- 【马士兵】Python基础--01
Python基础–01 文章目录 Python基础--01 输出函数print 转义字符与原字符 标识符和保留字 输出函数print print(520) print('helloworld') pr ...
- 滤波器基础01——滤波器的种类与特性
滤波器基础系列博客,传送门: 滤波器基础01--滤波器的种类与特性 滤波器基础02--滤波器的传递函数与性能参数 滤波器基础03--Sallen-Key滤波器.多反馈滤波器与Bainter陷波器 滤波 ...
- 自动取款机取款属于计算机应用,贵州电大2018年春季学期计算机应用基础01任务(含答案)...
2018年春季学期计算机应用基础01任务 一.单选题:[25道,总分:0分] 电大作业答案 贵州电大作业 1.[单选题]存储器是能接收和保存( )及程序的装置. (满分:) A ...
- 视频教程-桫哥-GOlang基础-01基本程序设计-Go语言
桫哥-GOlang基础-01基本程序设计 多年互联网从业经验: 有丰富的的企业网站.手游.APP开发经验: 曾担任上海益盟软件技术股份有限公司项目经理及产品经理: 参与项目有益盟私募工厂.睿妙影音家庭 ...
- jQuery基础-01
jQuery基础-01 jQuery 1. 初识jQuery 1.1 使用JavaScript的方式去实现 1.2 使用jQuery的方式去实现 2. 什么是jQuery? 3. 使用的步骤 4. 版 ...
- Java 基础-01 Java语言入门
文章目录 Java 基础-01 Java语言入门 1.计算机基本概念 1.1 计算机概述 1.2 计算机组成 1.3 CPU.内存与硬盘 2.软件基本概念 2.1 软件概述 2.2 人机交互方式 2. ...
最新文章
- linux vg 镜像,Linux下载_Linux系统各种版本ISO镜像下载(redhat,centos,oracle,ubuntu,openSUSE)...
- Hyperledger Fabric 1.2 --- Chaincode Operator 解读和测试(一)
- 在Eclipse中编写servlet时出现The import javax.servlet cannot be resolved 问题解决办法
- 天刀现在最新服务器,天涯明月刀8.21服务器更新公告
- 软件设计师 - 常用公式
- .bash_profile和.bashrc的什么差别
- C#生成CHM文件(入门篇)
- xpos兼容android最高版本,[原创]学习篇-xposed框架及高版本替代方案
- java jbutton 大小_Java swing JButton的顺序和大小
- 必须了解的程序员 8个职业发展方向
- 数字信号处理-01- 数字信号处理基础知识
- Volatility FAQ
- 河北官方:邯郸涉县致4死5伤煤气泄漏事故涉嫌瞒报
- 大白菜装机教程win10_详解戴尔电脑一键重装系统win10教程
- EXCEL 制作三维散点图
- xx壳通过外网远程访问本地SQLServer服务器(原创)
- nginx日志格式配置
- 100集华为HCIE安全培训视频教材整理 | Agile Controller终端安全管理特性(二)
- c语言顺序线性表的实现
- 期货的操作方法(期货的操作方法包括)
热门文章
- 真无线蓝牙耳机哪个品牌好?2023年真无线降噪耳机盘点
- 今日头条推荐算法详解(PDF下载)
- Spring Boot进阶(12):Spring Boot 如何获取Excel sheet页的数量?一文教会你 | 超级详细,建议收藏
- 在ubuntu18.04上安装vmware
- Oracle 数据库表空间的管理
- 再见2018 你好2019
- Cadence 17.4 中文菜单
- 全网征集对六如偈的理解:一切有为法,如梦幻泡影,如露亦如电,应作如是观
- 精读数据,2020年手机直播app制作备受瞩目的几大方向预测
- 【得物技术】如何测试概率性事件 - 二项分布置信区间