Html5学习

发表于 2019-04-26

Html5语法

沿用了Html的语法，但更为简洁，更人性化了。

看下面一个案例就知道了

<!-- Html5版本声明 DOCTYPE -->
<!DOCTYPE html>
<!-- Html5指明语言 -->
<html lang="zh-CN">
<head>
	<!-- 指明文档字符集-->
	<meta charset="UTF-8">
	<title>Html5语法</title>
</head>
<body>
	<form >
		<!-- html5增加了布尔值属性，当这个属性这样写时表示为true,删除表示为false
		  像以前这里就必须写上checked="checked" -->
		<input type="checkbox" checked>
		<!-- html5中属性值可以是单引号页也可以是双引号 设置可以省略不写 -->
		<input type='text'>
		<!-- 可以看到这里大小写都可以，在xthml里是不允许的 这也就是为了兼容更多的文档-->
		<Ipunt Type=Radio/>
		<input></input>
		<!-- 这个p标签的闭合标签可以省略不写，浏览器照样能解析出来 -->
		<p>haha</p>
	</form>
</body>
</html>

总结：虽然Html5允许可以省略一些闭合标签，但是为了规范我们还是要补上。

HTML5新增及删除标签

新增的标签主要分为四类：

1.结构标签

2.表单标签

3媒体标签

4其它功能标签

同时也废除了一些标签

1可以用CSS替代的标签

2不在使用frame

3只有个别浏览器支持的标签

4其它不常用的标签

结构标签

这些结构标签过去都是由div实现的，为了给它进行语义化的划分，HTML5中把div划分成以下的标签：

初识CSS(二)

发表于 2019-04-19

引言

本篇文章继续学习CSS，主要学习CSS的三大模块：盒子模型、浮动、定位。

盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

看透网页布局的本质

本质就是把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

CSS 其实没有太多逻辑可言，类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。

盒子模型(Box Model)

这里略过老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。

首先，我们来看一张图，来体会下什么是盒子模型。

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子边框

语法：

1	border : border-width \|\| border-style \|\| border-color

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

盒子边框写法总结


