【HTML5】HTML5 学习笔记

 
学习教程： [H5+CSS+JS视频教程]
 

一 l  HTML5

---

1、HTML标签列表

[HTML标签列表]
 

2、HTML标签的通用属性

属性名	作用
class	规定元素的类名
id	规定元素的 唯一 ID
style	规定元素的样式

 

3、HTML样式（建议都放在head标签中）

类型	名称	作用
标签	<style>	样式定义
标签	<link>	资源引用
属性	rel=“stylesheet”	外部样式表
属性	type=“text/css”	引入文档的类型
属性	margin-left	边距

三种样式表插入方式

表插入类型	示例	解释
外部样式表	<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>	读取css文件的样式信息
内部样式表	<style type=“text/css”>     body {background-color:red}     p {margin-left:20px} </style>	在html内写css样式代码
内联样式表（常用）	<p style=“color:red”>	直接给元素定义样式

 

4、HTML链接

页面内的跳转:

<a name="tips">hello</a>
<a href="#tips">跳转到hello</a>

<a href="" target="_self">当前页面打开href网址</a>
<a href="" target="_blank">新页面打开href网址</a>
<a href="" target="_parent">当前页面的父页面打开href网址</a>
<a href="" target="_top">当前最外层页面打开href网址</a>

 

5、HTML列表（显示结构）

列表类型	使用标签	属性
无序列表	<ul>、<li>	type=“disc/circle/square”
有序列表	<ol>、<li>	type=“A/a/I/i”、start="…"
嵌套列表	<ul>、<ol>、<li>
自定义列表	<dl>、<dt>、<dd>

 

6、HTML块

块类型	特点	例子
块元素	块元素在显示时，通常会以新行开始	<h1>、<p>、<ul>
内联元素	内联元素通常不会以新行开始	<b>、<a>、<img>
<div>元素	<div>元素也被称为块元素，是 HTML元素 的容器
<span>元素	<span>元素是内联元素，是 文本 的容器

 

7、HTML布局方式

（1）使用<div>元素布局
（2）使用<table>元素布局
 

8、HTML表单

表单用于获取各种用户输入

表单标签	解释	属性
<form>	表单
<input>	输入域	type=“text/password/checkbox/radio”     男<input type=“radio” name=“sex”>     女<input type=“radio” name=“sex”> （name相同表示是互斥的选择）
<textarea>	文本域，文本的输入框
<label>	控制标签
<fieldset>	定义域
<legend>	域的标题
<select>	选择列表	<select>     <option>下拉选项一<option>     <option>下拉选项二<option> </select>
<optgroup>	选项组
<option>	下拉列表中的选项
<button>	按钮
<submit>	提交

 

9、HTML框架

过时的标签：<frameset>、<frame>
内联框架（在页面中的一小块显示另一个网页的内容）：<iframe src="需要镶嵌的网页地址">
 

10、HTML背景

设置背景图片：background="图片路径"
设置背景颜色：bgcolor="颜色"
 

11、HTML实体

HTML中预留字符串必须被替换成字符实体，如：’、"、<、>、&等。
示例：想在html中输出"<"，则要写"&lt;"。
预留字符串对应实体可以自行百度查找。
 

12、HTML5的其他标签和属性

（1）HTML5新增的主体元素

标签名	作用	示例
<section>	强调分块，强制需要一个<header>，推荐使用<div>替代
<article>	在<section>的限制上更进一步。强调完整，说明这段是文字内容，有<header>、<p>、<footer>	<article> </article>
<nav>	传统导航条、侧边栏导航、页内导航、翻页操作
<aside>	显示页面附属信息，如侧边栏、广告、导航条	<aside>     <nav>     </nav> </aside>
<time>	显示时间	<time datetime="时间" pubdate="true"> pubdate说明设置该时间为发布时间
<embed>（扩展）	内嵌页面，可以嵌入插件（iframe嵌入页面）

（2）HTML5新增的非主体元素

标签名	作用	示例
<object>（扩展）	向HTML代码添加一个对象
<header>	通常用来放置整个页面或页面某块内容区的标题
<footer>	页面脚注
<hgroup>	标题同级的标题放在一起
<address>	显示联系信息

（3）表单新增元素与属性

属性名	作用
form	在表单外说明属于哪个表单
formaction	可以使得不同的按钮可以跳转到不同的页面
formmethod	可以使得不同的按钮可以有不同的提交方法
formenctype	说明该元素的数据使用什么编码方式 "text/plain"：将空格" “转变为”+" “multipart/form-data”：上传文件用 "application/x-www/form-urlencoded"
formtarget	指定在何处打开表单提交后加载的页面，类似<a>里面的target属性
autofocus	进入网页自动将焦点放在该元素上
required	设置该元素必须填入内容
labels	同一个label的元素是同一个集合

所属标签	属性名	作用
标签	control	访问label标签内的表单元素，可以修改属性
文本框	placeholder	未输入状态+不是焦点时，显示淡淡的输入提示文字
文本框	list	类似下拉菜单，但是也可以自己输入
文本框	autocomplete	自动填充：off/on
文本框	pattern	检查内容是否符合正则表达式
文本框	selectiondirection	设置选取方向，从前往后/从后往前：forward/backward
复选框	indeterminate	声明后在jsp中说明，说明该复选框处于不知道是否选取的状态
image提交按钮	height, width

（4）新增的其他属性

属性名	作用
contenteditable	是否可以修改文本
designmode	全局的页面是否可编辑选项
hidden	浏览器不渲染该元素，但是可以赋值
spellcheck	文本框内的拼写检查
tabindex	按tab键后，当前的选择焦点根据tabindex值从小到大跳转