小人物_cipher
小人物_cipher

HTML菜鸟教程学习笔记

最近想学习学习前端相关，先从基础吧；
本文主要是在菜鸟笔记上的html教程中的笔记或者总结，主要给自己查询；
参考链接：http://www.runoob.com/

HTML 教程

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。


<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
head>
<body>
    <h1>我的第一个标题h1>
    <p>我的第一个段落。p>
body>
html>
  • 注意:HTML中不支持 空格、回车、制表符，它们都会被解析成一个空白字符。
  • 只有在MySQL中可以使用”utf-8”的别名”utf8”，但是在其他地方一律使用大写”UTF-8”
  • 推荐使用长后缀名 html. htm 是历史遗留的8.3字符限制命名方式.从 htm 和 html 中选择时，也应该选择无限制长度命名方式的 html 。

HTML简介





菜鸟教程(runoob.com)


    
我的第一个标题

    
我的第一个段落。




 声明为 HTML5 文档
 元素是 HTML 页面的根元素
 元素包含了文档的元（meta）数据
 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
</code></pre> 
  <h3 id="什么是html">什么是HTML?</h3> 
  <ul> 
   <li>HTML 指的是超文本标记语言: HyperText Markup Language </li> 
   <li>HTML 不是一种编程语言，而是一种标记语言 </li> 
   <li>标记语言是一套标记标签 (markup tag) </li> 
   <li>HTML 使用标记标签来描述网页 </li> 
   <li>HTML 文档包含了HTML 标签及文本内容 </li> 
   <li>HTML文档也叫做 web 页面</li> 
  </ul> 
  <h3 id="html-标签">HTML 标签</h3> 
  <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 <br> HTML 标签是由尖括号包围的关键词，比如 <br> HTML 标签通常是成对出现的，比如 <b> 和 </b> <br> 标签对中的第一个标签是开始标签，第二个标签是结束标签 <br> 开始和结束标签也被称为开放标签和闭合标签</p> 
  <h3 id="html-元素">HTML 元素</h3> 
  <p>“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思. <br> 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签</p> 
  <h3 id="web-浏览器">Web 浏览器</h3> 
  <p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。 <br> 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户： <br> * head 里面不显示，只有 区域 (白色部分) 才会在浏览器中显示。</p> 
  <h3 id="声明"> 声明</h3> 
  <p>声明有助于浏览器中正确显示网页。 <br> 网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。 <br> doctype 声明是不区分大小写的，以下方式均可：</p> 
  <pre><code><!DOCTYPE html> 
<!DOCTYPE HTML> 
<!doctype html> 
<!Doctype Html>
</code></pre> 
  <h3 id="中文编码">中文编码</h3> 
  <p>目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。</p> 
  <pre><code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题




我的第一个标题



我的第一个段落。

HTML基础

  • HTML 标题（Heading）是通过标签来定义的.
  • HTML 段落是通过标签 < p> 来定义的.

  • HTML 链接是通过标签 < a> 来定义的.

    这是一个链接

  • HTML 图像是通过标签 < img> 来定义的.

HTML元素

  • 开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
  • HTML 元素以开始标签起始，HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性
  • 元素可以嵌套
  • 不要忘记结束标签
  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。比如
    ，HTML、XHTML 和 XML 都接受这种方
  • 使用小写标签；

HTML 属性

  • 属性是 HTML 元素提供的附加信息。
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name=”value”。
  • 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。比如属性值本身就含有双引号，那么您必须使用单引号，
  • 推荐标准中推荐小写的属性/属性值。
    class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
    id  定义元素的唯一id
    style   规定元素的行内样式（inline style）
    title   描述了元素的额外信息 (作为工具条使用)

HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的.
浏览器会自动地在标题的前后添加空行
查看源代码:右键，然后选择"查看源文件"（IE）或"查看页面源代码";

<html>  定义 HTML 文档
<body>  定义文档的主体
<h1> - <h6> 定义 HTML 标题
<hr>    定义水平线
  定义注释
1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

HTML 段落

段落是通过 <p> 标签定义的
<p>这是一个段落 p>
不要忘记结束标签
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签;
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

<p> 定义一个段落
<br>    插入单个折行（换行）

HTML 文本格式化

<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示;

文本格式化:
<b> 定义粗体文本
<em>    定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong>    定义加重语气
<sub>   定义下标字
<sup>   定义上标字
<ins>   定义插入字
<del>   定义删除字

 "计算机输出" 标签
 <code> 定义计算机代码
<kbd>   定义键盘码
<samp>  定义计算机代码样本
<var>   定义变量
<pre>   定义预格式文本

HTML 引文, 引用, 及标签定义
<abbr>  定义缩写
<address>   定义地址 
<bdo>   定义文字方向
<blockquote>    定义长的引用
<q> 定义短的引用语
<cite>  定义引用、引证
<dfn>   定义一个定义项目。

css:文本显示为单行，超过部分隐藏并使用省略号，实例:
div {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:120px;
}

HTML 链接

HTML使用标签 <a>来设置超文本链接。
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
<a href="url">链接文本a>

使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!a>

HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。

请始终将正斜杠添加到子文件夹。

图片链接
<a href="http://www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32">a>

跳出框架
<a href="http://www.runoob.com/" target="_top">点击这里!a>

HTML head

<head>  定义了文档的信息
<title>定义了文档的标题
<base>  定义了页面链接标签的默认链接地址
<link>  定义了一个文档和外部资源之间的关系,常用于链接到样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">

<meta>  定义了HTML文档中的元数据
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

<script>    定义了客户端的脚本文件,<script>标签用于加载脚本文件，如： JavaScript。