第一周的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>&nbsp;</td>
<td>
<input type="checkbox" />我能接受智联招聘的<a href="2.23-2.html">用户协议</a>和<a href="2.23-2.html">隐私政策</a>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" value="立即注册" />
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>已有账号，<a href="2.23-2.html">直接登录</a></td>
</tr>
<td>&nbsp;</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" />

五、常用块级标签

<h1></h1>......<h6></h6>
<!--h标签：标题标签，自动加粗，h1最大，h6最小-->
<hr/>:水平线标签（哪里需要放哪里就是一条水平线）
<p></p>:段落标签（如果漏写结束标签，到下一个html标签结束）
<br/>：换行标签(换行符，打回车只会翻译成一个空格)>
<blockquote></blockquote>
　　引用标签,cite属性，表明引用的来源，一般表明引用网址，浏览器默认显示为首行缩进

<pre></pre>:预格式标签（承载代码）
　　浏览器默认显示样式：1,显示为等宽字体 2，代码中的换行，空格等元素可在浏览器直接显示。
　　补充：HTML文件中“&nbsp；”表空格（不同浏览器对长度解析不一样）
<ol></ol>：有序列表
<ul></ul>：无序列表（网页布局很重要）
　　其中，<li></li>列表项都可以有N多项
<dl></dl>：定义描述列表：<dl></dl>
　　列表标题：<dt>一般只有一项</dt> 标题顶格显示
　　列表描述项<dd>可以有N多项</dd> 描述项相对标题进行缩进显示
　　*注意嵌套时列表不能交叉*
<div></div>:分区标签

　　组合标签：<figure></figure> 用于显示图片及图片标题
　　两个子标签：<img /> 图片
<figcaption></figcaption> 图片的标题

　　显示效果：图片下面一个标题，同时图片和标题前带缩进。

六、常用行级标签
span（文本）：无实际意义，用于包裹某部分文字，修改特定样式
q（短引用）：语法：<q cite="http:baidu.com">这是短引用标签q中的文字</q>
small（缩小字体）：可以多重嵌套直到字体最小
big（放大字体）：可嵌套直到最大
em（强调）
strong（强调）
a（超链接）
i（倾斜）
b（加粗）
***strong,em,b,i标签的区别***：
1、strong和em都表示强调，strong显示为粗体，em显示为倾斜。而且，
strong的强调程度比em更高
2、strong和b都能加粗，em和i都能倾斜，但是，strong和em多了一层强调的语义，HTML5语言，要求标签尽可能的实现语义化。
 
　　img（图片）
     　　1、src：表示引用图片的地址
            路径地址的写法：
            ①相对路径：以当前文件为准，去寻找图片地址
                    a、与文件处于同一层的图片，直接写图片名
                    b、图片在当前文件下一层：文件夹名/图片名
                    c、图片在当前文件上一层：../图片名
            ②绝对路径：file:///盘符：/文件夹/图片.后缀名     但是严禁使用！
            ③网络地址：网络上的图片链接。但是一般不使用，因为有意外。
            2、height=""width=""图片的宽度高度。可以用ccs样式（style="width:;height:;"）代替
            3、title：图片标题，鼠标指上后显示的文字。
            4、alt：当图片无法显示的时候，显示的文字。
            5、align：设置图片周围文字相对于图片的位置。top，center，bottom
 
　　a（超链接）:
　　　　1、href：超链接的路径，可以是网络链接，也可以是本地文件（路径确定同img）
　　　　2、target:用超链接打开的位置。_self自身页面（默认），_blank新页面
　　　　3、title：鼠标指上后显示的文字
　　　 4、(了解)rel：用于表明被链接文档与当前文档的关系；
　　　　　　 rel=“prev”被链接文档是前一篇文档 rel="next"被链接文档是后一篇文档
　　　　 　　(记住)rel=“icon”被链接图片是当前文档的图标 rel=“stylesheet”被链接文档是当前文档的样式表
　　　　　　rel=“prefetch”预加载，在当前文档加载完成后，用空余时间预加载即将链接的文档
　　 5、锚链接：
　　　　 ①.本页面锚链接:a.设置锚点:<a name="top"></a>
　　　　　　　　　　　　 b.在超链接上,使用name跳转到对应锚点
　　　　　　　　　　　<a href="#top" target="_self">这是一个锚点</a>
　　　　　　 ②.页面间锚链接:a.在即将跳转的页面的指定位置,设置锚点
　　　　　　　　　　　　 b.在超链接的href中属性,使用"页面地址.html#name"
　　　　　　　　　　　 <a href="t.html#hip">跳转到新页面的位置</a>
6.功能性链接: mailto://jianghao@jerei.com 用于给指定邮箱发送邮件
　　　　　　　　　　 file:///e:/a.jpg 打开本地文件（只能在本地文件中打开）
　　　　　　　　　　tencent://message/?uin=qq号 给指定qq发消息
　　　　s有误文本
　　　　<s>这是s标签中文字</s>
　　　　
　　　　cite标签：浏览器显示为斜体，常用于书、画作
　　　　

