HTML5学习

àì夳堔傛蜴生んèń 2022-05-31 01:20 113阅读 0赞

<html>  
<head>  
<title> </title> //标题  
</head>  
<body>  
<h1></h1>  //表示主标题  
<p></p>  //表示段落  
<h2></h2>  //h1的子标题  
<h2></h2>  //h1的子标题  
</body>  
</html>  
  
  
  
  
元素包括起始标签、结束标签、内容  
  
  
特性  
<p lang="en-us"></p> lang为语言特性，en-us表示美式英语  
  
html有6个级别的标签  
即：<h1></h1>  
<h2></h2>  
<h3></h3>  
<h4></h4>  
<h5></h5>  
<h6></h6>  
  
粗体：<b></b>  
<h1>今天开始学习<b>HTML和CSS</b></h1>    //即HTML和CSS为粗体  
斜体：<i></i>  
  
  
上标：x<sup>2</sup> //相当于x的平方  
下标：y<sub>2</sub> //相当于y2  
  
  
换行：<br />  
  
水平线：<hr />  
通常用一个标签来包含 <h1><hr /></h1>  
  
  
加粗：<strong> </strong>  
  
  
强调：<em> </em> 起强调作用，通常浏览器以斜体显示  
  
  
引用：<blockquote> </blockquote> 标记引用 通常在浏览器中，文本会以前后缩进来表示  
较短引用： <q> </q>  文本前后会加双引号显示，IE浏览器不支持  
<cite></cite>同样也是引用  
  
  
缩写词和首字母缩写词：<abbr> </abbr>  
如： <abbr title="Professor">Prof</abbr>  //表示Prof是由Professor缩写的  
<abbr title="Kuang Zeng Xiong">KZX</abbr> //表示KZX是由Kuang Zeng Xiong缩写的  
  
  
定义：<dfn> </dfn> 用来表示一个新术语定义或行业用语   
如： <dfn> MySQL </dfn>  
  
设计者详细信息：<address><a href="mailto:homer@example.org">homer@example.org</a></address>  
  
  
增加、插入：<ins>worst</ins> worst下会出现下划线  
  
  
删除：<del>Best</del> Best会有删除线 表示已经从文档中删除的文本  
  
  
不准确：<s>here</s> here会有删除线 表示不准确却并不予以删除的内容  
  
  
有序列表： 会有序号出现在每一行  
<ol>  
<li>我们</li>  //结果：1.我们  
<li>他们</li>  2.他们  
</ol>  
  
  
无序列表： 每一行前会有点号  
<ul>  
<li>我们</li>  //结果: 我们  
<li>他们</li>  他们  
</ul>  
  
  
定义列表：  
<dl>  
<dt>first</dt> //结果： first  
<dd>我们的时光</dd>   我们的时光  
<dt>second</dt> second  
<dd>清澈晶莹</dd>    清澈晶莹  
</dl>  
  
  
<a> 标签定义超链接，用于从一张页面链接到另一张页面。  
<a> 元素最重要的属性是 href 属性，它指示链接的目标。  
  
  
编写链接  
<a href="https://www.baidu.com">百度一下</a>  
  
  
建立email链接：mailto  
<a href="mailto:4546456@qq.com">邮箱</a>    href特性值mailto:开始  
  
在新窗口中打开链接：target  
<a href="http://www.baidu.com" target="\_blank">   用到target特性，把特性值设置为：\_blank  
  
链接到当前网页的特定位置：  
<a href="\#top">top</a> 跳转的按钮  
<h2 id="top"> </h2> 要跳转到的位置  
id必须以字母或者下划线开头  
  
  
添加图像：<img />  
<img src="C:\\Users\\Hope\\Desktop\\timg.jpg" alt="星空图" title="仰望的人" width="200" height="200" />  
src:图片的地址  
alt:搜索引擎的关键字  
title：放在图片上显示的字  
width:宽  
height：高  
  
  
旧代码：HTML5不在支持  
图像的水平对齐：align="left"左对齐，使文本显示在图片的右方  
align="right"右对齐，使文本显示在图片的左方  
图像的垂直对齐：align="top" 将文本的第一行置于靠近图片的顶端位置  
align="middle"将文本的第一行置于靠近图片的中间位置  
align="buttom"将文本呢的第一行置于靠近图片的底端位置  
  
保存图片的格式：jpeg png gif  
当图片包含多种不同的颜色时，应保存为jpeg格式  
当图片包含少量的颜色或大面积的同色区域时，应保存为GIF或PNG格式  
  
  
图形和图形的说明：  
<figure>  
<img src="……" />  
<br />  
<figcaption>图像的说明</figcaption>  
</figure>  
即图片与图片说明相关联  
  
表格结构  
<table> //结果：11 22  
<tr>行  
<td>11</td>列  
<td>22</td>  
</tr>  
</table>  
  
  
表格标题：<th></th> 和<td>用法一样  
<th scope="col"></th> 列标题  
<th scope="row"></th> 行标题  
  
跨列：<td colspan="2"></td> 单元格跨越两列  
  
  
跨行：<tr rowspan="2"></tr> 单元格跨越两行  
  
  
长表格：  
<table>  
<thead>标题  
</thead>  
  
<tbody>表中内容  
</tbody>  
  
<tfoot>表尾  
</tfoot>  
</table>  
  
  
表单：  
<form action="http://www.baidu.com" method="get">  
  
