HTML结构:自我简介页面
一个简单完整网页结构。它包含的主要元素,如下图所示:
<!DOCTYPE HTML>
<`HTML`> <head> <meta charset="utf-8"> <title>自我简介</title> <meta name="description" content="张三的自我简介网站"> <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三"> </head> <body> <h1 align="center">自我简介</h1> <h2>简介</h2> <p>在这里简单的描述一下你自己吧。</p> </body>
</`HTML`>
显示效果如图:
从显示效果来看,该网页似乎与我们之前所学网页没有什么不同。但这个网页更容易被搜索引擎发现。
下面,我们将结合代码为大家讲解该网页完整结构和为什么更容易被搜索引擎发现。
声明文档格式:DOCTYPE
首先,第一行:
<!DOCTYPE HTML>
声明了该文档是HTML 5
的文档。
因为在Web
世界里,有很多各式各样的文档类型,所以我们首先需要做的便是声明该文档是HTML
,以便浏览器正确显示网页。
如果你想声明为HTML 4.01
的文档可以这样写:
<!DOCTYPE `HTML` PUBLIC "-//W3C//DTD `HTML` 4.01 Transitional//EN"
"http://www.w3.org/TR/`HTML`4/loose.dtd">
因为本实训以HTML 5
作为标准,所以统一使用第一种方式。
提示:
为什么与
HTML4.01
相比HTML 5
声明中没有数字"5"呢?
因为W3C
认为之前的文档声明太过复杂,正好借此机会移除版本号,这样声明就更加简化;在背景知识中,你能够了解更多
HTML
版本的历史信息。
根元素:HTML 元素
然后,<HTML>
元素告知浏览器其本身是一个HTML
文档。
除去第一行外,其余的页面内容都应该包含在<HTML>
元素中,所以它也被称为根元素。
头元素:head 元素
与属性会给元素增添附加信息一样,head
元素能为整个网页增添更多信息。可以用在head
中的标签有<base>
, <link>
, <meta>
, <script>
, <style>
, 以及 <title>
。在之后的学习中,你将逐渐的了解它们。
网页标题元素:title
本例网页主要内容是“自我简介”,所以title
也设置为“自我简介”。
title
元素的内容即网页标题,它是一个网页必需的元素之一。
<title>
的内容一般作为网页标签名,写法如下:
<title>标题内容</title>
title
内容显示位置:
元信息元素:meta
meta
元素提供元数据信息,主要包括:
页面编码;
网页标题;
网页描述;
网页关键词。
这些信息,一方面可用于告知浏览器如何展示页面,另一方面可以提供给搜索引擎检索。
因为搜索引擎会通过meta
元素的name
和content
属性来检索页面,所以当我们加入了合适的关键字和描述内容时,页面就更容易被搜索引擎发现。
编码格式:charset
<meta charset="utf-8">
该行定义了浏览器解析网页文档时使用的编码方式。通常,我们使用utf-8
编码以支持各国语言。
描述:description
描述信息使用一句话告知搜索引擎我们网页的主要内容是什么。
通常description
的写法如下:
<meta name="description" content="一句话描述网页内容">
关键词:keywords
同理,关键词信息使用多个并行的关键词告知搜索引擎我们网页内容的关键词信息。
通常keywords
的写法如下:
<meta name="keywords" content="关键词一,关键词二,关键词三">
主体元素:body 元素
<body>
元素是一个文档的主体,文档内容都包含在<body>
元素中,最终呈现在网页上。
编程要求如下:
显示效果如下图所示:
代码如下:
<!DOCTYPE html>
<html><!--------- Begin--------><head><title>自我简介</title><meta charset="utf-8"><meta name="description" content="XXX的自我简介网站"><meta name="keywords" content="关键词一,关键词二,关键词三"><meta name="" content="自我简介,关键词一,关键词二,关键词三"></head><body><h1 align="center">自我简介</h1><h2>简介</h2><p>在这里简单的描述一下你自己吧。</p><h2>三个与你最有关的词</h2><p>这三个词可以是一种形容,也可以是一种运动或者是一种独特的爱好,等等。</p><ul><li>第一个词</li><p>选择第一个词的原因</p><li>第二个词</li><p>选择第二个词的原因</p><li>第三个词</li><p>选择第三个词的原因</p></ul>
</body><!--------- End--------></html>
HTML结构:自我简介页面相关推荐
- 领英个人简介如何支持html,普通外贸业务员怎么在领英上写一份完美的自我简介( Summary)?...
原标题:普通外贸业务员怎么在领英上写一份完美的自我简介( Summary)? 在领英上撰写优质的.完美的自我简介( Summary)是非常重要的,因为我是一名外贸业务员,所以站在我的角度来说,领英是我 ...
- ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
- 个人简介页面如何设计?优秀案例给你灵感
虽然个人简介页面并不能完全替代简历,但是却提供了一种新的展示自己的途径.一个设计精美的个人简介页面也可以为自己赚取不少印象分. 很多的App中都有用户简介等类似的页面,关于用户信息的展示也有非常多的形 ...
- 优秀自我简介200字_自我简介200字左右7篇
[导语]写自我简介应正视自己的缺点与不足,不要企图掩饰或者忽略,实事求是,敢作敢为的人更令人欣赏.以下是无忧考网为大家整理的自我简介200字左右7篇,供大家参考学习. 自我简介200字左右篇一 我叫X ...
- 利用 HBuilderX 设置公司简介页面
设置公司简介页面 1.设置整个"公司简介"模块宽度为920px,字号为14px: 2.设置"公司简介"标题字号为16px,行高为50px,底部边框为1px实线, ...
- 2021-03-13 软件工程导论-自我简介
自我简介 你好,这是我的第一个博客,在这里首先做一个自我简介,以便大家对我有一些认识,谢谢~ 姓名:Ma世豪 性别:男 学历:本科二年级 就读院校:桂林理工大学 教育背景:主修课程有离散数学.C语言. ...
- 写一个自我简介,列出对软件工程课程的希望及个人目标
自我简介: 本人是一名桂林理工大学在读的大二本科生,就读于软件工程专业,学习了一些程序设计,喜欢编程.教育背景:JavaWeb.C语言.JAVA.数据结构.计算机网络.等等.希望能学好软件工程这门学科 ...
- jQuery第5章简答题4(使用css()方法添加图片边框)5(制作林徽因简介页面)
ps:简答题4(使用css()方法添加图片边框) 代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
- JQuery制作图书简介页面
第二章 JQuery选择器 练习1:制作图书简介页面 <!DOCTYPE html> <html> <head lang="en">< ...
最新文章
- 《Linux From Scratch》第一部分:介绍 第一章:介绍- 1.4. 资源
- 深入理解JVM虚拟机(三):虚拟机性能监控工具
- 接口测试工具postman安装及使用
- 微信小程序怎么在wxml中插入多个图片_兰州小程序开发流程费用推荐品牌_便企网...
- php获取字符串商都_php strlen获取字符串字节长度和mb_strlen获取字符串个数长度的区别(strlen获取中文长度)...
- java.awt.headless_以编程方式设置java.awt.headless = true
- nofollow标签_nofollow标签是什么?如何使用
- Java多线程学习二十一:ConcurrentHashMap 在 Java7 和 8 有何不同
- ubuntu16.04 jdk安装及环境配置
- windows bat文件更改为 exe文件
- MacOS安装brew教程从入门到入土
- 妈蛋,终于在TQ2440上点亮一个led了。。。
- vue-router实现history模式配置
- 京东CPS商品推广接入流程
- Android 时间更新机制之网络更新时间
- 仿ofo单车做一个轮播效果
- 图应用之最短路径问题(头歌教学实践平台)
- 2048小游戏(附源码)
- Random Forests C++实现:细节,使用与实验
- layui 下拉框三级联动
热门文章
- 物联网测试正面临四大难关
- C#笔记04 数组和循环
- 高速计算机的应用领域概括,[其它课程]计算机基础教案第一篇第一、二章.doc
- 关于计算机工作的诗歌,提高计算机工作及上网效率的方法
- Android应用及应用管理
- ubuntu10.04以及10.10安装配置tftp服务
- drools 将添加switch支持
- 微博爬取显示全文_Python爬虫---chrome driver爬取微博(教你几十行代码爬取财宝宝微博长文)...
- html二维坐标系转换,旋转坐标系 转换工具
- C#根据word模板生成word表格报表文档