设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度样式颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度样式颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度样式颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度样式颜色;
样式综合设置	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边下边左边];	像素值
颜色综合设置	border-color:上边 [右边下边左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度四边样式四边颜色;

border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green; /*下边框*/
border-left: 1px solid blue;
border-right: 5px solid pink;
border: 1px solid red;

表格的细线边框

以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。让我们真的相信，CSS就是我们的白马王子（白雪公主）。

1
2
3

table{ border-collapse:collapse; }  collapse 单词是合并的意思

border-collapse:collapse; 表示相邻边框合并在一起。

圆角边框(CSS3)

从此以后，我们的世界不只有矩形。radius 半径（距离）

语法格式：

1	border-radius: 50%;

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意：后面跟几个数值表示的意思是不一样的

值的个数	表达意思
1个值	padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3个值	padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

内边距的问题

内边距会使得有宽高的盒子变大。但我们经常有需求要求盒子宽高固定，padding固定。怎么做呢？

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

1	.header{ width:960px; margin:0 auto;}

文字盒子居中图片和背景区别

文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto

1 2	text-align: center; /* 文字居中水平 / margin: 10px auto; / 盒子水平居中左右margin 改为 auto 就阔以了 */

插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

section img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

aside {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
	
		background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */
		background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
	}

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意： 行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。

待续。。。。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

盒子模型布局稳定性

开始学习盒子模型，最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

答案是：其实他们大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

1	width > padding > margin

原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。

盒子阴影

语法格式：

1	box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影；

前两个属性是必须写的。其余的可以省略。
外阴影 (outset) 但是不能写默认想要内阴影 inset

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

初识HTML+CSS

发表于 2019-04-02

引言

现在大前端的概念特别火，公司也是准备往这个方向做技术转型。所以，我就开始重拾多年前抛弃的前端知识，从头开始学起。本篇是对自己在慕课网学习《初识HTML+CSS》这门课程做的一个学习笔记。

HTML学习

HTML介绍

HTML概念

Html指的是HyperText Markup Language超文本标记语言，它用标签来描述网页。HTML文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面。
Html标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
1
<html>
HTML 标签通常是成对出现的，比如
1
<b></b> <p></p>
标签对中的第一个标签是开始标签，第二个标签是结束标签。开始标签和结束标签中间放置内容

HTML标签不区分大小写，如<h1>和<H1>是一样的，但建议小写，因为大部分程序员都是用的小写

HTML标签可以嵌套的，但现后顺序必须是一致的
HTML元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:
1
<p>这是一个段落</p>
Web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

注：只有 <body> 标签中的内容才会在浏览器中显示。
HTML版本
HTML、CSS和JavaScript之间的关系
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
HTML文件的基本结构
1
2
3
4
<html>
<head>...</head>
<body>...</body>
</html>
1. <html></html>称为根标签，定义了整个HTML文档。所有的网页标签都在<html></html>中。
2. <head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
HTML注释
1

认识标签

语义化

标签的语义化，其实就是指标签的用途。说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

语义化可以给我们带来什么样的好处呢？
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。

Head标签

<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>,<style>,<meta>,<link>, <script>,<noscript>, and <base>.

title标签

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML文档中是必须的。
<title>元素：

1.定义了浏览器工具栏的标题

2.当网页添加到收藏夹时，显示在收藏夹中的标题

3.显示在搜索引擎结果页面的标题
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
<title>我是网页标题</title>
</head>
<body>
</body>
<html>
base标签

base 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
1
2
3
<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>
link标签

定义了文档与外部资源之间的关系。

link标签通常用于链接到样式表:
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
style标签

style标签定义了HTML文档的样式文件引用地址.

meta标签

meta标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<head>
	<!--为搜索引擎定义关键词--	>
	<meta name="keywords" content="HTML,CSS"/>
	<!--为网页定义描述内容-->
	<meta name="description" content="免费 web 编程"/>
	<!--为网页定义作者-->
	<meta name="author" content="HTML"/>
	<!--每30秒钟刷新当前页面-->
	<meta http-equiv="refresh" content="30"/>
</head>

script标签

script标签用于加载脚本文件，如： JavaScript。

段落与文字

hx标签

标题（Heading）是通过 <h1> -<h6> 等标签进行定义的。其中<h1> 定义最大的标题，<h6> 定义最小的标题。
p标签

段落是通过p标签来定义的，它可以将HTML文档分割为若干段落部分。因为p标签是块级元素，所以浏览器会自动地在段落的前后添加空行。
br标签

用来换行

文本格式化

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者<em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

<b>这是粗体1</b><br/>
<strong>这是粗体2</strong><br/>
<i>这是斜体1</i><br/>
<em>这是斜体2</em><br/>
<code>一行代码</code><br/>
<small>这是小号字体</small><br/>
<big>这是大号字体</big><br/>
这是<sub>下标</sub>和<sup>上标</sup><br/>
这是<ins>插入字（字下面带下划线）</ins>和<del>删除字（字带删除线）</del><br/>
这是<kbd>键盘码（效果字会变小）</kbd><br/>
<samp>定义计算机代码样本</samp><br/>
<var>变量a</var><br/>
<pre>
    大段格式化文字
    大师傅似的
    是豆腐
</pre>
<code>这里是代码</code><br/>
<abbr>这是缩写</abbr><br/>
<address>定义地址</address><br/>
<q>短引用</q>
<blockquote>大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用大量引用</blockquote>
<cite>定义引用、引证</cite><br/>
<dfn>定义一个定义项目</dfn>

效果如下

HTML区块

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）；而内联元素则不会。

块级元素如<h1>,<p>, <ul>,<table>

内联元素如<b>,<td>, <a>, <img>
- HTML span标签
  
  它是内联元素，可用作文本的容器，与 CSS 一同使用时，<span> 元素可用于为部分文本单独设置样式属性，没有语义
- HTML div标签
  
  HTML <div> 元素是块级元素，浏览器会在其前后显示折行，可以划分独立得逻辑单元，把相同单元的元素放在div元素里
  
  如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
HTML字符实体

在 HTML 中，某些字符是预留的。

比如在 HTML 中不能使用小于号（<）和大于号（>）因为浏览器会误认为它们是标签，所以希望能正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

字符实体类似这样：

比如要想显示空格，必须使用

HTML列表

HTML 支持有序、无序和定义列表。其中，无序列表默认使用粗体圆点（典型的小黑圆圈）进行标记；有序列表默认使用数字进行标记。
- 有序列表
  
  有序列表由<ol>标签开头，每个列表项由<li> 标签开头
  1
  2
  3
  4
  5
  6
  <ol>
  <li>篮球</li>
  <li>羽毛球</li>
  <li>足球</li>
  <li>乒乓球</li>
  </ol>
- 无序列表
  
  无序列表由<ul> 标签开头，每个列表项由<li> 标签开头
  1
  2
  3
  4
  5
  6
  <ul>
  <li>篮球</li>
  <li>羽毛球</li>
  <li>足球</li>
  <li>乒乓球</li>
  </ul>
- 定义列表
  
  定义列表由<dl> 标签开头，每个定义列表项由<dt>标签开头，每个定义列表项的定义以 <dd> 开始
  1
  2
  3
  4
  5
  6
  7
  8
  <dl>
  <dt>LoL</dt>
  <dd>英雄联盟游戏</dd>
  <dt>DOTA</dt>
  <dd>dota游戏</dd>
  <dt>DNF</dt>
  <dd>地下城与勇士</dd>
  </dl>

HTML表格

表格是由 <table> 标签来定义，每个表格的行由<tr>标签定义，每行被分割为若干单元格由 <td> 标签定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!--summary表示表格表述，不显示 border定义边框属性-->
<table summary="班级表" border="1">
	<caption>班级表</caption>
	<tr>
		<th>ID</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>分数</th>
	</tr>
	<tr>
		<td>1</td>
		<td>张三</td>
		<td>18</td>
		<td>90</td>
	</tr>
	<tr>
		<td>2</td>
		<td>李四</td>
		<td>20</td>
		<td>88</td>
	</tr>
 </table>

表格列合并

<table border="1">
	<tr>
        <th>姓名>
        <!--colspan 合并列-->
        <th colspan="2">电话</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19290390932</td>
		<td>13290390932</td>
	</tr>
</table>

表格行合并

<table border="1">
    <tr>
        <th>姓名</th>
        <td>Luck</td>
    </tr>
    <tr>
        <!--rowspan 合并行-->
        <th rowspan="2">电话</th>
        <td>111123123</td>
    </tr>
    <tr>
     <td>323231123</td>
    </tr>
</table>

thead，tfoot,tbody标签

<thead>标签用于组合 HTML 表格的表头内容，<tbody> 标签用于组合 HTML 表格的主体内容,<tfoot> 标签用于组合 HTML 表格的页脚内容。这三个元素标签要结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<table border="1">
  <caption>月份营业额总表</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

HTML表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

form标签

form标签用于创建供用户输入的 HTML 表单。

form标签包含一个或多个如下的表单元素：

input,textarea,button,select,option,optgroup,fieldset,label

当表单提交的数据是是被动的，并且没有敏感信息可采用GET的方式提交

如果表单正在更新数据，或者是包含敏感信息时就可以用POST方式，因为它安全性更高
input标签

用于输入框，其输入类型是由类型属性（type）定义的

注意:同一组的单选按钮，name 取值一定要一致
textarea标签

<textarea>标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
1
<textarea rows="10" cols="20">哈哈，我是默认的内容</textarea>
button标签

<button> 标签定义一个按钮。

在<button>元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input>元素创建的按钮之间的不同之处。

提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

select标签

<select> 元素用来创建下拉列表。

<select> 元素中的 <option>标签定义了列表中的可用选项。

<form>	
	FirstName: <input type="text" name="firstName" value="Jack"/> <br/>
	LastName: <input type="text" name="lastName" value="mick"/><br/>
	你的姓氏：男：<input type="radio" name="sex" value="male" checked="checked"/> 女：<input type="radio" name="sex" value="female"/> <br/>
	你的爱好：篮球<input type="checkbox" name="hobby" value="basktball"/> 足球<input type="checkbox" name="hobby" value="football"/>乒乓球<input type="checkbox" name="hobby" value="pingpang"/><br/>
	<input type="password" name="pwd"/><br/>
	<textarea rows="10" cols="30" name="content">Default world</textarea><br/>
	<button type="button">点我</button>
	请选择最喜欢的老师:
	<select name="teacher">
	  <option value="mick">Mick</option>
   	  <option value="jack">Jack</option>
      <option value="marry">Marry</option>
	</select>
	<input type="submit" value="提交"/>
</form>

表单提交的方式默认是Get，所以请求参数是会放到url中的

如上面提交后url变为file:///C:/Users/Administrator.DESKTOP-EPLRDTE/Desktop/new.html?firstName=Jack&lastName=mick&sex=male&pwd=123&content=Default+world&teacher=jack

HTML链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面

a标签

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

1.一个未访问过的链接显示为蓝色字体并带有下划线。

2.访问过的链接显示为紫色并带有下划线。

3.点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS样式，展示样式会根据 CSS 的设定而显示。

target属性：可以定义被链接的文档在何处显示，值为_blank链接将在新窗口中打开

id属性：id属性可用于创建在一个HTML文档书签标记。书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。当某个a标签定义了id，那么其它链接可以再次指向它

//点击在新窗口中打开百度
<a href="https://www.baidu.com" target="_blank" id="baidu">跳向百度</a>
//点击会跳到上面a标签的位置，并且浏览器的url后面会加上 #baidu
<a href="#baidu">跳到上面a标签的地方</a>

<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。

1	<a href="mailto:598359782@qq.com?cc=xiao@163.com&bcc=xiao3@163.com&subject=你好，这是标题&body=你好，这是内容" title="">发送邮件</a>

link标签

<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

注意： link 元素是空元素，它仅包含属性。

注意：此元素只能存在于 head 部分，不过它可出现任何次数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--rel属性必需。定义当前文档与被链接文档之间的关系。 type 规定被链接文档的 MIME 类型。-->
<link rel="stylesheet" type="text/css" href="https://public.xp.cn/down/course_demo/html/styles.css"> 
</head>

<body>
<h1>我是通过样式文件 styles.css 渲染后显示的。</h1>
<p>我也是。</p>
</body>
</html>

nav标签

<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。
1
2
3
4
5
<nav>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.jikedaohang.com/">极客导航</a>
<a href="https://www.google.com/">谷歌</a>
</nav>

HTML颜色

颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。
HTML图像

通过<img>标签在HTML文档中显示图像。<img>标签是一个空标签，只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性src，源属性的值是图像的 URL 地址。

alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。这个属性主要在浏览器无法载入图像时，替换文本属性告诉用户未加载图像的信息。此时浏览器将显示这个替代性的文本而不是图像，这样有助于更好的显示信息
1
<img src="https://blog.gamersensei.com/wp-content/uploads/2017/05/Slark-Header1080-768x486.png" alt="小鱼人图片"/>
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
HTML属性

HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息。它总是在HTML元素的开始标签中定义的，以名称/值对的形式出现，比如：name=”value”。
1
2
3

<a href="http://www.html.cn/">html中文网</a>
<img src="images/1.jpg">
注意：属性和属性值对大小写不敏感，但最好还是以小写的形式去写；属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。

大多数标签具备的属性

HTML框架

iFrame标签定义了放置在每个框架中的 HTML 文档。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

<!--在body标签中添加iFrame标签，会在当前页面中出现一个单独的页面-->
<body>
	<iframe src="http://www.html.cn" frameborder="1" width="1080px" height="300px" scrolling="yes"></iframe>
</body>

看完这篇无需写shape原理再不懂找我

发表于 2019-01-11 | 分类于拆轮子

引言

在日常开发中，我们经常会碰到这样一个问题：在需要实现一些圆角或者多个状态视图切换等功能时，一般的做法都是将之前写的shape或者selector文件复制一份再修改。这样就导致类似重复的xml文件越来越多，无形中增大了apk包的大小。其实这也没什么，关键不能忍的是每次还都要为起一个新名字想半天…想想真的是繁琐之极！那么有没有一种什么办法来解决呢？

当然是有的。有大佬已经写了个开源库，可以供大家使用。本篇文章是对该库的原理全解。

原理

想要搞懂该库，首先得要搞懂LayoutInflater的内部接口Factory、Factory2。（本篇源码解析基于API26）

阅读全文 »

轻松搞懂自定义蒙层引导原理

发表于 2018-12-18 | 分类于自定义View

本文已授权微信公众号：鸿洋（hongyangAndroid）在微信公众号平台原创首发。

转载请注明出处

引言

蒙层引导在我们项目中一直的做法都是让UI直接切一整张静态图，这样的做法虽然省事，但带来的后果就是适配性太差，还会出现引导图和下面真正的界面不符的情况，让用户感到莫名其妙。因此，就有必要自定义一个蒙层引导视图来解决这个问题。本篇文章主要是对核心原理实现的剖析。

阅读全文 »

记一次8.0手机webview onPageFinshed方法不回调的问题

发表于 2018-11-29 | 分类于 WebView

引言

某天，测试突然找到我，说线上医生端打开帖子详情页后，加载的进度圈一直不会消失。我的第一反应是一脸懵逼。what fuck？？？近两个版本这个页面我压根儿没有做任何改动。难道是用户使用的姿势不对？？？好吧，吐槽归吐槽，问题总归还是要解决的。

阅读全文 »

便捷开发少不了的Stetho

发表于 2018-10-16 | 分类于开发工具库

最近，我负责将Stetho集成到我们项目中。集成过程中，免不了出现一些坑，在此记录填坑之路。

Stetho 是一个功能强大的 Android 应用调试桥，起到桥梁的作用，连接 Android 应用和 Chrome，通过 Chrome 开发者工具调试 Android 应用，提供视图元素检查，网络监控，数据库动态交互，Dumpapp（可扩展的命令行交互接口），JavaScript Console 等功能。

阅读全文 »

微医App启动优化之路

发表于 2018-09-13 | 分类于性能优化

微医项目经过N个版本的迭代，到现在已经很庞大了。这自然就产生了各种问题，其中就包括冷启动慢，白屏时间长问题。本篇文章是对自己优化启动时间的一个总结。

优化前的项目现状

这里以微医 3.4.0 Release包(未优化前)为例，分别对欢迎页(app 第一个页面)及主页在不同手机做连续5次冷启动数据统计。

机型	白屏	欢迎页平均时间	主页平均时间
华为CAM-TL00H 6.0	有	5.039s(无广告会多停留1.5s)	2.1198s
oppoA59S 5.0	有	4.237s(同上)	1.0678s

阅读全文 »

结合实例谈谈约束布局的应用

发表于 2018-03-01 | 分类于布局

概述

约束布局ConstraintLayout是谷歌2016年I/O大会发布的新型的layout布局，旨在最大化的减少复杂布局的层级嵌套，实现布局的扁平化，提升页面的渲染速度。

在AS 2.2的版本以上，默认为App依赖了最新的约束布局库，在创建布局文件时也会默认为约束布局，这从侧面反映出来官方推荐开发者使用约束布局。

阅读全文 »

轻量刷新库EasyPullLayout源码解读

发表于 2017-11-16 | 分类于下拉刷新控件

项目由于历史原因，很多同事可能基于当时的需求引入了众多不同的下拉刷新库。这就造成项目中下拉刷新控件的繁杂混乱，而且后期维护也变得复杂困难。那么，统一控件自然成了亟待解决的问题。而我期望的下拉刷新库是小巧轻量，只提供基本的功能。但又开放接口，易于扩展。偶然逛Gay网，看到了一个刷新库，本篇文章是对该库的源码解析。

介绍

一个支持横向纵向，侵入非侵入，自定义刷新头、刷新尾以及包裹任意刷新内容(ListView、RecyclerView、ViewPager等等)的类库。最关键的是它是一个非常轻量级的类库！整个类库只有一个文件，代码不到500行。

阅读全文 »

kaer

锐情书卷，烹煮江山