HTML学习笔记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML学习笔记相关的知识,希望对你有一定的参考价值。
HTML5学习笔记
1.html:(Hyper Text Markup Language),超文本标记语言,用于标记,页面中的内容:文字,图片,音视频内容,只是单纯的显示,需要修饰就要用到CSS.
2.HTML文档的基本结构
<!DOCTYPE html>//首行定格书写,声明文档类型
<html lang=“en”>//语言类型
<head> //头部
<meta charset=“UTF-8”>//编码类型
<title>Title</title>//文档标题,浏览器窗 口显示的那个标题
<meta name="keywords" content="websit search keyword">
<meta name="description" content="website discription">//两个结合给搜索引擎抓取,SEO
<meta name="viewport" content="width=device-width,initial-scale=1.0">//移动端浏览器的宽高和缩放
<link href="css.css">//引入外部的CSS样式
</head>//结束标签
<body>//文档主体部分
</body>
</html>
3.一些重要的属性
id: <div id=“unique-string”></div>整篇文档只能有一个
class:<div class=“div”>class</div>一个类群,可重复出现
style:尽量避免使用内嵌样式
title:对对应元素的描述
<!--常用标签的作用
<body>页面的主体部分
<header>某个整体的头部
<aside>正文的辅助侧边栏
<nav>导航部分
<article>内容整体,比如一篇文章的内容
<section>某个独立小块
<footer>文档或者某个部分的尾部
-->
<!--默认的超链接-->
<a href="http://www.baidu.com" title="sample link">默认的链接</a>
<!--当前窗口显示-->
<a href="http://sample.com" title="sample link" target="_self">sample</a>
<!--新窗口显示 -->
<a href="http://sample.com" title="sample link" target="_blank">blank link</a>
<!--iframe中打开链接-->
<a href="http://sample.com" title="sample link" target="iframe-name">sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>
<!--页面中的锚点-->
<a href="#id">Anchor point</a>
<section id="id">Anchor content</section>
邮箱和电话
<a href="mailto:[email protected]" title="Email">Contact US</a>
<!--多人分发-->
<a href="mailto:[email protected][email protected]">Contacts</a>
<!--抄送主题和内容-->
<a title="email" href="mailto:[email protected]&subject=help&body=body content">Contacts</a>
<!--电话-->
<a href="tel:9999" title="phone">phone</a>
<!--4.内容组合标签-->
<div>块</div>
<p>段落</p>
<ol>有序列表</ol>
<ul>无序列表</ul>
<dl>一个单元格</dl>
<pre>保存模块化的内容,比如代码</pre>
<blockquote>引用大段的文字</blockquote>
<!--引用-->
<cite>引用作品的名字或者作者的名字</cite>
<q>引用小段文字</q>
<canvas>基于像素,性能要求比较高,用于实时显示数据</canvas>
<svg>矢量图形图像</svg>
<!--热点区域标签-->
<!--img标签中套用map及area可以实现点击某部分图片触发一个连接,另外一部分对应另外的连接-->
<img src="mama.jpg" width="100" height="100" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,50,50" href="index.html" alt="热点1">
<area shape="circle" coords="100,100,12" href="" alt="redian2">
</map>
<!--表格-->
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data222</td>
</tr>
<tr>
<td colspan="2">11</td>
<td></td>
</tr>
<tr>
<td rowspan="2">11</td>
<td></