第一个网页| 学习笔记

简介: 快速学习第一个网页。

开发者学堂课程【零基础学前端 HTML+CSS 第一个网页】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/398/detail/5107


第一个网页

 

内容介绍:

一、HTML 页面基本结构说明

二、示例

三、代码讲解

 

一、HTML 页面基本结构说明

经常,在 HTML 页面的第一行带有 HTML 版本信息,版本信息也可以省略。下面是在一个常见的版本信息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http: / /www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http: / / www. w3. org/1999/xhtml">

HTML5语法

<! doctype html>

比如

打开百度页面的源代码

image.png

<!DOCTYPE html> 就是一段声明,声明下面内容用5的语法还是用4的语法

如果用 EditPlus 新建一个 html 文件,那么第一行就是一个声明,这个声明明显是一个4的声明

 

二、示例

现在我们可以用 html5来声明,写在第一行更简洁

接着刚才做的 html 页面

第一个 HTML 页面

<html>

<head>

<title>欢迎您</title>

</head>

<body>

<h1>JAVA</h1>

<p>IT课程学习</p>

</body>

</html>

展示效果:

在记事本上,输入上述代码,并保存为 .htm 或 .html 后缀的文件即可。

用 EditPlus 进行演示

在 title 中输入欢迎您

在<body>中输入

<h1>java</h1>

<p>IP课程学习</p>

然后保存并运行

image.png

三、代码讲解

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<head> 与 </head> 之间的文本描述网页头信息

<title> </title> 之间的文本被显示为网页的标题

<h1> 与 </h1> 之间的文本被显示为正文一级标题

<p> 与 </p> 之间的文本被显示为段落

相关文章
|
3月前
|
前端开发 UED SEO
HTML基础-链接与图片插入:网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用,包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配,解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码,展示了创建链接和图片的方法,强调了提升网页用户体验的重要性。
46 3
|
4月前
|
Rust 监控 Ubuntu
rcore 笔记 第一个裸机程序(一)
rcore 笔记 第一个裸机程序
82 0
|
4月前
|
存储 Rust 编译器
rcore 笔记 第一个裸机程序(三)
rcore 笔记 第一个裸机程序
61 0
|
4月前
|
Rust 编译器 索引
rcore 笔记 第一个裸机程序(二)
rcore 笔记 第一个裸机程序
70 0
|
9月前
【JavaWeb学习】—手托html页面和在浏览器中输入地址访问的背后不同原因(十一)
【JavaWeb学习】—手托html页面和在浏览器中输入地址访问的背后不同原因(十一)
|
前端开发
第一个网页总结暨前端基础知识补充
一,css基本引入 二,字体引入样式 三,类名约定 四,文字相关 五,相关技巧 分竖线 六,案例遇到问题及解决方法 七,文本格式化标签 八,meta标签 九,表格 十,input表单 十 一,dl标签 十二,css相关补充 背景, 透明图像,opacity![](https://img-blog.csdnimg.cn/e6756a58e45c4b94aac154aeb76148c6.png) 在搜索框内添加图标 css3 边框-阴影,圆角 文本溢出显示,换行 css3 2D转换 transition过渡 Bootstrap4 颜色引用 Bootstrap4 进度条
82 0
第一个网页总结暨前端基础知识补充
Python实现自动访问网页
Python实现自动访问网页
|
开发者
我的第一个页面及其标签简介|学习笔记
快速学习我的第一个页面及其标签简介
|
前端开发 搜索推荐 JavaScript
如何正确使用搜索引擎找到想要的内容
主要介绍Google和Baidu这两个搜索引擎的使用技巧
如何正确使用搜索引擎找到想要的内容
|
移动开发
第一个h5页面
第一个h5页面
111 0
第一个h5页面