</form>  
action中的url来接收表单中的信息  
method为表单提交的两种方式get和post  
单行文本框：  
<form action="http://www.baidu.com" method="get">  
<p>Username:  
<input type="text" name="username" size="15" maxlength="30" /p>  
</p>  
</form>  
type="text" 决定使用的是单行文本框  
name="username" 相当于变量名  
size="15"文本框的长度  
length="30"文本框中可输入最大字符的长度  
  
密码框：  
<input type="password" name="" size="" maxlength="" />  
  
多行文本框：  
<textarea name="" cols="" rows="">   </textarea>  
cols 指定文本框的宽度 也就是一行的长度  
rows 指定文本框的长度 也就是一列的长度  
  
单选按钮：  
<input type="radio" name="select" value="" checked="checked" />one  
<input type="radio" name="select" value="" checked="checked" />two  
<input type="radio" name="select" value="" checked="checked" />three  
name:相同name的表示同一个关联中的选项  
value=""为按钮选中要被发送的值  
checked="checked" 为默认选定的按钮  
  
复选框  
<input type="checkbox" name="" value="" checked="checked" />one  
  
下拉按钮框：  
<select name="">  
<option value=""> </option>  
<option value="" selected="selected"> </option>  
</select>  
selected="selected" 默认选项  
  
多选框：  
<select name="" size="3" multiple="multiple">  
<option value="" selected="selected"> </option>  
<option value="" selected="selected"> </option>  
<option value="" selected="selected"> </option>  
<option value="" selected="selected"> </option>  
</select>  
size="3" 表示显示的个数  
  
文件上传域：  
<form action="" method="pose">  
<input type="file" name="" />  
<input type="submit" value="upload" /> 按钮 value显示在按钮上的值  
</form>  
  
图像按钮：将图像作为按钮  
<input type="image" src="c:\\users\\hope\\desktop\\timg.jpg" width="20" height="30" />  
  
按钮和隐藏控件：  
<button><img src="c:\\images\\add.jpg alt="add" />Add </button>  
即在按钮中插入图片，以及可以使用其他操作,Add为文本显示  
  
<input type="hidden" name="bookmark" value="lyrics" /> 隐藏控件   
  
标签表单控件：<label>  
第一种方式：将控件包围：<label> Age:<input type="text" name="age" /> </label>  
第二种方式：用for  
<input id="female" type="radio" name="gender" value="f">  
<label for="female">Female </label>  
  
组合表单元素：<filedset> </filedset>  
<filedest>   
<legend>Contact details</legend>  
<label>Email:<br />  
<input type="text" name="email" /></label><br />  
<label>Mobile:<br />  
<input type="text" name="mobile" /></label><br />  
<label>Telephone:<br/>  
<input type="text" name="telephone" /></label>  
</filedest>  
  
表单验证：required="required"  
即 <input type="text" name="username" />  
如果没输入就会提示“请填写此字段”  
  
日期控件：  
<input type="date" name="username" />  
  
电子邮件输入控件：  
<input type="email" name="email" />  
  
  
URL输入控件：  
<input type="url" name="url" />  
  
搜索输入控件：  
<input type="search" name="search" placeholder="输入值"/>  
placeholder为设置提示的值  
  
注释：  
  
  
id特性：是唯一的，通常被称为全局特性，作为唯一标识，用来设置自己的样式  
  
  
class特性：一种方法指定多个元素。  
  
  
将文本和元素集中在一个块级元素<div></div>  
  
  
将文本和元素集中在一个内联元素中<span></span>  
  
  
内联框架：<iframe src="" width="" height="" >  
  
  
页面信息：<meta name="" content="">  
name="description" content="描述网页的信息，最多155个字符"  
name="keywords" content="关键字，搜索引擎通过其搜索"  
name="robots" content="用来告诉搜索引擎哪些页面需要索引，哪些页面不需要索引  
关键字有：all,none,index,noindex,follow,nofollow"  
name="author" content="用于定义网页的设计者"  
name="pragma" content="用于防止浏览器对网页进行缓存，参数no-cache"  
name="expires" content="指定网页缓存过期的时间，Fri, 04 Apr 2014 23:59:59 GMT"  
name="content-Type" content="text/html";charset="utf-8"  
  
向网页中添加视频：<video>  
src=""   
poster="在视频加载时显示一个特定的图像"  
width="" height=""  
controls:如果使用该特性，就表示浏览器需要提供默认的播放控件  
autoplay:如果使用该特性，就表示该视频自动播放  
loop:如果使用该特性，表示在视频结束之后重新播放  
preload:该特性告诉浏览器在加载时，需要做什么  
none:该值表示在按下播放按钮之前，浏览器不必加载视频  
auto: 浏览器在载入页面时，应加载视频  
metadata:该值表示浏览器只需要搜集少量信息，比如：大小、首帧时间、播放列表和持续时间  
要用格式工厂，把视频转换为avc(h264)格式的mp4才能播放  
  
  
  
  
页眉：<header></header>  
页脚：<footer></footer>  
导航：<nav></nav>  
文章：<article></article>  
附属信息：<aside></aside>  
部分：<section></section>  
标题组：<hgroup></hgroup>  
图像、影音及其他文件：<figure>  
<img 放置图片>  
<figcaption>描述图像的信息</figcaption>  
     </figure>