　　　　<!--mark：高亮或标记文本，浏览器显示为黄色背景-->
　　　　<mark>123</mark>
七、表格

1、table常用属性

　　1、border：给表格添加边框，当border属性增大时，只有外围框线增加，单元格的边框始终为1px
　　2、cellspacing：单元格与单元格之间的间隙距离，当cellspacing=“0”，只会使单元格间隙为0，但不会合并边框线。
　　【表格边框合并】style=“border-collapse：collapse；”，无需再写cellspacing
　　3、cellpadding:每个单元格中的内容，与边框线的距离。
　　4、width，height：表格的宽高
　　5、align：表格在屏幕的左中右位置显示，left，center，right
　　　　　>>>注意：给表格加上align属性，相当于让表格浮动，会直接打破表格后面的元素的原有的排列方式
　　6、bgcolor：背景色，等同于style=“background-color”
　　7、background：
　　　　background="../img/gx.jpg"
　　　　背景图片 等同于style=“background-image”且背景图片会覆盖背景颜色
　　8、bordercolor=“blue” 边框颜色
 
2、tr和td相关的属性
　　1、width/height: 单元格的宽高
　　2、bgcolor: 单元格的背景颜色
　　3、align:left center right 单元格中的文字,水平对齐方式
　　4、valign:top center bottom 垂直对齐方式
　　5、nowrap:nowrap="nowrap" 单元格中文字不换行
 
　　注意:1、当表格属性与行列属性冲突时,以行列属性为准.(作用范围越小优先级越高,近者优先)
　　　　　2、表格的align属性，是控制表格自身在浏览器的显示位置
　　　　　　行和列的align属性，是控制单元格中文字在单元格中的对齐方式
　　　　3、表格中的align属性，并不影响表格内文字的水平对齐方式
　　　　　　tr的align属性，可以控制一行中所有单元格的水平对齐方式
 
3、表格的跨行与跨列
　　colspan 跨列，当某个格跨N列时，其右边N-1个单元格需删除
　　rowspan 跨行，当某个格跨N行时，其下方N-1个单元格需删除
 
 
八、表单

HTML5牛刀小试的更多相关文章

  1. HTML5拖放牛刀小试

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. React-Native牛刀小试仿京东砍啊砍砍到你手软

    React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...

  3. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  4. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  5. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  6. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  7. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  8. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  9. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

随机推荐

  1. Spring Boot 2 (二)：Spring Boot 2 尝鲜-动态 Banner

    Spring Boot 2.0 提供了很多新特性,其中就有一个小彩蛋:动态 Banner,今天我们就先拿这个来尝尝鲜. 配置依赖 使用 Spring Boot 2.0 首先需要将项目依赖包替换为刚刚发 ...

  2. ZOJ1004 && HDU1515 dfs回溯

    题目大意: 就是通过一个栈进行字母入栈出栈得到想要的字符,把所有可能的方式全部输出 自己写的方法一开始一直不能过,后来参考了别人的方法,写出来的比较简单的代码 这段代码更有回溯的感觉,自己后来又把自己 ...

  3. [luoguP1472] 奶牛家谱 Cow Pedigrees（DP）

    传送门 一个深度为i的树可以由一个根节点外加两个深度为i-1的树组成,这就决定了DP该怎么写. 然而我真的没有想到. f[i][j]表示深度为i节点数为j的个数 sum[i][j]表示深度小于等于i节 ...

  4. Linux下重启加载命令

    nginx -s reload

  5. guava cache学习

    Guava Cache与ConcurrentMap很相似,但也不完全一样.最基本的区别是ConcurrentMap会一直保存所有添加的元素,直到显式地移除.相对地,Guava Cache为了限制内存占 ...

  6. 如何使用python书写守护进程？daemon、python-daemon

    可以参考的supervisor实现:https://github.com/Supervisor/supervisor:http://supervisord.org/configuration.html ...

  7. android PercentRelativeLayout 支持百分比来设置控件的宽高

    Android 最终官方支持按百分比来设置控件的宽高了. 我们先来看看效果:       看一下布局: PercentRelativeLayout <android.support.percen ...

  8. eclipse 开发jsp 智能提示设置

    1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 改动Auto Activation triggers for java的值为:.a ...

  9. hdu 4778 Gems Fight!

    第一次写状压dp-- 题意:http://blog.csdn.net/dyx404514/article/details/15506601 状压dp+博弈吧-- #include<iostrea ...

  10. web 开发之js---js 实现网页中播放wav的一种方法（flash播放器）

    http://blog.csdn.net/whumr1/article/details/6948160