[前端笔记]第一篇:html

zoukankan html css js c++ java

[前端笔记]第一篇:html
什么是 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（块）元素的特点
1. 总是在新行上开始；
2. 高度，行高以及外边距和内边距都可控制；
3. 宽度缺省是它的容器的100%，除非设定一个宽度。
4. 它可以容纳内联元素和其他块元素
inline(内联)元素的特点
1. 和其他元素都在一行上；
2. 高，行高及外边距和内边距不可改变；
3. 宽度就是它的文字或图片的宽度，不可改变
4. 内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

一、基础标签

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

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

<b> 加粗文本

<strike> 给文本一个删除线

<em> 文本斜体效果

<sup> 上角标,即 4²

<sub> 下角标,即 C₁

<br> 换行符

<hr> 水平线

<div> 给css用的标记

<span>　给css用的标记

二、图片标签

<img>

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

图片的宽

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: 外边距.

像素百分比.（最好通过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
查看全文

相关阅读:
RabbitMQ高级部分
 深入了解RabbitMQ
js控制mui-popover弹出与关闭及移动网盘分享文件格式
 Hbuilder页面之间的跳转及关闭功能
 页面下载远程服务器单个及多个文件并打成压缩包下载到本地
 手机端下载文件及创建文件夹
 input上传文件对象
 上传文件解决获取multi=JakartaMultiPartRequest问题
 jsp页面选择文件上传，获取不到绝对路径问题
 activiti官网实例项目activiti-explorer之扩展多选框回显功能

原文地址：https://www.cnblogs.com/yaohan/p/5613590.html

[前端笔记]第一篇:html

什么是 HTML？

html三个主要标签

<!DOCTYPE>标签

<head>标签

一、<title>

二、<meta>

三、<http-equiv>

四、<style>

五、<link>

<body>标签

零、块级标签和内联标签

一、基础标签

二、图片标签

三、超链接标签

四、列表

五、表格

<table>

六、表单

<select>

<textarea>

<label>

<fieldset>

七、特殊符号

html三个主要标签　

三、<http-equiv>　　

<table>　