HTML

复习了HTML，整理了一些自己容易忘和之前忽略的一些知识点

基本框架

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head><body></body>
</html>

框架头部

（1）<title></title>标签用来定义页面的标题

例： <title>小王的网页</title>

（2）<link>标签可以加载一个图片作为网页的图标

举个例子： <link rel="icon" href="img/tb.img">

其中：rel属性：规定当前文档与资源之间的关系，且只有当使用 href 属性时才能使用 rel 属性

href属性：资源的路径

icon：表示当前文档的图标

把这些东西写进框架的头部，你会得到这个：

一些有趣的标签

（1）<blockquote></blockquote>：引用标签，能把标签内文字缩进表示

基本语法： <blockquote cite="引用的来源（一般是引用网址）">引用的文字</blockquote>
```
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小王的网页</title><link rel="icon" href="img/tb.jpg"></head><body>巴拉巴拉巴拉巴拉<blockquote cite="http://www.baidu.com">引用的知识</blockquote>巴拉巴拉巴拉巴拉</body>
</html>
```
上述代码的结果如下：
（2）<pre></pre>：预格式标签，可以将文字按照原始的排列方式进行显示

（3）有序无序列表

（4）<dl></dl>：定义列表标签，就是定义名词，其中<dt></dt>写名词的名字，<dd></dd>标签内解释
```
<dl><dt>土豆</dt><dd>可蒸可炸可炒可煎，非常好吃</dd><dd>还可做成薯片薯条等零食</dd>
</dl>
```
（5）
块级标签与行级标签的特点与区别

（1）块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示

（2）块级标签的宽度默认是 100%；行级标签的宽度由文字内容撑开。

（3）块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性
HTML5新增标签简介
表格

（1）合并表格边框：<table border="1" style="border-collapse: collapse;">

（2）跨行：<td rowspan="2"></td>

（3）跨列：<td colspan="2"></td>

（4）单元格内边距：cellpadding

（5）单元格外边距：cellspacing

（6）表格标题： <caption></caption>

表单

HTML5表单新增元素<datalist>可以根据用户输入的内容，在预先设置好的列表中筛选出与用户输入相关的信息作为备选

8.综合小案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小王的网页</title><link rel="icon" href="img/tb.jpg"></head><body><table border="1" bgcolor="pink" bordercolor="blue" cellspacing="3" cellpadding="10" width="300px" height="150px" ><tr><th>水果</th><th>蔬菜</th><th>零食</th></tr><tr><td>西瓜</td><td>土豆</td><td>薯片</td></tr><tr><td>芒果</td><td>油麦</td><td>辣条</td></tr></table><br><table border="1" bgcolor="pink" bordercolor="blue" cellspacing="3" cellpadding="10" width="300px" height="150px"><tr><td colspan="3" align="center">学生成绩</td></tr><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></table><br><table border="1" style="border-collapse: collapse;" width="400px" height="200px"> <tr><td>所属单位</td><td>&nbsp;部&nbsp;组&nbsp;班</td><td>职称</td><td>111</td><td>姓名</td><td>111</td><td>厂长</td></tr><tr><td rowspan="2">期间</td><td colspan="3">&nbsp;年&nbsp;月&nbsp;日</td><td rowspan="2" colspan="2">天数</td><td>111</td></tr><tr><td colspan="3">&nbsp;年&nbsp;月&nbsp;日</td><td>主管</td></tr><tr><td colspan="2">职务代理人</td><td colspan="4">盖章</td><td>111</td></tr><tr><td>到期日期</td><td colspan="3">&nbsp;年&nbsp;月&nbsp;日</td><td colspan="2">审核意见</td><td>组长</td></tr><tr><td colspan="2">全年特别休假数</td><td colspan="2" align="right">&nbsp;&nbsp;&nbsp;天</td><td>111</td><td>111</td><td>111</td></tr><tr><td colspan="2">已请假数</td><td colspan="2" align="right">&nbsp;&nbsp;&nbsp;天</td><td>人事主任</td><td>人事经办</td><td>组长</td></tr><tr><td colspan="2">本次申请日数</td><td colspan="2" align="right">&nbsp;&nbsp;&nbsp;天</td><td rowspan="2">111</td><td rowspan="2">111</td><td rowspan="2">111</td></tr><tr><td colspan="2">尚剩申请日数</td><td colspan="2" align="right">&nbsp;&nbsp;&nbsp;天</td></tr></table><br><form><table><tr><td>登录名:</td><td><input type="text">(可包含a-z、0-9和下划线)</td><td><b>阅读服务协议</b></td></tr><tr><td>密码:</td><td><input type="password">(至少包含6个字符)</td><td rowspan="8"><textarea style="width:150px;height:200px" >欢迎阅读服务条款协议……</textarea></td></tr><tr><td>再次输入密码:</td><td><input type="password"></td></tr><tr><td>电子邮箱:</td><td><input type="email">(必须包含@字符)</td></tr><tr><td>性别:</td><td><input type="radio" name="sex" value="男" checked="chexked">男<input type="radio" name="sex" value="女">女</td></tr><tr><td>头像:</td><td><input type="file"></td></tr><tr><td>爱好:</td><td><input type="checkbox" name="aihao" value="运动">运动<input type="checkbox" name="aihao" value="聊天">聊天<input type="checkbox" name="aihao" value="玩游戏">玩游戏</td></tr><tr><td>喜欢的城市:</td><td><select name="city"><option>[请选择]</option><option>西安</option><option>南阳</option></select></td></tr><tr><td></td><td><input type="submit" value="同意右侧服务条款，请提交注册信息"><input type="reset" value="重填"></td></tr></table></form>     </body>
</html>

