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. position:fixed 失效

    如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 . 把 transform删除或设置为none就可以解决啦. 但是如果trans ...

  2. spring 循环依赖问题

    今天碰到一个问题,项目启动,初始化bean的时候,报下面的错: Bean with name ‘*********’ has been injected into other beans [***** ...

  3. 关于Java 实现抽象类的抽象方法的特性的利用---面向切面

    今天看工作看代码突然有了以下设想: /** * Created by zq on 2017/5/25. * 抽象类 */ public abstract class AbstractC { publi ...

  4. [C++]常识回顾

    1.基本/常用数据类型及其取值范围 类型标识 名称 占用字节数(位数) 取值范围 bool 逻辑型 1(1) 常量true或者false char 字符型 1(8) [2^7, 2^7 - 1] 或者 ...

  5. Python学习之json序列化

    一.什么是序列化 在我们存储数据或者网络传输数据的时候,需要对我们的对象进行处理,把对象处理成方便存储和传输的数据格式.这个过程叫序列化,不同的序列化结果也不同,但目的是一样的,都是为了存储和传输 在 ...

  6. 使用Python批量修改文件名

    使用os.rename(fold,newfilename)对文件重命名 # coding:utf-8 import os filename_list = os.listdir('./') for fi ...

  7. 【JS】空格分隔手机号

    '88888888888'.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3')

  8. mui卡片视图的制作

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. python之import模块及包的调用

    模块概念 在Python中,一个.py文件就称之为一个模块(Module).使用模块组织代码,最大的好处是大大提高了代码的可维护性 模块一共三种:python标准库.第三方模块.应用程序自定义模块. ...

  10. 20165234 [第二届构建之法论坛] 预培训文档(Java版) 学习总结

    [第二届构建之法论坛] 预培训文档(Java版) 学习总结 我通读并学习了此文档,并且动手实践了一遍.以下是我学习过程的记录~ Part1.配置环境 配置JDK 原文中提到了2个容易被混淆的概念 JD ...