HTML5基础入门(笔记分享)
[整理来源]:html5+css3+jQuery Mobile (2th)
[笔记分享]:
- HTML5 和 HTML4 差异:
- 简化:DOCTYPE、html、meta、script等标记被大幅度简化;<font> <big> <u>等废除;
- 新增:①统一内嵌影音:用<video>或者<audio>标记播放影音,替代以前需要用Flash Player 或者Quiktime Player来播放;
②新增语义标记:<header> <nav> <article> <section> <aside> <footer>; ③新增<canvas>+Javascript画线条和图形;
④表单设计:新增标记,<form> 增加了很多属性;⑤提供多种API;
- html标记分为容器标记(成对出现)和单一标记(如<hr/><img/>等);
- html的组成:<html></html>来标记网页的开始和结束;其中包括"头":<head></head>和"身体"<body></body>两部分;
<!DOCTYPE html>
<html>
<head> <!--头-->
<title>页标题</title> <!--通常会放置<title><meta>等不显示在网页上的基本信息,除了<title>显示在页标题-->
</head>
<body> <!--身体-->
内容
</body>
</html>
- 标记的属性设置格式:<标记 属性名称1=属性值1 属性名称2=属性值2 ……>
如:<html lang="zh-CN"> 指定网页的语言是简体中文;<meta name="keywords" content="HTML,CSS,XML,XHTML,Javascript"> meta标记用于描述网页,有利于搜索引擎快速找到网站并正确分类;
- 分区:html4是按照<div>标记指定id属性名称,再加上CSS语法来达到想要的结果; html5新增了部分的语义标记放在body中;(都是容器标记),如<header>表示网站名称、主题等;<nav>表示导航条;<aside>表示侧边栏;<article>定义主内容区;<section>表示章节或段落;<footer>表示页脚;
- 重要的声明:<!DOCTYPE html>声明使用的标准规范;语言:<html lang="zh-CN">表示使用简体中文;编码:<meta charset="GB2312">表示使用简体中文编码,在保存文档的时候也需要修改这一项内容;使用UTF-8编码最不容易出现乱码;
- 文字变化和排版技巧:
① <p></p>标记段落,换行并增加一个空行;<br/>换行;<pre></pre>按照原始代码的排列方式显示;<blockquote></blockquote>表示文字的引用,会将文字换行并缩进;<hr/>添加分割线;<h1>~<h6>设置段落标题的大小级别;<b></b>加粗;<i></i>斜体;<u></u>下划线;<sup></sup>上标、<sub></sub>下标;
② 列表标记:无序列表:<ul><li></li></ul> 有序列表:<ol><li></li></ol>
其中属性设置:<ol type="…" start="…" reversed="reversed">;type表示5种有序编号的方式,引号内可填写1/i//I/a/A;start表示起始编号;reversed="reversed"表示编号倒序;
③ Define List:<dl></dl>表示起始;<dt></dt>表示标题;<dd></dd>表示解释上述标题;
- 注释与特殊符号:①注释:<!--注释文字-->;[注]:在html注释之间加入条件判断可以使得IE浏览器选择性执行注释内容,其他浏览器只会当普通注释处理;<!--[if lt IE 9]> IE 9 以下版本会执行此语句<![end if]--> ②特殊符号: < → < >→> " → " &→& 半角空格→
- 超链接:
格式:<a href="" target="">文字或者<img/ src=""></a>;
属性:①
- href=""中的网址可以是相对路径和绝对路径;一般站外网页用绝对路径;目标网页在自己的网站中常用相对路径:下层的相对路径直接写 目录名称1/目录名称2/网址 ;上层相对路径可以用 ../网址 表示;
- href=""中还可以填写E-mail超链接;格式:href="mailto:账号1;账号2",将会打开浏览器默认的邮件打开程序;
[拓展] 在账号邮箱后紧跟 ?subject= 可以自动填写主题;紧跟 ?cc= 可以自动填写抄送账号; 紧跟 ?bcc= 可以自动填写密件抄送;紧跟 ?body= 自动填写进正文开头;
- Href=""中还可以填写文件链接,从而用户可以通过超链接下载文件;
②target=""属性有以下几种:a. _blank 链接的目标网页会在新窗口中打开;b. _parent 链接的目标网页会在当前窗口或者框架网页中的上层框架中打开; c. _self 默认值,会在当前网页打开;d. _top 框架网页中的所有框架都会被删除; e. 窗口名称 在指定名称的窗口或者框架中打开;
- 表格:
格式:<table boder="1"> <caption>标题</caption><tr><td>列1</td></tr></table> 表示一行<tr></tr>一列<td></td>的一张表格<table></table>,并在第一个行之前有一行标题<caption></caption>;
属性:①<table boder="1">border属性用来设置是否显示表格边框;②<td nowrap>…</td> nowrap属性表示内容不换行;
③<td colspan="2"> 表示将一行中的两列合并单元格;④<td rowspan="2">表示将某列中的上下两行合并成一列;
- 表单
①架构:<form></form>
属性:例如:<form method="post" action="abc.asp">;
- method有2中方式:post 和 get;get方式的数据会直接加在URL之后,安全性差,并且有255个字符的限制,适用于数据少的表单;而post是数据封装后再发送,安全性高,字符串长度没有限制;通常采用post发送;
- action:表单通常会和asp或php等数据库程序配合使用,属性action用来指出发送的目的,例子表示将表单送到abc.asp网页进行下一步处理;当然,使用邮箱也可以收集数据,语法如下:<form method="post" action="mailto:abc@mail.com?subject=xxxx enctype="text/plain""> 注意enctype是表单发送的编码方式,只有method="post"才有效,发送到电子邮件的编码方式是text/plain 否则将会乱码;上传文件的时候要用的编码方式是multipart/form-data ;
②分组: <fieldset><legend>分组标题</legend>内容</fieldset>
②组件:
- 输入组件:
- 文本框 <input type="text" name="username" value="guest" size="10" maxlength="10"/> :type输入的方式是text,上限255字符;name文本框的名字;value文本框内容的的默认值,可省略;size文本框的展示长度,默认值为20;maxlength限制文本框的字数;autofocus表示加载网页后自动将光标插入此文本框;
[类似]:搜索域 <input type="search" name="searchword"/>与文本框类似的效果,只是输入后右边会自动多出一个×;
- 多行文本框(textarea) <textarea name="memo" cols="15" rows="2" wrap="virtual">这是多行文本框中的默认值</textarea> name文本框的名字;cols="20"文本框的宽度;rows="4"文本框的行数;wrap="virtual"输入超过时会自动换行(无需按换行键),但传送给服务器后是一行,和soft类似,若改为pysical则输入会自动换行,并且传送给服务器就是输入的模样(包括换行),和hard类似,若改为off则禁用自动换行;readonly属性表示用户无法输入;
- 密码域 <input type="password" name="t1" size="20"/> 和text类似,唯一区别是密码用*或者圆点代替;
- 日期域 <input type="date" name="selectdate"/> 会自动弹出日期选择窗口;
- 数字域 <input type="number" name="setname" value="5" min="3" max="20" />可以通过上下键选择数字;min和max用来限制范围;如果无法显示上下键则只能输入且失去限制范围的作用;
[类似]:范围域:<input type="range" name="numberrange" value="5" min="3" max="20"/>语法及其类似,只是类型变化,形式变成滚动条;
- 颜色域 <input type="color" name"selectcolor" value="#ff00ff" />用户选择颜色时会弹出颜色菜单;
- 列表组件:
- select组件:<select><option>选项1<option><option>选项2</option></select>;属性:<select name="sport" size="1"> name表示列表的名字;size="1"表示是下拉列表,若参数改为option的数目则变成选择列表;如果添加multiple属性,则可以通过Ctrl键进行多选;
- datalist组件:<datalist id="browsers"><option value="Internet"></option> <option value="Firefox"></option></datalist>
是隐式的列表,需要和<input list="browsers">搭配使用,list属性名和<datalist>中的id属性名称必须一致;效果:类似于自动查词的作用,在List中输入f则会在下方自动跳出Firefox供选择;<option>中的内容和select组件也不同;
- 选择组件:
- 单选按钮radio:<input type="radio" name="gender" value="女" checked />女 属性:type="radio"表示单选按钮;name是组件名称,名称相同的radio组件会被认为是同一组件;value="女"是radio组件的值,但是不显示,后面的女才是显示在按钮后面的文字;checked表示已选择状态;
- 复选框checkbox:<input type="checkbox" name="hobbies" value="电影" checked />电影 属性说明和radio类似;
- 按钮组件:
- submit按钮:<input type="submit" name="s1" value="提交"/> 当点击时表单就会按照<form>的action属性进行发送;value是显示在按钮上的文字;
- reset按钮:<input type="reset" name="r1" value="重置"/> 当点击时就会将表单中的值重置为默认值;
- button按钮:<input type="button" name="back" value="上一页"/> 本身没有作用,必须搭配JavaScript才能达到想要的效果;value是显示在按钮上的文字;
- HTML5 和 HTML4 差异:
HTML5基础入门(笔记分享)相关推荐
- Android Studio 基础入门笔记
Android Studio 基础入门笔记 Android Studio 基础入门笔记 为什么选择使用 Android Studio 而不是EclipseADT 安卓配置JDK AS如何更新 常规的 ...
- Python基础入门笔记(二)
前言 本文主要为 Python基础入门笔记(一)内容的补充. 一.迭代器和生成器 1.1 Python迭代器 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元 ...
- 11岁过python1级_11岁表弟写的Python零基础入门笔记!
一.Python输入与输出输出:使用print()函数. print()函数的基本语法格式如下:print(输出内容). 输出内容可以是数字和字符串(字符串需要用引号括起来),也可以是包含运算符的表达 ...
- Object-C基础入门笔记(一)
OC基础入门笔记之一 // // main.m // oc // // Created by lujun on 2020/9/20. // Copyright © 2020 lujun. All ri ...
- 【Python3零基础入门笔记】05 Python时间处理——time库的使用
time库的使用: time库基本情况 时间获取 时间格式化 程序计时 文本进度条实例 time库基本情况 Time库是python中处理时间的标准库 计算机时间表达 提供获取系统时间并格式化输出功能 ...
- html5 基础入门
目录 html5 基础入门 前言介绍 HTML5 兼容性 DTD 智能表单 input type 类型整理总结 input 元素属性总结 form表单控件总结 新增结构标签 新增多媒体标签 html5 ...
- 宋九九:怎么做好seo优化?SEO基础入门教程分享
宋九九:怎么做好seo优化?SEO新手基础入门教程分享! 宋九九以为一个好的SEO优化方法,需要团队的技术能力和凝聚力,SEO最根本的目的就是满足搜索引擎的规则,以达到排名前置的目的.常规seo是一个 ...
- Java基础入门笔记2
Java基础入门笔记2 一. 为什么把程序出错叫做"BUG"? 1. 原因是臭虫或者虫子,现在用来指代电脑系统或者程序中隐藏的一些漏洞或者一些问题,所以现在程序出问题就叫" ...
- Html5基础知识笔记
学习笔记,供个人快速查阅使用!! 公开分享,不喜勿喷! Html5基础介绍 h1标签 <h1>Hello World</h1> p标签 如果想在网页上显示文章,这时就需要< ...
最新文章
- 在代码中获取ApplicationContext实例
- 两段用来启动/重启Linux下Tomcat的Perl脚本
- bzoj1208: [HNOI2004]宠物收养所
- 使用NavigationUI更新UI组件
- Angularjs进阶笔记(1)—不同类型的双向数据绑定
- Windows 7 64位下使用ADB驱动
- [原创]Jenkins持续集成工具介绍
- 安国主控au6983、au698x fc8708 量产失败修复过程。载入韧体数据失败\坏磁区过多\读坏块表错误...
- verilog语法记录(一)
- 【图像融合】基于多模态实现CT图像无缝融合附matlab代码
- asps英文_汽车术语中英文对照
- 怎么用视频做gif动图?手把手教你制作gif表情包
- “人类高质量数据”如何训练计算机视觉模型?
- zzulioj1116: 删除元素
- 叮叮书店 about.html,网页编程HTML+CSS网站设计
- [案例2-5]石头 剪刀 布小游戏
- Linux如何才能ping通外网(详细设置过程,基于Qracle VM VirtualBox)
- LoRa节点如何以ABP方式入网TTN服务器?
- 计算机毕业设计(附源码)python租车信息管理系统
- cmake学习笔记 二