前端学习——HTML（一）
文章目录
- HTML是什么
- HTML标签和元素
- HTML的属性
- 简单示例
参考文章：
https://www.yuque.com/fe9/basic/hw5ara
HTML是什么
HTML 是标记语言，通过一些特定符号（标签），使文章格式固定。如下图所示：
HTML标签和元素
| 名词 | 解释 |
|---|---|
| HTML标签 |
类似于<p> 、</p>；标签是由尖括号<>包含关键词p组成的。
|
| HTML元素 |
由标签+内容嵌套而成。比如<p>我是一个段落</p>
|
| 空元素 |
一般来说如果没有内容如：<p></p>这样写其实是没有任何意义的。但是空元素不一样，比如<br>标签，用来换行。
|
空元素与非空元素
| 名词 | 解释 |
|---|---|
| 块级元素 | 独占一行，将后面的元素挤到新的一行；p 元素总是独占一行显示，它是块级元素 |
| 行内元素 | 行内元素紧挨着显示，不会自动换行；i 和 span 元素则没有换行，是行内元素。 |
块级元素和行内元素，下方效果：
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落，<i>我是段落里的斜体部分</i></p><span>我是一段文字</span>
<span>我是一段文字</span>
<span>我是一段文字</span>
HTML的属性
HTML标签 是可以拥有属性的，如下所示，效果展示。
<img alt="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2664816/profile/profile-512.jpg?1544158617">
用属性可以增强HTML的表达效果。定义属性的方式是attr = xxx
属性 src 指定了图片的 url 地址，alt 属性定义了可替换文本，当浏览器无法载入图片时，浏览器将显示这个替换文本。
简单示例
各标签意义参考链接。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML 示例</title><link rel="stylesheet" type="text/css" href="xxx.css"><script src="xxx.js"></script></head><body><h1>我是标题</h1><p>我是段落</p></body>
</html>
显示效果如下：
前端学习——HTML（一）相关推荐
- 【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握 上文 [FE前端学习]第二阶段任务- ...
- Web前端学习有哪些技巧?
想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...
- “计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
- python比前端好学吗_前端学习到底难不难？
难易程度是相对的,不是绝对的. 前端学习相对于java,python等肯定是更为简单的.精通会有难度,而且更新速度很快,需要不断的充实自己,提升自己,这也是一个难点. 前端学习初期,不知道该怎么学,学 ...
- hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
- html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
- 前端学习路线_前端学习路线图
2020年全新前端学习路线图分享给大家! 学习是一个循序渐进的过程,是一件非常难得坚持的事情.如果真的想学习前端开发,一定要下决心! 我这里分享给你的前端学习路线图,希望对你有帮助,以下为2020年更 ...
- react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
- 黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线 随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
- 2020年最新前端学习路线
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线.先从初级前端工程师所需的技能开始,然后一路升级到高级 ...
最新文章
- pythopn 迭代器
- golang1.16新特性速览
- 蚂蚁金服发布「定损宝」，推动图像定损技术在车险领域的应用
- lepus监控oracle数据库_MySQL数据库监控软件lepus使用问题以及解决办法
- linux 下停止监听程序,Linux下启动Oracle服务和监听程序步骤
- 为Android应用程序添加社会化分享功能
- Python之数据加密与解密（hashlib、hmac、random、base64、pycrypto）--转载
- 手把手带你写一个中断输入设备驱动
- 怎样组建云计算机,如何搭建云计算平台_搭建云计算平台步骤
- 外部表不是预期的格式怎么解决_1分钟拆解：如何将10多个工作表sheet，合并成一张？...
- 用注册表修改右键菜单
- 武汉理工大学华夏学院计算机类,2015年武汉理工大学华夏学院招生专业代码
- 金蝶K3案例教程简介
- 页面关键词密度 和布局 ，内页
- 名词解释isp_名词解释
- WORD如何使得公式居中，公式编号右对齐？
- 我为什么要立刻放弃React而使用Vue？
- Linus Benedict Torvalds
- 思岚S2激光雷达6——matlab处理雷达数据
- 几个简单的论文下载方法