设为首页 加入收藏

TOP

HTML概述(一)
2019-09-23 11:17:45 】 浏览:85
Tags:HTML 概述

  HTML是一种描述网页的语言。全称是Hyper Text Markup Language(超文本标记语言),是一种标记语言,由许多的标记标签组成。

 

一  HTML标签

  1,简介

  HTML语言是由许多标签组成,HTML 标签是由尖括号包围的关键词,比如 <html>。

  HTML标签都是小写的。

  HTML 标签通常是成对出现的,比如 <b> 和 </b>,也有单独出现的,如<meta>和<img>等,这种我们称之为单标签。

  标签对中的第一个标签是开始标签,第二个标签是结束标签,请注意结束标签和开始标签的区别。

  很多标签之间可以相互嵌套。例如<p>里面可以有<span>,<body>里面可以有<p>。

  HTML开始标签和结束标签之间的内容我们称之为HTML元素。

1 <body>
2     <p>我是一个段落</p>
3     <img src=url>
4 </body>

  2,属性

  每个HTML标签都可以拥有自己的属性,属性用来描述HTML元素的更多详细信息。

  大多数HTML标签都可以拥有以下这些属性:name,class,id,style,title。他们分别描述元素的名称,类名,唯一id,样式,额外信息。

  另外,有很多HTML标签拥有自己特有的属性,比如img标签的src,input标签的type等,这些属性都是部分标签才拥有的。

1 <p name='pragraph' id='001'>我是一个段落</p>

  每个属性由属性名和属性值组成,属性名和属性值之间由等号连接。不同属性之间由空格隔开。属性值对大小写没有硬性规定,不过推荐使用小写。

  3,样式

  样式是指HTML元素的样式,HTML标签的style属性正是用于给HTML元素设置样式的,包括文字字体,背景颜色,文字大小等等。

1 <p style="color:red;font-size:18px">我是一个段落</p>

  每个样式由样式名和样式值组成,样式名和样式值由冒号连接。不同样式之间由分号隔开。这种在HTML标签使用style属性添加样式的方式我们称为内联样式

  另一方式是在<head>标签中使用<style>标签,这种方式成为内部样式(即在HTML文档内)。

1 <head>
2     <style>
3     </style>
4 <head>

  还有一种方式是在<head>标签中是用<link>标签从外部引入css文件,这种方式我们称为外联样式

1 <link rel='stylesheet' type='test/css' href=url>

  4,脚本

  要在HTML文档中引用java script脚本有两种方式,第一种类似上面的内部样式,直接在<script>的开始标签和结束标签之间编写java script代码即可。

1 <body>
2     <script>
3         console.log("hello world");
4     </script>
5 </body>

  另一种方式虽然也是使用<script>标签,但用法上略有不同。

1 <head>
2     <script type='test/java script' src=url></script>
3 <head>

  这种方式从HTML文档外部引入java script文件。<script>标签可以放在任何位置使用,但一般我们把内部java script代码放在<body>中,把外部引入的放在<head>中,不过,这不是绝对的,根据需要选择合适的位置才是恰当的。

  5,注释

1 <body>
2 <!--这里是一段HTML注释-->
3 </body>

  6,标签

  想要了解全部HTML标签的详细信息,可以到这里:https://www.w3school.com.cn/tags/index.asp

 

二  HTML结构

  一个网页即是一份HTML文档。

  1,HTML文档的标准结构

 1 <!doctype html>
 2 <html lang='zh-cn'>
 3     <head>
 4          <meta charset='utf-8'>
 5          <title>my title</title>
 6     </head>
 7     <body>
 8         <!--some code-->
 9     </body>
10 </html>

  在文档的第一行使用<!doctype html>声明文档类型,方便浏览器解析。

  然后是一对<html>标签,它就代表了整个网页。<html>标签里面是<head>和<body>标签:

    <head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。可以在<head>内使用的标签有<base>, <link>, <meta>, <script>, <style>, 以及 <title>。其中<title>应该是必须的。

    body 元素定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

  2,SEO

  <html>标签的lang属性,可以清楚的告诉搜索引擎我们的网站是什么语言。一般中文:zh-cn,英文:en。

1 <html lang='zh-cn'>
2 </html>

  <title>标签明确的告诉搜索引擎我们的网站主题。

1 <title>淘,淘我喜欢<title>
2 <link rel="icon" href=url type="img/x-ico" /><!--给title加一个小图标-->

  h1-h6标题标签。h1和h2标签的内容对搜索引擎来说权重较高。

  <meta>标签提供关于HTML文档的元数据。元数据不会显示在页面上,对用户是不可见的,但是对于机器是可读的。我们可以使用该标签清楚的告诉搜索引擎,我们的网站采用的字符集,作者,关键字,网页描述等信息。

1 <head>
2     <meta charset='utf-8'><!--文档编码字符集-->
3     <
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇纯css耍个透明正方体转一转 下一篇不用JS,教你只用纯HTML做出几个..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目