目录

一、什么是HTML?

二、HTML的基本结构

三、常用的特殊符号

四、基本标签

1.基础文本标签

2.图片标签

总结


一、什么是HTML?

HTML(HyperText Markup Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页的最基本的语言,它可以直接由浏览器执行。

二、HTML的基本结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

三、常用的特殊符号

大于或小于: &gt; /&lt;    
空格从小到大: &nbsp;/&ensp;/&emsp;  
双引号: &quot;  
版权符号: &copy;

四、基本标签

1.基础文本标签

段落标签:<p></p>

换行标签:<br>

分行:<hr>

加粗 : <strong> </strong> (用于强调字眼)/ <b></b>

倾斜: <em></em> 倾斜 (用于强调)/ <i></i>

标题标签:

<h1>一级标题</h1>        <h2>二级标题</h2>        <h3>三级标题</h3>

<h4>四级标题</h4>(字体大小为1em=16px,与网页中默认字体大小一样)

<h5>五级标题</h5>        <h6>六级标题</h6>

代码如下:

<!DOCTYPE html><!-- 声明为HTML5文档 -->
<html><!-- HTML页面的根元素 --><head><!-- 头部元素 --><meta charset="utf-8"><!-- 定义网页编码格式为万维码 utf-8 ,防止网页乱码--><title>HTML基本格式</title><!-- 指网页名称 --></head><body><!-- 可以看到的网页内容 -->  <p>这是我的第一个网页</p></body>
</html>

效果如下(示例):

对应练习

基本标签小练习:

<!Doctype html>
<html><head><title></title></head><body><div><h1>人物简介</h1><p><b>李清照</b>(<i>1084年3月13日~1155年5月12日</i>),宋代女词人,号易安居士,婉约词派代<br>表,有“千古第一才女”之称。早期生活优裕,金兵入据中原时,流寓南方,境遇孤苦。<br>所作词,前期多写其悠闲生活,后期多悲叹身世,情调伤感。形式上善用白描手法,自辟<br>途径,语言清丽。论词强调协律,崇尚典雅,提出词“别是一家”之说,反对对作诗文之<br>法作词,留有诗集《易安居士文集》、《易安词》等。</p><hr>&copy;&ensp;**版权所有</div></body>
</html>

效果如下:

2.图片标签

<img src=“引入图片路径 " alt=“ ”   title=“ ”>

alt=“ ”  在网络较慢的环境中,如果没有出现图片,那么将以图片替代文本显示

title=" "  在鼠标放置图片上面时提示的文本  (大多数的标签中都会有这个属性,会慢慢接触到)

图片路径分为两种:

(1).绝对路径:就是图片在自己电脑中具体位置文件夹中,在电脑中的位置;

(2)相对路径:参照自身的位置,而定义的路径,叫做相对路径;(强烈建议使用)

相对路径有三种表示方法

a.Html文档和图片在同一个文件夹下,直接写图片名称;

b.Html文档和图片所在的文件夹在同一个文件夹下,先写文件夹名称,再写图片名称;

c.Html文档所在文件夹和图片所在文件夹在同一个文件夹下,则需要先用”../ ”找到根文件夹,再写图片所在文件夹的名称,最后写图片名称。

图片标签小练习:

代码如下:

<!DOCTYPE html>
<html><head><title>京东读书新闻资讯页面</title><meta charset="utf-8"/></head><body><h1>看不见的完美硬币 :细节的负担</h1><h2>创新公司皮克斯的启示</h2><hr/><p><img src="../img/书籍.jpg"  title="书籍"/><br/><em>&nbsp;&nbsp;细节从来都是个好东西,完美的细节往往给我们赢得商业上的胜利。</em><br/><em>但是,在皮克斯,这一家满是完美主义设计师的企业里,细节竟然成了负担。</em><br/><em>怎么打造完美的细节?又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</em><br/><h3>看不见的完美硬币:细节的负担</h3></p></body>
</html>

效果如下:

总结

每一段全新旅程的开始都是缓慢的,学习新知识时慢下来,多记多背,重点是一定要多敲!!!!这样才能让自己更好的去掌握知识点,为了未来优秀的自己,加油!

【HTML】基础,入门先学会这些知识点相关推荐

  1. 呕心沥血整理的Java零基础入门到精通全套知识点教程

    学习 Java,我将会从三个阶段来介绍,分为初级.中级和高级 计算机基础 计算机基础都包括哪些呢? 计算机组成原理.操作系统.计算机网络.数据结构与算法. 计算机组成原理 先说计算机组成原理,这部分内 ...

  2. 快上车 全套Python零基础入门教程免费分享 !

    前言 随着近年来Python的兴起,数学建模的语言不仅限于c.c++和matlab,python由于本身自带的科学计算库以及一些图形可视化库,python也成为数学建模的常用编程语言之一. 我们都知道 ...

  3. 零基础入门人工智能有门槛吗?学会这些就够了

    在科技高速发展的今天,人工智能是一个很酷很潮的字眼,几乎每天都出现在科技媒体中,人工智能应用案例应接不暇:人工智能写稿取代编辑.人工智能医疗诊断取代医生.人工智能定投取代基金经理人.人工智能机器人取代 ...

  4. [新手必备]Python 基础入门必学知识点笔记

    Python 作为近几年越来越流行的语言,吸引了大量的学员开始学习,为了方便新手小白在学习过程中,更加快捷方便的查漏补缺.根据网上各种乱七八糟的资料以及实验楼的 Python 基础内容整理了一份极度适 ...

  5. C# 零基础入门知识点汇总

    C# 零基础入门 知识点汇总 前言 一,基础语法(1~10) 二,流程控制(11~20) 三,数组相关(21~30) 四,函数介绍(31~40) 五,类和对象(41~50) 六,面向对象(51~60) ...

  6. Java零基础入门学习教程(纯干货知识点+视频资源)

    Java 是由 Sun Microsystems 在 1995 年首先发布的编程语言和计算平台.Java 是一项用于开发应用程序的技术,可以让 Web 变得更有意思和更实用. 有许多应用程序和 Web ...

  7. Spring Cloud Alibaba基础入门,一周学会基操!

    Spring Cloud Alibaba基础入门,一周学会基操! 服务拆分: 1.不同微服务,不要重复开发相同业务 2.微服务数据独立,不要访问其它微服务的数据库 3.微服务可以将自己的业务暴露为接口 ...

  8. 带瀑布流的电钢琴_让人人都能学会弹钢琴——零基础入门的智能电钢琴 POP Piano...

    原标题:让人人都能学会弹钢琴--零基础入门的智能电钢琴 POP Piano 前言 其实你一直希望成为一个会弹琴的人,只是一直没有机会开始. 如果是20世纪是网络纪元,那么21世纪就是AI纪元.当人类创 ...

  9. sql数据库教程百度云_绘画自学零基础入门教程|五天学会绘画pdf百度云下载!...

    绘画自学零基础入门教程|五天学会绘画pdf百度云下载!画画是可以让人留存记忆的事情.我自己就很喜欢画画来记录生活中一些特别的日子.场景还有我的家人朋友们.有时候,比照片更有故事感和纪念意义-有空拿出来 ...

最新文章

  1. 【采购订单】利用BAPI创建PO后丢失消息输出
  2. 编写你的第一个 Django 应用,第 2 部分
  3. Java基础之HashMap流程分析
  4. volatile不具备原子性
  5. windowsphone7高级编程中提到的地址
  6. 3D Render pictures
  7. 瀑布流ListView
  8. redis 设置密码 和 redis.config文件
  9. AutoPlay Media Studio光盘开发利器
  10. Python中索引的学习笔记
  11. Tomcat 服务器—安装、配置、启动、停止
  12. mamp安装php扩展,mac版mamp下php安装pcntl扩展
  13. ShuffleNet在Caffe框架下的实现
  14. 发力“智能马桶”的小米们,选对了目标群体吗?
  15. 使用python 怎么下单炒股票?
  16. autojs下载大文件
  17. PCB射频电路四大基础特性
  18. html入门基础笔记(简单实用)
  19. GRPC-Server报错服务端启动com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;CLjava异常解决方案
  20. Hinton独立发布44页论文火爆社区!没有实验:给你们个idea,自己去试吧

热门文章

  1. Python基础第一周第三天
  2. 任正非详解华为不上市与家人不接班问题
  3. HeapCreate()
  4. 狄利克雷分布通俗讲解
  5. 后端开发——Java
  6. 小程序获取视频第一帧
  7. Intel有那些45纳米的CPU
  8. Oracle导出数据库数据为dmp文件(存在空表情况)
  9. mmap()、munmap()的用法、例子
  10. 【数据结构】B树和B+树的笔记详细诠释