HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

格式：
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

标题：<h1> 定义最大的标题。 <h6> 定义最小的标题
<h1> this is a title </h1> (h+index)
段落：
<p> this is a pargraph </p>
链接：
<a href="http://xutao.com"> </a>， target定义打开的地方，下面是在新标签
<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
图像：
<img src="/images/logo.jpg" width="258" height="33" />
换行：<br> 标签定义换行，无结束标签
注释：<!-- 这是一个注释 -->
水平线： <hr>
字体：<font size="6">这是6号字体文本</font>
1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。
头部：
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

背景色：<body style="background-color:yellow;">

字体颜色：
font-family（字体），color（颜色），和font-size（字体大小
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

对齐方式：<h1 style="text-align:center;">居中对齐的标题</h1>

属性：
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

文本格式化：

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

<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

图像：
<img src="url" alt="some_text">
alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

表格：
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border = "2"（默认0）,weight="500px"(大小默认按内容调整)，align = "center"> 定义表格
<th> 定义表格的表头
<tr valign = "center/top/bottom"> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题，，，，
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
cellspacing 外边距
cellpadding 内边距
bgcolor 背景颜色

列表： 可以嵌套
无序：使用 <ul> 标签 unordered list
<ul>
<li>Coffee可以添加其他</li>
<li>Milk</li>
</ul>
有序：有序列表始于 <ol> 标签 ordered list
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项

<dl> 定义列表 definition list
<dt> 自定义列表项目 definition description
<dd> 定义自定列表项的描述

注意：
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）内联元素在显示时通常不会以新行开始。
大多数 HTML 元素被定义为块级元素或内联元素。
<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器
<span> 元素是内联元素，可用作文本的容器

可以在一个div中加入多个div，父div的属性也会成为子div的属性；

表单：一个包含表单元素的区域。<form>
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。多数情况下被用到的表单标签是输入标签（<input> 类型属性（type））
<form>
First name: <input type="text" name="firstname"><br>
<input type="radio" name="sex" value="male">Male<br> 单选框name必须相同
Password: <input type="password" name="pwd">
<input type="checkbox" name="vehicle" value="Car">
<input type="button" value="Hello world!">
</form>

提交按钮：
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
表单的动作属性定义了目的文件的文件名，method定义操作方式如get

文本域
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

下拉框：
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</form>

<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist>New 指定一个预先定义的输入控件选项列表
<keygen>New 定义了表单的密钥对生成器字段
<output>New 定义一个计算结果

框架，
你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="URL" width="200" height="200" ></iframe>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
设置一个框架，设置好名称name，然后新建一个链接，让target属性指向该名称
框架内已经可以显示src的内容

HTML 颜色由一个十六进制符号来定义（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
所以color属性可以使用：rgb(1,2,2) 或者是rgba(1,1,1,透明度)

141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）
17标准颜色：黑色，蓝，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。

不间断空格(Non-breaking Space)：
如需在页面中增加空格的数量，您需要使用 &nbsp; 字符实体。
空格 &nbsp;  
一个空格<&#160>两个空格<&#160&#160>结束

统一资源定位器(Uniform Resource Locators)
说明:URL 只能使用 ASCII 字符集.
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

常见Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。

编码模板：
文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>

<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">
样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
表格（Tables）
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>

<hr/> 分割线
</table>

HTML_1的更多相关文章

  1. R语言-用R眼看琅琊榜小说的正确姿势

    博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html 目录: 零:写在前面的一些废话 一.R眼看琅琊榜的基本原理 1.导入数据 2.筛选数据 3.多条 ...

  2. 简单的ajax获取json

    一个DBhelper类,用来操作数据库 using System; using System.Collections.Generic; using System.Linq; using System. ...

  3. 开始 第一个自己的python爬虫程序 爬磁力链

    不能一事无成,这么久了学python还是吊着,要落地,落在博客园好了,好像公司也只能上博客园了 昨天看了一篇用正则爬电影天堂的视频,直接拿来用,爬磁力吧,爬好玩的 #导入模块 import reque ...

  4. python爬虫挂代理

    以下是GET的方法,使用的代理接口网站是 http://www.xicidaili.com/nn/ #-*- coding:utf-8 -*- from bs4 import BeautifulSou ...

  5. python网页爬虫小项目开发

    这是我最近接的一个小项目,花了是整整四天多时间. 任务是将http://www.examcoo.com/index/detail/mid/7网站下所有的试卷里的试题全部提取出来,首先按照题型进行分类, ...

  6. 网络爬虫之网站图片爬取-python实现

    版本1.5 本次简单添加了四路多线程(由于我电脑CPU是四核的),速度飙升.本想试试xPath,但发现反倒是多此一举,故暂不使用 #-*- coding:utf-8 -*- import re,url ...

  7. python3----练习题(爬取电影天堂资源,大学排名,淘宝商品比价)

    import requests import re url = 'http://www.ygdy8.net/html/gndy/dyzz/list_23_{}.html' for n in range ...

  8. Pyhton网络爬虫实例_豆瓣电影排行榜_Xpath方法爬取

    -----------------------------------------------------------学无止境------------------------------------- ...

  9. python3----练习题(弹幕跟随)

    # 导入模块 import requests # 1. 网络请求 2.pip install requests import time # 用于时间控制 import random # 随机模块 产生 ...

随机推荐

  1. GCC编译器原理（一）04------GCC 工具：nlmconv、nm、objcopy、objdump和 ranlib

    1.3.13 nlmconv nlmconv 将可重定位的对象文件(Infile)转换为 NetWare 可加载模块(outfile),并可选择读取头文件信息获取 NLM 头信息. 选项,描述 -I ...

  2. gcd 二进制/循环

    #include<bits/stdc++.h> #define LL long long using namespace std; inline aabs(LL x){ ?x:-x;} i ...

  3. 20155324 2016-2017-2 《Java程序设计》第1周学习总结

    20155324 2016-2017-2 <Java程序设计>第1周学习总结 教材学习内容总结 1.1.1 前世今生 Java最早是Sun公司绿色项目Green Project中撰写Sta ...

  4. -如何存储并定时更新access_token

    来源:https://blog.csdn.net/sct_t/article/details/53002611 我们知道请求access_Token会返回这样一个json,包括access_token ...

  5. python网络编程初识

    一,什么是计算机网络: 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和 [1]  信 ...

  6. MySQL - COUNT关键字

    基础数据信息 SELECT COUNT(*) AS '用户名的个数' FROM t_user SELECT COUNT(DISTINCT username) AS '用户名不重复的个数' FROM t ...

  7. P1903 [国家集训队]数颜色 / 维护队列（莫队区间询问+单点修改）

    题目链接:https://www.luogu.org/problemnew/show/P1903 题目大意:中文题目 具体思路:莫队单点修改+区间询问模板题,在原来的区间询问的基础上,我们要记录当前这 ...

  8. eclipse使用异常An error has occurred.see error log for more details eclipse

    eclipse使用异常An error has occurred.see error log for more details eclipse 解决Eclipse,MyEclipse出现An erro ...

  9. 【CentOS7.0】虚拟机如何实现扩展存储空间

    写在前面的一些小废话 有时候,虚拟机随着使用,会导致存储不够,这时就需要给虚拟机扩容. 扩容的前提是,此虚拟机没有快照. 扩容时,需要编辑虚拟机设置.为了形成对比,第一张图片是扩容前,第二张图片是扩容 ...

  10. Java基础2-基本语法

    复习 jvm : 虚拟机 --> sandbox jre : jvm + 核心类库 jdk : jre + 工具,javac java path: 操作系统搜索路径 classpath: jav ...