结果如下：

有兴趣的同学可以根据下面的结果图片自己敲一下代码

HTML之部分易忘点相关推荐

关于Verilog HDL的一些技巧、易错、易忘点（不定期更新）
本文记录一些关于Verilog HDL的一些技巧.易错.易忘点等(主要是语法上),一方面是方便自己忘记语法时进行查阅翻看,另一方面是分享给大家,如果有错的话,希望大家能够评论指出. 关键词: ·技巧篇 ...
linux命令忘了,Linux考试易忘命令
这是为了考试而做的笔记 mv命令可以移动可以改名 mv a /test //移动a到test文件夹下 mv a b //把a改名为b 软链接和硬链接的创建 ln -s profile a //prof ...
三本类计算机行色专业,高考倒计时50天：物理34个易错易忘知识点
今天是4月18日,距离2016年高考(微博)还有50天. 今天的内容有四部分:第一部分:高招小贴士:第二部分:2016年高校招生政策,今天介绍天津大学(微博)2016年的招生政策:第三部分:高考志愿填 ...
C语言学习专栏（1）：易忘点
C语言学习专栏系列: [版权申明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权): 本博客的内容来自于:C语言学习专栏(1):易忘点: 学习.合作与交流联系q384660495: 本博客的内容 ...
关于Verilog HDL的一些技巧、易错、易忘点
关键词: ·技巧篇: 组合逻辑输出类型选择; 语法上的变量交换; ·易忘篇: case/casex/casez语句; 循环语句: 数制和操作符: 数据类型: ·易错: 数据的截位与扩位子模块例化中隐 ...
易忘知识点整理（持续更新）——VUE使用
1. 复习组件中自定义v-model指令使用: 组件中v-model最基本的用法:在父组件给子组件绑定v-model的时候,相当于绑定了自定义事件@input,v-model=后面传递的值,是子组件在 ...
C++易忘知识点整理
char类型 C++对字符使用单引号,对字符串使用双引号.字符用单引号括起,表示字符的数值编码. int main(void) {using namespace std;char ch = 'M'; ...
iar c语言指令,IAR中工程相关配置及c语言易忘知识点
使用K60单片机时,往往使用IAR的比较多.但是我之前一直使用KEIL来进行stm32的开发,所以就有一种先入为主的观念,总觉得KEIL比IAR要好一些.随着和IAR打交道越来越多,渐渐地发现IAR也 ...
python list去掉引号_python的一些易忘知识点
1.python的数据结构很少:list, 字典,元组,集合,int float comlex string. 2.查看一个变量是什么类型:使用type(a)函数 3.python的字符串string ...
Jquery复习（一）之animate()易忘点
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

HTML之部分易忘点

HTML

HTML之部分易忘点相关推荐

最新文章

热门文章