HTML5牛刀小试
第一周的HTML5苦逼之路,就这么简单,充实,忙碌的开始了,丝毫不敢有一丢丢懈怠,压力是有的,但更多的是对自己的信心,更是对自己的踏上苦逼之路的意志的肯定。
简单回顾了下这周所学内容。从认识HTML基本结构,到制作简单表单,就是这么,下面我简单记录和整理下这周的笔记吧!!
这是这周我所做的一个简单表单,low是low了点,毕竟每个人都开始都不会一帆风顺,当然,我也是⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>注册</h1>
<form>
<table>
<tr>
<td align="right">真实姓名</td>
<td>
<input placeholder="姓名(必填)" style="width: 300px;"/>
</td>
</tr>
<tr>
<td>手机号/邮箱</td>
<td>
<input placeholder="请输入手机号" style="width: 300px;"/>
</td>
</tr>
<tr>
<td align="right">密码</td>
<td>
<input type="password" name="password" placeholder="6-20位的字符" style="width: 300px;"/>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="checkbox" />我能接受智联招聘的<a href="2.23-2.html">用户协议</a>和<a href="2.23-2.html">隐私政策</a>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="立即注册" />
</td>
</tr>
<tr>
<td> </td>
<td>已有账号,<a href="2.23-2.html">直接登录</a></td>
</tr>
<td> </td>
<td>使用其他方式登录:
<img src="../img/123.png"/>
<img src="../img/QQ截图20170225161329.png" />
</td>
</tr>
</table>
</form>
</body>
</html>
一、HTML基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
二、meta标签常用属性
1、charset:设置文档的字符集编码格式
HTML5中设置字符集编码:<meta charset="UTF-8">
HTML4.01之前...: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
>>>常见的字符集编码格式:
a.GB-2312:国标码,简体中文
b.GBK:扩展的国标码
c.UTF-8:万国码 Unicode 常用
2、http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存)
需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)
例如:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
3、name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少
三、title标签
<title>我的一个网页<title>
网页的标题,即网页选项卡上的文字。
四、link标签
链接网页图标(title前的小logo)
他的三个个常用属性:
rel属性:声明链接文件的类型,此处选icon
type属性:可以省略
href属性:表示图片的路径地址
<link rel="icon" type="image/x-icon" href="img/icon.png" />
五、常用块级标签
组合标签:<figure></figure> 用于显示图片及图片标题
两个子标签:<img /> 图片
<figcaption></figcaption> 图片的标题
显示效果:图片下面一个标题,同时图片和标题前带缩进。
1、src:表示引用图片的地址
路径地址的写法:
①相对路径:以当前文件为准,去寻找图片地址
a、与文件处于同一层的图片,直接写图片名
b、图片在当前文件下一层:文件夹名/图片名
c、图片在当前文件上一层:../图片名
②绝对路径:file:///盘符:/文件夹/图片.后缀名 但是严禁使用!
③网络地址:网络上的图片链接。但是一般不使用,因为有意外。
2、height=""width=""图片的宽度高度。可以用ccs样式(style="width:;height:;")代替
3、title:图片标题,鼠标指上后显示的文字。
4、alt:当图片无法显示的时候,显示的文字。
5、align:设置图片周围文字相对于图片的位置。top,center,bottom
1、table常用属性
HTML5牛刀小试的更多相关文章
- HTML5拖放牛刀小试
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- React-Native牛刀小试仿京东砍啊砍砍到你手软
React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记:《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
随机推荐
- 绑定IP 绑定设备
首先引别人的组播测试如下 1. 一个udp client可以同时往多个组播地址发送数据,多个udpclient可以同时往一个组播发数据. 2. 本地udp必须监听组播端口,否则收不到数据.3. 一个u ...
- C语言的移位操作符及位运算
C语言的移位操作符 位移位运算符是将数据看成二进制数,对其进行向左或向右移动若干位的运算.位移位运算符分为左移和右移两种,均为双目运算符.第一运算对象是移位对象,第二个运算对象是所移的二进制位数. 位 ...
- 动态创建div(鼠标放上显示二维码)
最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...
- java发送短信验证码的功能实现
总结一下发送短信验证码的功能实现 (题外话:LZ是在腾讯云买的第三方(山东鼎信)短信服务平台的接口,1块钱20次的套餐来练手,哈哈,给他们打个广告,有需要的可以去购买哈,下面是购买链接短信服务平台购买 ...
- 客户端用plsql进行中文条件查询时无结果的解决办法
1.SELECT * FROM v$nls_parameters ; 查看NLS_CHARACTERSET 的值是多少,我的AL32UTF8- 查找客户机器的注册表,查找NLS_LANG的值,改成AL ...
- shit IE & no table `border-collapse: collapse;`
shit IE no table border-collapse: collapse; /* IE & shit table & border-collapse: collapse; ...
- noip模拟赛 写代码
分析:这其实就是括号匹配题,一眼贪心题,不过一开始贪错了,以为([)]是合法的......其实括号之间不能嵌套. 一开始的想法是尽量往左边填左括号,因为每种括号的数量都确定了,那么左括号和右括号的数量 ...
- bzoj 1962 硬币游戏 (猜数问题)
[bzoj1962]模型王子 2015年3月26日1,6460 Description Input 输入数据共一行,两个整数N,K,用一个空格隔开,具体意义如题目中所述. Output 输出数据共一行 ...
- Linux下汇编语言学习笔记52 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- runOnUiThread在子进程中更新主进程UI
package com.pingyijinren.test; import android.support.v7.app.AppCompatActivity; import android.os.Bu ...