[前端笔记]第一篇:html

whitek · 发表于 2017-6-22 08:05:46

什么是 HTML？
　　HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
　　

　　如果一个用户访问了类似http://www.example.com/index.html的网址,
　　在这个页面使用浏览器的"查看网页源代码"可以看到很多用<>标记的标签.
　　其中:<>是标记;<head><body>是标签
　　这是(http://www.example.com/index.html)网页源代码

<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p><a href="http://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>

html三个主要标签　
　　这里介绍一个完整的html都会有的三个部分,无论html文件里面内容有多少,他们都会出现.
　　就好比html的骨架.

<!DOCTYPE>标签
　　<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
　　<!DOCTYPE> 声明不是 HTML 标签；它是指示浏览器使用什么样的html或xhtml规范来解析html文档
　　HTML语言需要一个标准，当我们在第一行指定了<!DOCTYPE html>的时候，当浏览器去访问我们的代码的时候就就按照HTML代码里指定的标准去读取和渲染给我们展现的页面。
　　好比编写python文件我们会在文件的开头写入"#!/usr/bin/env python"告诉os要用python解释器去执行python程序一样
　　那为什么要使用<!DOCTYPE html>去通知浏览器呢?我们先来看看什么是DOCTYPE吧~
　　DOCTYPE模式：

BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

　　
　　当Netscape4（网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题（bugs），但是依然延续CSS实现中的其它故障（主要是盒模型（box model）问题）。
　　为了保证自己的网站在不同的浏览器中都能正确展现，网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。
　　然而随着标准一致性变得越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现，完整去遵循标准，会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS，陈旧的网站显示必然受到影响。
　　因此立即遵循标准会产生问题，然而忽略标准则又会维持浏览器大战时（微软和网景之间的一段竞争）所产生的混乱。
　　浏览器厂商的解决方案:
　　1.允许网站开发者能够选择他们所熟知的模式。
　　2.依然使用旧式规则显示陈旧的网站。
　　所有的浏览器需要提供两种模式：兼容模式服务于旧式规则，严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式，Mozilla， Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。
　　以上部分参考(http://www.cnblogs.com/lxin/archive/2013/02/18/2915344.html)
　　html5里的DOCTYPE声明

<!DOCTYPE html>
<head>标签
　　<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
　　文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
　　下面这些标签可用在 head 部分<title>, <meta>, <script>, <style>, 以及 <link>,。

一、<title>
　　定义文档的标题

<title>Hello World!</title>

二、<meta>
　　标签里面有name和http-equiv两个属性:
　　name属性用来描述网页,和SEO有一定的关系

<meta name="description" content="京西JX.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑,为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,京西">

三、<http-equiv>　　
　　http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。
http-equiv 属性可用于模拟一个 HTTP 响应头。
　　30秒刷新一次页面

<head>
<meta http-equiv="refresh" content="30">
</head>
　　2秒后跳转到其他网站

<meta http-equiv="Refresh"content="2;URL=https://www.google.com">
　　设置字符集

<meta http-equiv="content-Type"content="text/html;charset=UTF8">
<meta charset="utf-8" /> # 可以简写为这样

四、<style>
　　引入css文件

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

五、<link>
　　在head标签里面可以定义网页的favicon.ico

<link rel="icon" href="http://www.jx.com/favicon.ico">
　　

<body>标签

零、块级标签和内联标签

块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
　　block（块）元素的特点

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

　　inline(内联)元素的特点

和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

　　
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

一、基础标签
　　<h1> 此标签有h1~h6,从大到小表示标题的大小.
　　

　　<p> 段落标签,被其包裹的内容和其他行之间有一行空白.
　　

　　<b> 加粗文本
　　<strike> 给文本一个删除线
　　<em> 文本斜体效果
　　<sup> 上角标,即 42
　　<sub> 下角标,即 C1
　　

<br> 换行符
　　<hr> 水平线
　　<div> 给css用的标记
　　<span>　给css用的标记

二、图片标签
　　<img>
　　src: 要显示图片的路径.
　　alt: 图片没有加载成功时的提示.
　　title: 鼠标悬浮时的提示信息.
　　width: 图片的宽
　　height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

<img src="https://goo.gl/eg8hpJ" alt="这是一张图片" title="Google" width="auto" height="auto">

三、超链接标签
　　<a>
　　href:要连接的资源路径格式如下: href="http://www.baidu.com"
　　target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
　　name: 定义一个页面的书签.
　　用于跳转 href : #书签名称.

<a href="https://goo.gl/eg8hpJ" target="_blank" name="one">Google Logo</a>

<a href="#123">跳转到下一个地方</a>

四、列表

<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<es>Defines a description list

　　<ul> 无序列表　　

<a>无序列表</a>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
　　<ol>有序列表

<a>有序列表</a>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
　　<dl>定义列表
　　<dt>列表标题
　　<dd>列表项

<a>定义列表</a>
<dl>
<dt>湖北省</dt>
<dd>武汉市</dd>
<dd>黄石市</dd>
<dd>宜昌市</dd>
<dt>海南省</dt>
<dd>海口市</dd>
<dd>三亚市</dd>
<dd>文昌市</dd>
</dl>

五、表格

<table>　
　　border: 表格边框.
　　cellpadding: 内边距.
　　cellspacing: 外边距.
　　width: 像素百分比.（最好通过css来设置长宽）
　　<tr>: table row
　　<th>: table head cell
　　<td>: table data cell
　　rowspan: 单元格竖跨多少行
　　colspan: 单元格横跨多少列（即合并单元格）
　　<th>: table header <tbody>(不常用): 为表格进行分区.

<a>表格</a>
<table border="1" cellpadding="50" cellspacing="100">

<thead> 
<tr> 
<td>第一列</td> 
<td>第二列</td>
<td>第三列</td>
</tr>
</thead>
<tbody> 
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>

<a>合并表格</a>
<table border="1">
<thead>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">1,2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6,9</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
合并表格
六、表单
　　表单用于向服务器传输数据。
　　表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
　　表单还可以包含textarea、select、fieldset和 label 元素。
　　1.表单属性
　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
　　action 指定一个接口地址,告诉表单要提交数据到哪儿
　　method 表单的提交方式,分为get和post
　　get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
　　post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
　　get/post是常见的两种请求方式.　　
　　get就好比写信用明信片,post好比把信息装入信封.
　　2.表单元素
　　表单元素有<input>,<select>,<textarea>,<label>和<fieldset>
　　<input> type
　　text 文本输入框
　　password 密码输入框

<form action="https://www.sogou.com/english?query" method="get"> 
<p><input type="text" name="query" value="Python"></p> 
<p><input type="submit" value="搜狗一下"></p>          
</form>
　　radio 单选框

<form action="https://www.sogou.com/english?query" method="post">
<p>
男<input type="radio" name="gender" value="1">
女<input type="radio" name="gender" value="2">
</p>
</form>
　　checkbox 多选框

<form action="https://www.sogou.com/english?query" method="post">
<p>
Football<input type="checkbox" name="favourite" value="1">
Basketball<input type="checkbox" name="favourite" value="2">
</p>
</form>
　　submit 提交按钮

<form action="https://www.sogou.com/english?query" method="get"> 
<p><input type="text" name="query" value="Python"></p> 
<p><input type="submit" value="搜狗一下"></p>          
</form>
　　
　　button 按钮(需要配合js使用.) button和submit的区别？

<form action="https://www.sogou.com/english?query" method="post">
<input type="button" value="提交">
</form>
　　
　　file 提交文件：form表单需要加上属性enctype="multipart/form-data"

<form action="https://www.sogou.com/english?query" method="post">
<input type="file" name="video_file" accept="application/mp4">  
</form>
　　------------------------------------------------------------------------------------------------------------------------

name: 表单提交项的键.
注意和id属性的区别：
name属性是和服务器通信时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
value: 表单提交项的值.
对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
　　------------------------------------------------------------------------------------------------------------------------

<select>
　　下拉选标签属性：
　　name:表单提交项的键.
　　size：显示选项个数
　　multiple：multiple 同时选中多个
　　<option> 下拉选中的每一项属性：value:表单提交项的值. selected: selected下拉选默认被选中
　　<optgroup>为每一项加上分组

<select name="city" multiple="multiple" size="3">
<option value="1">湖北</option>
<option value="2">湖南</option>
<option selected value="3">河南</option>
</select>

<textarea>
　　文本域 name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行

<textarea cols="25" rows="25"></textarea>

<label>

<label for="abc">Football</label>
<input id="abc" type="checkbox" name="favourite" value="1">
<label for="cde">Basketball</label>
<input id="cde" type="checkbox" name="favourite" value="2">

<fieldset>

<fieldset>
<legend>Next Song: Hello</legend>
<h1>Hello, It's Me.</h1>
</fieldset>

七、特殊符号
　　< 小于号
　　&gt；大于号
　　&quot；引号
　　©copyright标志
　　®注册商标标志
更多参见http://tool.chinaz.com/Tools/htmlchar.aspx

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] [前端笔记]第一篇:html

扫码加入运维网微信交流群