sublime text 构建网页页面，实现html网页学习篇--1.1html基础知识篇 javascript:void(‘codeSnippet‘)

星星不见了123

已于 2023-07-07 19:27:14 修改

阅读量1.5k

点赞数 4

于 2023-07-07 19:21:32 首次发布

本文链接：https://blog.csdn.net/qq_67335884/article/details/131592339

版权

html的文档结构

<html>
    <head></head>
    <body></body>
</html>

2.html的头部<head>

<title>标题信息显示在浏览器的标题栏上</title>

2.1 头部案例

<!DOCTYPE tb_2_1.html>
<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
    </body>
</html>

于是，可以显示出下面图片中的“页面标题”啦！

3.html的meta元信息

元信息（Meta Information）是指描述数据的数据，它提供了关于数据的附加信息，比如数据的属性、特征、来源等。

3.1 html网页中的元信息例子

<!DOCTYPE yxx_3_1.html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Example website">
        <meta name="keywords" content="html,css,JavaScript">
        <meta name="author" content="xingxing">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>My Website</title>      
    </head>
    <body>
        <!DOCTYPE Website content>
    </body>
</html>

其中，输入内容应该如下：

<meta charset="UTF-8">
<meta name="description" content="这是一个描述网页内容的元信息">
<meta name="keywords" content="关键词1，关键词2，关键词3">

这里的<meta>标签提供了关于这个网页的关键信息：

字符编码
描述
作者
视口设置

这些元信息对搜索引擎和用户来说非常有用，可以帮助更好地索引和理解这个网页。

3.2 主要的<meta>标签有：

<meta charset>：指定网页使用的字符编码。
<meta name="description">：为搜索引擎提供关于网页的描述。
<meta name="keywords">：为搜索引擎提供关于网页的关键词。
<meta name="author">：指定网页的作者。
<meta name="viewport">：为移动设备指定视口设置。

还有其他的<meta>标签，如：

<meta hatt-equiv>：与HTTP头部等效。
<meta name="robots">：告诉搜索引擎如何搜索网页。

4.html的主体body

主体body是一个 Web页面的主要部分，其设置内容是读者实际看到的部分。

<body>......</body>

4.1 主体body的例子

<!DOCTYPE wy_3_1.html>
<html>
    <head>
        <title>简易网页设计</title>    
    </head>
    <body text="green" >
        <h3 align="center">Web前端开发技术课程简介</h3>
        <hr color="red">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;《Web前端开发技术》课程是计算机科学与技术、信息管理与信息系统、软件工程等专业的一门基础课程，也是其他计算机相关专业的公共基础课程，通过对Web前端开发三大注流技术学习和研究，让学生理解和掌握HTML、JavaScript、CSS等相关知识，通过实验培养学生设计与开发Web站点的基本操作技能。</p>
        <!DOCTYPE Website content>
    </body>
</html>

于是，就有如下页面：

常见的body标记属性：

topmargin：规定文档中上边距的大小。
leftmargin：规定文档中左边距的大小。
style：为网页主体应用css样式。
background：指定网页的背景图像的URL。
link：指定链接的默认颜色，可以使用颜色名称或十六进制值。
vlink：指定已访问链接的颜色，可以使用颜色名称或十六进制值。
alink：指定活动链接（鼠标悬停时）的颜色，可以使用颜色名称或十六进制值。
text：指定网页的默认文本颜色，可以使用颜色名称或
bgcolor：指定网页的背景颜色，可以使用颜色名称或十六进制值。
onload：指定网页关闭或离开时执行的JavaScript代码。
onunload：指定网页加载完成后执行的JavaScript代码。

4.2 body标记属性例子：

<!DOCTYPE sx_3_1.html>
<html>
    <head>
        <title>body属性应用</title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content="储久良">    
    </head>
    <body text="rgb(00,00,00)" bgcolor="#f0f0f0" background="" link="rgb(0%,100%,0%)" alink="white" vlink="red" topmargin="50px" leftmargin="50px">
        <p>欢迎访问我们的站点，我们为您提供网站地图。</p>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.163.com">网易</a>
        <a href="http://www.sina.com">新浪</a>
        <a href="http://www.sohu.com">搜狐</a>
        <!DOCTYPE Website content>
    </body>
</html>

于是，就有下面的网页：

5.html基本语法

5.1 标记语法

5.1.1 单个标记

基本语法：<标记名称>或<标记名称/>
例如：<br>、<hr>、<br/>、<hr/>

5.1.2 成对标记

基本语法：<标记名称>内容</标记名称>
例如：<h3><i>内容</i></h3>

5.2 属性语法

基本语法： <标记名称属性1=“属性值1” 属性2=“属性值2” ...属性n="属性值n">
例子：<hr size="3" color="red" align=" center">

5.3 注释

注释的2种方法：

基本语法：
基本语法：<comment>注释信息</comment>

5.4 html文档类型

基本语法：< ! DOCTYPE element-name DTD-type DTD-name DTD-url >

5.5 DTD类型

HTMl5的DTD定义：<!doctype html>

6.综合例子

<!DOCTYPE ydj_3_1.html>
<html>
    <head>
        <title>元旦节</title>
        <style type="text/css">
            div{text-align: center;}
        </style>   
    </head>
    <body  bgcolor="#CDEBE6" >
        <h3 align="center">欢度2021年元旦</h3>
        <hr size="2" color="red" width="100%"/>
        <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;元旦(New Year's Day，New Year )，指一年开始的第一天，也被称为"新历年"、"阳历年”，在古代指阴历的正月初一。1949年9月27日，中国人民政治协商会议第一届全体会议正式确立公历1月1日为元旦。元旦是世界上很多国家或地区的法定假日。</p>
        <div>
            <img src="yuandan1.jpg" width="300" height="165" border="0" alt="">
            <img src="yuandan2.jpg" width="300" height="165" border="0" alt="">
        </div>
        <!DOCTYPE Website content>
    </body>
</html>

于是，就有下面的页面：

星星不见了123

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
sublime text 构建网页页面，实现html网页学习篇--1.1html基础知识篇 javascript:void(‘codeSnippet‘)

元信息（Meta Information）是指描述数据的数据，它提供了关于数据的附加信息，比如数据的属性、特征、来源等。这些元信息对搜索引擎和用户来说非常有用，可以帮助更好地索引和理解这个网页。主体body是一个 Web页面的主要部分，其设置内容是读者实际看到的部分。3.1 html网页中的元信息例子。2.html的头部于是，可以显示出下面图片中的。3.html的meta元信息。4.html的主体body。4.1 主体body的例子。5.4 html文档类型。5.html基本语法。
复制链接

扫一扫