前端-----html（1）
基本结构
Doctype
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
<!DOCTYPE html>
bead标签
Meta
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1、页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
2、刷新和跳转
< meta http-equiv=“Refresh” Content=“30″> <!--30秒钟刷新一次页面-->
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> <!--5秒钟后跳转新网页-->
3、关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
<!--给网址收录用的-->
4、描述
<meta name="description" content="这个是简介。" />
<!--这个是你网址的描述-->
5、X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
Title
网页头部信息
Link
css
< link rel="stylesheet" type="text/css" href="css/common.css" >
icon
<link rel="shortcut icon" href="image/favicon.ico"> <!--定义标签页图标-->
Style
在页面中写样式
例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
Script
引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
写js代码
< script type="text/javascript" > ... </script >
常用标签
分为块级标签，行内标签：
块级标签，div（白板），H系列（加大加粗），p标签（段落与段落之间有间距）
行内标签，span（白板）
标签之间可以嵌套
标签存在的意思，css操作，js操作
各种符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p 和 br
p表示段落，默认段落之间是有间隔的！
br 是换行
H 标签
1-6标题从大到小排序
span标签
<span>asd</span>白板标签，方便css调用
div标签
<div>asd</div>白板标签，最常用
input标签
输入：
<form action="http://url">
<input type="text" name="user"> name属性
<input type="password" name="passwd"> name属性
<input type="button" value="提交1"> 按钮
<input type="submit" value="提交2"> 提交按钮，表单
</form> 以get方式提交数据，会把内容以拼接url的方式发送
post会把数据放在内容里传输过去，form标签默认以get方式发送数据 例子：
<!DOCTYPE html> <!--规范化 对应关系-->
<html lang="en"> <!-- html标签，只能有一个-->
<head> <!-- head标签，只能有一个-->
<meta charset="UTF-8"> <!--指定字符集-->
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title> <!--标签名-->
</head>
<body>
<form action="https://www.sogou.com/web" method="get">
<input type="text" name="query">
<input type="submit" value="提交">
</form>
</body>
</html>
点击提交按钮会自动跳转
选择：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form>
<div>
<p>请输入性别：</p> <!--单选框测试-->
男：<input type="radio" name="gender" value="men"/> <!--name值设置为一样，可以限制为只能选择一个-->
女：<input type="radio" name="gender" value="women"/>
<p>爱好：</p> <!--多选框测试-->
足球：<input type="checkbox" name="favor" value="football"/> <!--复选框用同一个name方便后台接收-->
篮球：<input type="checkbox" name="favor" value="basketball" checked="checked"/> <!--checked可用于默认被选中-->
网球：<input type="checkbox" name="favor" value="volleyball"/>
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
上传文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form enctype="multipart/form-data"> <!--文件上传依赖的属性-->
<div>
<p>上传文件：</p> <!--上传文件测试-->
<input type="file" name="fname">
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
重置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form enctype="multipart/form-data"> <!--文件上传依赖的属性-->
<div>
<p>上传文件：</p> <!--上传文件测试-->
<input type="file" name="fname">
</div>
<input type="submit" value="提交" />
<input type="reset" value="重置" /> 重置所有填进去的表单内容
</form>
</body>
</html>
textarea标签
<textarea>默认值</textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form>
<textarea name="memo">默认值</textarea>
<br>
<input type="submit" value="提交" />
</form>
</body>
</html>
下来框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<form>
<div>
<p>选择家乡：</p>
<select name="city" size="4" multiple="multiple"> <!--size默认为1,multiple为支持多选，默认不支持-->
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
<option value="chongqing" selected="selected">重庆</option> <!--默认选择-->
</select>
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
a标签
1、target属性，_black表示在新的页面打开
<a href="http://www.baidu.com.cn" target="_blank">百度 </a>
2、锚，标签的id不允许重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<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>
</body>
</html>
img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<a href="http://www.baidu.com">
<img src="2.JPG" title="图片" style="height: 200px;width: 200px;" alt="图片无法加载会显示这个">
</a>
</body>
</html>
#图片用a标签包起来，可以实现点击图片跳转网址
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<ul>
<li>sdfs</li>
<li>sdfs</li>
</ul>
<ol>
<li>werwer</li>
<li>werwer</li>
</ol>
</body>
</html>
表格
第一种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=“Refresh” Content=“3″>
<title>这是标题</title>
</head>
<body>
<table border="1">
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
<td>第一行，第三列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
<td>第二行，第三列</td>
</tr>
</table>
</body>
</html>
第二种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead> <!--表头的定义-->
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody> <!--定义表的body-->
<tr>
<td rowspan="2">1</td> <!--占用两个单元格，效果为行合并单元格-->
<td>1</td>
<td colspan="2">1</td> <!--占用两个单元格，效果为列合并单元格-->
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr> </tbody>
</table>
</body>
</html>
fieldset标签和label标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset>
<legend>登陆</legend>
<label for="1">用户名：</label> <!--for跟id搭配实现点击用户名也能自动切换到输入框-->
<input id="1" type="text" name="user">
<br />
<label for="2">密码：</label> <!--for跟id搭配实现点击用户名也能自动切换到输入框-->
<input id="2" type="text" name="password">
</fieldset>
</body>
</html>
实现效果如下：
前端-----html（1）的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
- Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- 前端框架 EasyUI （0） 重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
随机推荐
- [USACO07NOV] Milking Time
题目链接 动态规划转化成 DAG 然后拓扑求解的思路 虽然很简单不过感觉这个新思路会很有用! 如果两个事件互不影响并且有先后关系,就可以连一条有向边,跑最长路可以得到最后的最优解 实际上这还是个背包… ...
- CEdit编辑框字体和背景设置
CEdit编辑框字体和背景设置注意事项:当CEdit为“disable”时,设置编辑框的字体和背景会没有效果.解决方案:将CEdit的Style设置为“readonly”,这样设置就能生效了,同时也能 ...
- go 学习资源和GitHub库
go httprouter 源码包 https://github.com/julienschmidt/httprouter 用例 https://github.com/gsingharoy/httpr ...
- Java使用POI导入Excel异常Cannot get a text value from a numeric cell 解决
异常原因:Excel数据Cell有不同的类型,当我们试图从一个数字类型的Cell读取出一个字符串并写入数据库时,就会出现Cannot get a text value from a numeric c ...
- python数据结构总结
一.列表 1.列表脚本操作符: (1)扩增的操作符: “+”:用于组合列表:如[1,2,3]+[4,5,6]==>[1,2,3,4,5,6] "*":重复;如[2,3]*2= ...
- 学习总结：CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- java实现《剑指offer》（二）11~20 更新中
11.二进制中1的个数 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. (1)最优解 public class Solution { public int NumberOf1(int ...
- SSM框架中spring的XML文件配置
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...
- Web服务调试可用，发布之后访问出错
今天重装了系统,然后发现之前的Web服务DataService不能用了.将其设置为启动项,运行的结果是 跟踪发现,是mysql.data.dll的版本不对.所以要找到所有版本不对的该dll,将其替换成 ...
- Consul 域名服务
=============================Web请求的全过程(包含DNS) =============================完整过程参考 https://blog.csdn. ...