17.HTML
HTML简介
hyper text markup language 即超文本标记语言。
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标准模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>主体内容</p>
</body>
</html>
Head 标签
1.<meta/>
定义关于HTML文档的元数据。 重要的属性有三个：http-equiv、name、content
（1）http-equiv 把content属性值关联到http头部。
- Content-Type（浏览器接受的文档类型，一般是text/html）
- refresh（网页刷新，以秒为单位）
- expires（设定网页到期时间，一旦过期，必须到服务器上重传）
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2"> #过两秒自动刷新
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> #过两秒自动跳转到对应的网站
<meta http-equiv="expires" content="6 Jun 2016"/>
（2）name 把content属性关联到一个名称。
- keywords（搜索关键字，用于搜索引擎抓取信息的显示）
- description（搜索到网站后显示的网页内容简描述）
- author（站点制作者信息）
- generator（用以说明生成工具）
<meta name="keywords" content="搜索关键字">
<meta name="description" content="简要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以说明生成工具">
（3）content 定义与http-equiv或name属性相关的元信息，是必要的属性
2.<link/>
引用外部文档，常见于引用外部样式。重要属性有三个：rel、href、type。
<link rel="stylesheet" href="...">
Body标签
1.块级标签和内联标签
block（块）元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素
inline（内联）元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素
2.基本标签
<h1>标题1</h1>
<h6>标题6</h6>
<p>段落</p> <br /> 换行
<hr> 水平线
<u></u> 文字下方加下划线
<div></div> 块级标签
<span></span> 行内标签 空格
> >
< <
3.<a> 超链接标签(锚标签)
重要属性有三个：href、target、name
href 超链接地址：可以是Web上任意资源，包括图片，网页，样式，脚本文件等。href="#"时，表示被链接页面就是当前页面。
target 文档打开时要显示的目标位置，属性值一般有：_blank（新窗口中打开）、_self（默认，在超链接所在的容器中打开）、_parent（在超链接的父容器中打开）、_top（整个容器中打开）、name（框架名称）。
name 锚记名称。作用：跳转到文档的某个地方。返回首页。
（1）超链接
<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>
（2）锚点
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a> <div id="i1" style="height: 600px;">第一章的内容</div>
<div id="i2" style="height: 600px;">第二章的内容</div>
<div id="i3" style="height: 600px;">第三章的内容</div>
4.<form>表单标签
（1）表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中
action表单要提交的地址，用于处理表单的内容（一般是提交字典到后台的一个接口，这个接口是java写成的，提交到这个接口后后台就知道如何处理这些数据了）。
method提交的方法，默认是get方式提交。
get提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
（2）表单元素input
text 文本框输入（默认text文本框类型）。
autocomplete（自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，off表示自动完成不可用，on表示自动完成可用）
disabled（设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容）
password 密码框。（以下属性text和password共有）
size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位）
maxlength（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击
readonly 只读.
placeholder 框内预置内容(灰色)，写上内容时才消失
radio 单选按钮。属性：
name（将name的值设置为相同值，才表示一组数据，才能实现单选功能）
value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked（是否被选中的状态）
checkbox 复选框。
name（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器）
value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked（是否被选中的状态）
file文件域，上传文件（不同的浏览器表现形式不同）
submit 提交按钮。用于提交表单。
reset 重置按钮。清空表单的输入，恢复到表单默认的状态。
button 普通按钮。一般结合javascript使用。
<textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。
name （表单提交项的key）
cols（设置文本域宽度）
rows（设置文本域高度，即行数）
<select> 下拉框标签。使用时要结合<option>子标签一起使用。
name:表单提交项的key
size：选项个数
multiple：多选
<option> 下拉选中的每一项
value（表单提交项的值）
selected（selected下拉选默认被选中）
(3) radio和checkbox
<body>
<form action="ip" method="get">
<div>
<!--单选-->
<p>请选择性别</p>
男：<input type="radio" name="gender" value="M">
女：<input type="radio" name="gender" value="F" checked="checked"> <!--/多选-->
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1">
足球：<input type="checkbox" name="favor" value="2">
台球：<input type="checkbox" name="favor" value="3" checked="checked">
</div>
<input type="submit" value="提交">
<input type="reset" value="重置">
</from>
</body>
(4)textarea多行文本
<textarea name="memo" id="" cols="30" rows="10">请写上你的评价</textarea>
（5）select下拉框
<select name="city" size="2" multiple="multiple">
<option value="1">纽约</option>
<option value="2">深圳</option>
<option value="3" selected="selected">北京</option>
</select>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<form action="ip" method="get">
<div>
<!--单选-->
<p>请选择性别</p>
男：<input type="radio" name="gender" value="M">
女：<input type="radio" name="gender" value="F" checked="checked"> <!--/多选-->
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1">
足球：<input type="checkbox" name="favor" value="2">
台球：<input type="checkbox" name="favor" value="3" checked="checked"> <br /><br /> <!--下拉标签-->
<!--size一次显示的个数，multiple可以多选-->
<select name="city" size="2" multiple="multiple">
<option value="1">纽约</option>
<option value="2">深圳</option>
<option value="3" selected="selected">北京</option>
</select>
<p><textarea name="memo" id="" cols="30" rows="10">请写上你的评价.....</textarea></p>
</div>
<input type="submit" value="提交">
<input type="reset" value="重置">
</from> </body> </html>
全部代码
5.img 图片
<!-- a标签作用：点击图片链接到对应地址-->
<!-- title鼠标移动到图片上面显示的内容-->
<!--alt图片加载不出来的时候的提示信息--> <a href="http://www.baidu.com">
<img src="fanye.jpg" title="范冰冰" alt="美女">
</a>
6.ul、ol、dl 列表
无序，有序，标题列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul> <ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol> <dl>
<dt>1</dt>
<dd>2</dd>
<dd>3</dd>
</dl>
7.table表格
caption: 表格标题
<thead> 表格头部，使结构更加分明
<tbody> 表格主体部分，使结构更加分明
<tr> 表格的数据行
<th> 表格的表头名称，与<td>不同在于文字采用加粗居中的形式显示
<td> 单元格，用来显示表格内容
（1）简单表格
<body>
<table border="1">
<caption>小学一班</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>6</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>小红</td>
<td>8</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
（2）合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>表头1</td>
<td>表头2</td>
<td>表头3</td>
<td>表头4</td>
</tr>
</thead> <tbody>
<tr>
<td colspan="2">1</td>
<!--<td>2</td>-->
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
<td>4</td>
</tr>
<tr>
<!--<td>1</td>-->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html> 合并单元格.html
8.label 标签
把标签与文本关联起来（获取光标）
<label for="username">用户名</label>
<input id="username" type="text" name="user" />
点“用户名”也可以开始输入信息
9.<fieldset>
对表单中的相关元素进行分割
<fieldset>
<legend>温馨提示</legend>
<div align="middle">不要忘记点赞哦 ==</div>
</fieldset>
17.HTML的更多相关文章
- Golang， 以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- .NET平台开源项目速览(17)FluentConsole让你的控制台酷起来
从该系列的第一篇文章 .NET平台开源项目速览(1)SharpConfig配置文件读写组件 开始,不知不觉已经到第17篇了.每一次我们都是介绍一个小巧甚至微不足道的.NET平台的开源软件,或者学习,或 ...
- Centos 6.6 下搭建php5.2.17+Zend Optimizer3.3.9+Jexus环境
(为何安装php5.2.17这个版本 因为phpweb这个程序用到了Zend Optimizer3.3.9 这个东东已经停止更新了 最高支持5.2版本的php 所以就有了一晚上填坑的自己和总结了这篇文 ...
- 企业IT管理员IE11升级指南【17】—— F12 开发者工具
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- CSharpGL(17)重构CSharpGL
CSharpGL(17)重构CSharpGL CSharpGL用起来我自己都觉得繁琐了,这是到了重构的时候. 下载 CSharpGL已在GitHub开源,欢迎对OpenGL有兴趣的同学加入(https ...
- ABP(现代ASP.NET样板开发框架)系列之17、ABP应用层——参数有效性验证
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之17.ABP应用层——参数有效性验证 ABP是“ASP.NET Boilerplate Project (ASP. ...
- 从零开始编写自己的C#框架（17）——Web层后端首页
后端首页是管理员登陆后进入的第一个页面,主要是显示当前登陆用户信息.在线人数.菜单树列表.相关功能按键和系统介绍.让管理员能更方便的找到息想要的内容. 根据不同系统的需要,首页会显示不同的内容,比如显 ...
- ERROR 1010 (HY000): Error dropping database (can't rmdir './test/', errno: 17)
在删除数据库的时候报标题所示错误 mysql> drop database test; ERROR (HY000): Error dropping database (can't rmdir ' ...
- Xamarin for Visual Studio V3.11.431 于 2015.4.3-2015.4.17 最新发布(Win & Mac)
Beta Release: April 3 edited April 17 in Visual Studio Released versions: Windows Xamarin.VisualStud ...
- C#开发微信门户及应用(17)-微信企业号的通讯录管理开发之部门管理
前面一篇随笔企业号的一些基础信息,以及介绍如何配置企业号的回调方式实现和企业号服务器进行沟通的桥梁.本篇主要还是继续介绍企业号的开发工作的开展,介绍微信企业号通讯录管理开发功能,介绍其中组织机构里面如 ...
随机推荐
- 利用while语句,条件为输入的字符不为'\n'.
题目:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. 1.程序分析:利用while语句,条件为输入的字符不为'\n'. 一个很简单的问题,其实换种方式就能完成,但是我就想怎么着才能 ...
- python使用
1. ipython 打印所有的输出变量 from IPython.core.interactiveshell import InteractiveShell InteractiveShell.ast ...
- SpringMVC+FreeMarker实现静态资源文件自动添加版本号(md5)
近日切换java开发,开始学习springframework.在实现静态资源文件自动计算版本号的实例时,因为不熟悉框架,走了不少弯路,好在最终解决了问题.这里写篇文章记录一下实现,也希望对大家有些用处 ...
- 阶乘之和 输入n，计算S＝1！＋2！＋3！＋…＋n！的末6位（不含前导0）。n≤10 6 ，n！表示 前n个正整数之积。
阶乘之和输入n,计算S＝1!+2!+3!+…+n!的末6位(不含前导0).n≤10 6 ,n!表示前n个正整数之积.样例输入:10样例输出: package demo; import java.uti ...
- MySQL 日志的类型
日志文件对于一个服务器来说是非常重要的,它记录着服务器的运行信息,许多操作都会写日到日志文件,通过日志文件可以监视服务器的运行状态及查看服务器的性能,还能对服务器进行排错与故障处理,MySQl中有六种 ...
- Java集合框架（三）—— List、ArrayList、Vector、Stack
List接口 List集合代表一个有序集合,集合中每一个元素都有其对应的顺序索引.List集合容许使用重复元素,可以通过索引来访问指定位置的集合对象. ArrayList和Vector实现类 Arra ...
- LitePal——Android数据库框架完整使用手册
LitePal for Android LitePal是一个开源的Android库,使开发人员使用SQLite数据库非常简单.您无需编写任何SQL语句就可以完成大部分数据库操作,包括创建或升级表,增. ...
- 转： JavaScript 获取对象属性和方法
一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...
- 【Unity3D】Unity3D开发《我的世界》之七、番外篇
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_07.html 本来上一篇就结束了,但是有小伙伴私信我觉得还差了很多重要的内容,比如 ...
- 使用CXF和spring搭建webService服务
虽然下一个项目需要使用xfire,但是在查资料的过程中还是看到有不少地方都说cxf比xfire更好,cxf继承了xfire,但是不仅仅包含xfire,因此便也一起来尝试尝试.大概是有了xfire的经验 ...