web

HTML介绍

2018-08-22  本文已影响20人  lvyweb

标签（空格分隔）： html

html (Hyper Text Markup Language)中文译为“超文本标记语言”，主要是通过html标记对网页中的文本，图片，声音等内容进行描述。
HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”，通过超链接可以实现网页的跳转。从而构成了丰富多彩的Web页面。

一. HTML文档的结构

<html>
   <head>
       <title>网页标题</title>
   </head>
   <body>
       网页内容
   </body>
</html>

<!DOCTYPE html>  
<html lang="zh-CN"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我是标题</title> 
    <meta name="keywords" content="关键字" /> 
    <meta name="description" content="此网页描述" /> 
    <link rel="stylesheet" href="index.css">
</head> 
<body> 
    网页正文内容 
</body> 
</html>

解释

DOCTYPE声明

<!DOCTYPE> 声明必须是HTML文档的第一行，位于 <html>标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

html的lang 属性规定元素内容的语言

向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english
这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响

head

<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记。
一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
1.<head></head>里面<title></title>中放置的是网页标题,可以显示出来
2.<head></head>里面<meta name="keywords" content="关键字" /> <meta name="description" content="本页描述或关键字描述"/>这两个标签里的内容是给搜索引擎看的,说明本页关键字及本张网页的主要内容等SEO可以用到。

body

<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后

二. HTML的标签介绍

基本标签分类

根据标签的闭合方式分类

  1. 单(空)标签（不可以嵌套），例如：<hr/> <br/> <meta/> <img/> <input/>等等
  2. 双标签（可以嵌套）<div></div> <table></table> <span></span> <ul></ul> <dl></dl> <ol></ol> 等等

根据标签的类型分类

  1. 行内元素（内联元素）

例如：<a></a> <span></span> <strong></strong> <b></b> <em></em> <i></i> <label></label>等等
内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，内联元素可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

  1. 行内块元素
  1. 块级元素

元素类型的转换方式：

display:inline/inline-block/block

行内元素，块级元素，行内块元素的区别

标签用法，可以详细看w3school或者菜鸟教程

HTMl5新增标签

html5新增的语义化标签

新增表单元素

上一篇 下一篇

猜你喜欢

热点阅读