1. 技术文章
  2. HTML学习

HTML学习

由 馋奶兔 提交于 2019-11-26 03:42:45

html介绍

什么是HTML

  1. 超文本标记语言（Hyper Text Markup Language）
  2. 不是一种编程语言，而是一种标记语言
  3. html构成了网页的内容

什么是标记语言？

  1. 标记语言是一套标记标签
  2. html使用标记标签来描述网页（内容）

html标签

  1. 由尖括号包围的关键词，如： \<html>, \<body>, \<a>, \<q> 等
  2. 一般都是成对出现，如\<p>\</p>；也有特殊情况，如<br/>
  3. 成对标签的第一个叫开始（头）标签，第二个标签叫结束（尾）标签。也可以叫开放标签和闭合标签

网页

  1. 网页 = html文档
  2. html文档 = html文档 + 标签内的内容

DOCTYPE文档类型

<!DOCTYPE>文档类型

  1. 不是HTML标签，写在最前面
  2. 告诉浏览器关于页面使用哪个HTML版本进行编写的指令
  3. 浏览器根据使用html版本（规则）来正确地显示内容

常用<!DOCTYPE html>文档类型

  1. HTML 5：<!DOCTYPE html>
  2. HTML 4.01 Strict 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. HTML 4.01 Transitional 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
  4. HTML 4.01 Frameset 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">

    html注释

HTML注释

  1. 语法：<!-- ... -->
  2. 对代码进行解释，不会显示在浏览器中

举例

<!-- 注释内容 -->

html结构

HTML结构

由头部和身体构成

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

头部head

  • 包含网页标题、描述、关键词、引用的样式文件、引用的脚本文件等

身体body

  • 包含网页所有显示的内容、引用的脚本文件等

title标签

<title><title/>

  1. 网页标题，会显示在浏览器的标题栏
  2. title是head标签中唯一要包含的东西

link标签

<link/>

  1. 必须置于head里
  2. 定义文档与外部资源的关系。比如：链接样式表，引入样式文件

<link/>属性

  1. href属性：被连接文档的地址
  2. rel属性：当前文档与被连接文档的关系
  3. type属性：规定被连接文档的类型
  4. media属性：被连接的文档显示在什么设备上 
    <html>
<head>
    <title>test a page</title>
    <link rel="stylesheet" type="text/css" href="https://static5.51cto.com/51cto/cms/homepage/2015/css/layout.css">
</head>
<body>
    this is a test page!
</body>
</html>

设置地址栏图片

方法1： favicon.ico放置在网站的根目录

方法2： 放在head内，使用link标签引入

<link rel="shortcut icon" href="http://e.hiphotos.baidu.com/image/pic/item/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg" type="image/x-icon">

base标签

<base/>

  1. 必须置于head里
  2. href属性：定义默认链接地址

  3. target属性：定义默认打开链接的方式（当前页面打开还是新标签打开）

    这个就好比设置物理路径 ，以方便使用相对路径。比如:

    
<head>
<base href="http://mystation/web/" />
<base target="_blank" />
</head>

<body>
<img src="1.gif" />
</body>


# meta标签

## <meta/>
1. 必须置于head里
2. 提供有关页面的元信息，其属性定义了与文档相关联的名称/值对

## <meta/>的属性

**名称（三选一）**

1. **http-equiv：** 把content属性关联到HTTP头部
2. **name：** 把content属性关联到一个名称
3. **scheme：** 定义用于翻译content属性值的格式

**值（必须）**

- **content**

## 举个例子

<meta http-equiv="expires" content="31 Dec 2018">

就会看到返回的HTML http头部包含信息expires:31 Dec 2015


# meta标签中的http-equiv属性

## http-equiv属性

**常见的值：**

- **content-type**      内容类型
- expires           过期时间
- refresh           页面刷新
- set-cookie        设定cookie
- **X-UA-Compatible**   针对IE，设置浏览器优先使用什么模式来渲染页面

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Refresh" content="5;url=https://www.baidu.com" />
<!-- ie会用最高版本渲染，如果安装了gcf（google chrome frame）可以使用chrome渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


# meta标签中的name属性

## name属性
**常见的值：**

    description         描述
    keywords            关键词
    renderer            设置浏览器渲染内核
    viewport            指定用户是否可以缩放页面

## 举例

<meta name="renderer" content="webkit">

<meta name="description" content="中国领先的IT技术网站51CTO(www.51cto.com)是一个为CTO、IT技术经理、系统工程师、网络工程师、安全工程师、数据库工程师、网络管理员、开发工程师、项目管理人员等IT技术人员搭建的互动媒体平台，主要为IT技术人员提供新闻资讯、技术文档、BBS、博客、技术圈、培训课程、人才交流等专业服务。">

<meta name="keywords" content="技术新闻,职场培训,IT技术博客,软件,辞典,网址,专题,投稿,网络,系统应用,网络安全,网络编程,存储备份,操作系统,数据库,案例库,设备选型,资源中心,路由器,交换机,防火墙,服务器,局域网,DB2,Oracle,C++,JAVA,EBA,linux,Java,安全,漏洞,病毒,网管新闻,网络人物,网管入门,网络编程,系统构建,网络安全,操作系统,数据库,存储备份,设备采购,网管生活,职场学习">

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>


# script标签

## <script><script/>

1. 可置于head里，也可置于body里
2. 定义客户端脚本或引入脚本

## <script><script/>的属性

**必填属性：**

    type        指定脚本的类型，text/javascript

**选填属性：**

    src         外部脚本文件的URL
    defer       规定是否对脚本执行进行延迟，直到页面加载为止，值和属性名一样
    async       规定异步执行脚本（仅适用于外部脚本），值和属性名一样

## 举例

<script type="text/javascript" src="https://static1.51cto.com/51cto/cms/homepage/2015/js/slide.js"></script&gt;

<script type="text/javascript" src="https://tce.alicdn.com/api/data.htm?callback=tce_175785&ids=175785" async=""></script>

<script type='text/javascript'>
alert('hello')
</script>


# style标签

## <style><style/>

1. 置于head里
2. 为HTML文档定义样式信息

## <style><style/>的属性

**必填属性：**

    type        指定样式表的类型，text/css

**选填属性：**

    media       为样式表规定不同的媒介类型

## media属性

**常用的值：**

    screen      计算机屏幕（默认值）
    print       打印预览模式/打印页
    headheld    手持设备
    all         所有设备

## 举例

<style type="text/css">
p {color: blue}
</style>


# h1到h6标签

## <hx><hx/>

1. 定义标题，文档的重点内容
2. h1是最大的标题，h6是最小的标题
3. 常用h1-h3

## 举例

<h1>一级标题测试</h1>
<h2>二级标题测试</h2>
<h3>三级标题测试</h3>

标签
meta
html代码
html语言
meta标签
html文件
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!