文档章节

HTML学习笔记1.4-添加常用的标签

MayaTeacher
 MayaTeacher
发布于 2016/06/24 10:19
字数 502
阅读 17
收藏 0

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的网页</title>
    <script src="index.js"></script>
</head>
<body>
<h1>故乡</h1>   
<p>我在朦胧中,眼前展开一片海边碧绿的沙地来,上面深蓝的天空中挂着一轮金黄的圆月。我想:希望是本无所谓有,无所谓无的。这正如地上的路;其实地上本没有路,走的人多了,也便成了路。</p>
<img src="http://www.mayacoder.com/upload/images/故乡.jpg">
<!-->图片路径仅供参考</!-->
<button id="btn">缩小图片</button>
</body>
</html>

 


分割线-head标签


前面代码提到<head> 标签用于定义文档的头部,它是所有头部元素的容器。描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。

他们各自的作用:
title标签:定义文档的标题;
script标签:引入js文件;
link标签:引入css文件,外联样式;
style标签:内联css样式;
meta标签:提供有关页面的元信息。

一个简单的网页应至少包含:
1.一个title标签来定义文档的标题

2.一个定义文档编码格式的meta标签(<meta charset="UTF-8">)

PS:UTF-8是万国码,不知道的同学可以去搜索查询下哦。


分割线-body标签


body 标签包含文档的所有内容(比如文本、超链接、图像、表格和列表等等),所有呈现给用户的内容都应该放到body标签里。

至于标题、段落、按钮等,实际上都是网页的一些内容标签啦~


代码学习尝试,可以从这里开始:

http://www.mayacoder.com/lesson/lesson?lesson_id=27&knowledge_id=6

© 著作权归作者所有

MayaTeacher
粉丝 3
博文 77
码字总数 23783
作品 0
杭州
项目经理
私信 提问
加载中

评论(3)

MayaTeacher
MayaTeacher 博主
daily
MayaTeacher
MayaTeacher 博主
m2
MayaTeacher
MayaTeacher 博主
mark
学习之路-前端-笔记-一、HTML笔记

本文转载于:猿2048网站➫学习之路-前端-笔记-一、HTML笔记 各种技巧 1.在Webstrom中 同时按ctrl+alt+insert创建新内容 2.输入标签按tab自动补全 按end 或 HOME实现光标移动到当前行的最后或最...

前端老手
09/11
19
0
VNote 1.12 更新,基于 Qt 的开源笔记软件

1. VNote 1.12更新 VNote 1.12已经发布!这次更新的重点是和外界的交互,包括导出和复制。 先上一个更新列表: Combine EditNote and SaveExitNote as EditReadNote (Ctrl+T); Support expo...

tamlok
2018/02/27
1K
3
前端的学习

html笔记; 技术点关键词: DOM 标签元素 标签类型 节点 样式 属性 不同浏览器支持的差异性(很小一部分) 框架布局 弹窗 浮动 js笔记; 技术点关键词: 变量 方法 参数 对象 触发和调用 异步数据交...

noteman
2015/12/14
98
0
Vue.js笔记,从入门到精通

Vue.js笔记,从入门到精通 这是我总结的笔记,对今天的学习总结了一半,笔记后面再补上,因为之前会angular,所以学起来很简单。 Vue.js 是一种mvvm模式,与angular的区别是完全没有control...

皇上洗碗
2016/10/18
210
0
1.1、Bootstrap V4自学之路------起步---介绍

如果快速建立bootstrap V4模板 DEMO敬上: <!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" conten......

Asktao
2016/01/25
181
0

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
6
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部