您的位置：首页 > Web前端

前端学习笔记--HTML

2015-10-19 00:00 459 查看

摘要: HTML 个人笔记

本笔记来自同学笔记：https://li-xinyang.gitbooks.io/frontend-notebook/content/chapter1/03_01_html_intro.html

一 html简史：

二语法

每个HTML文档应包含一下基本成分：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

使用HTML5声明文档DOCTYPE可以确保浏览器以可靠的模式呈现页面，同时告诉HTML验证器根据HTML5允许的元素和语法检查代码。HTML5的doctype不区分大小写。搜索引擎可能会根据lang属性指定的语言区分搜索结果，从而显示与搜索词语言相同的页面。屏幕阅读器也可能通过指定的语言调整其发音。嵌套在head元素里的代码不一定要缩进，但缩进可以方便看出head从哪里开始，包含什么内容，在哪里结束，有些页面的head会很长。

title元素可以创建页面标题，页面标题一般出现在窗口的标题栏和浏览器的标签页中。也会在访问者的浏览历史列表和书签里，好的页面标题可以提升搜索引擎结果排名，并让访问者获得更好的体验。建议将title的核心内容放在前60各字符（含空格）中，因为搜索引擎通常将超过此数目的字符截断。

语法

开始标签、闭合标签、自闭合标签、一个或多个属性值、标签嵌套（闭合时按嵌套顺序）

如

<!--标签的嵌套-->
<div class="m-win">  <!--div开始标签-->
<form class="m-login" action="#">
<fieldset>
<legend>通行证登录</legend>
<input type="text" value="账号">  <!--input是自闭合标签-->
<input type="password" value="密码">
<!--button多个属性-->
<button type="submit" class="u-btn">登录</button>
</fieldset>
</form>

</div>  <!--div闭合标签-->

书写规范：

小写标签和属性

属性值双引号

代码因嵌套缩进

全局属性

id,

<div id='unique-element'></div>

，页面中唯一

class，

<button class='btn'>Click Me</button>

，页面中可重复出现

style，尽量避免

title，对于元素的描述类似于 Tooltip 的效果。

三标签

上图：

文档章节标签

<body> 页面内容 <header> 文档头部 <nav> 导航 <aside> 侧边栏 <article> 定义外部内容（如外部引用的文章） <section> 一个独立的块 <footer> 尾部 html5提供了更多语义化的标签来标识页面的结构。语义化：语义化（Semantic Tag）是指用合适的标签标识适当的内容，它可以起到搜索引擎优化（Search Engine Optimization），提高可访问性（例如盲人使用的屏幕阅读器），与此同时还可以提高代码的可读性。简而言之也就是在正确的地方使用正确的标签。

标题标签

h1~h6 之间的区别是重要性的区别。

写法：

<h1>一级标题内容</h1>

文本标签

<!-- 默认超链接 -->
<a href="http://sample-link.com" title="Sample Link">Sample</a>
<!-- 当前窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_self">Sample</a>
<!-- 新窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_blacnk">Sample</a>
<!-- iframe 中打开链接 -->
<a href="http://sample-link.com" title="Sample Link" target="iframe-name">Sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>
<!-- 页面中的锚点 -->
<a href="#pay">pay</a>
<div id="achor">pay page</div>
<!-- 邮箱及电话需系统支持 -->
<a href="mailto:8796765@qq.com" title="Email">Contact Us</a>

强调 em strong

<em>

斜体。着重于强调内容，会改变语义的强调

<strong>

粗体。着重于强调内容的重要性

组合内容标签

<div>

<p>

<ol>

<ul>

<dl>

<pre>

<blockquote>

引用

<cite>

引用作品的名字、作者的名字等

<q>

引用一小段文字（大段文字引用用

<blockquote>

）

<blockquote>

引用大块文字

<pre>

保存格式化的内容（其空格、换行等格式不会丢失）

代码

<code>

引用代码

格式化

<b>

加粗

<i>

斜体

换行

<br>

换行

列表

无序列表

<ul><li>标题</li><li>结论</li></ul>

有序列表

<ol><li>第一</li><li>第二</li></ol>

自定义列表

<dl><dt>作者</dt><dd>爱因斯坦</dd><dt>作品</dt><dd>《相对论》</dd><dd>《时间与空间》</dd></dl>

一个

<dt>

可以对应多个

<dd>

NOTE:

<dl>

为自定义列表，其中包含一个或多个

<dt>

及一个或多个

<dd>

，并且

dt

与

dl

列表会有缩进的效果。

<pre>

会保留换行和空格，通常与

<code>

一同使用。

<pre><code>
int main(void) {
printf('Hello, world!');
return 0;
}  </code></pre>

<blockquote>

拥有

cite

属性，它包含引用文本的出处，示例如下所示：

<blockquote cite="http://example.com/facts"><p>Sample Quote...</p></blockquote>

嵌入

<iframe src=""></iframe>
页面操作可以不影响到iframe的内容

<!--object embed通常用来嵌入外部资源 -->
<object type="application/x-shockwave-player">
<param name="movie" value="book.pdf">
</object>

<!--视频 track可以引入字幕 autoplay可以使视频加载后自动播放，loop可以使其循环播放 -->
<video autoplay loop controls="controls" poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<track kind="subtitles" src="video.vtt" srclang="cn" label="cn">
</video>

资源标签

图标签

canvas

基于像素，性能要求比较高，可用于实时数据展示。

svg

为矢量图形图像。
热点区域标签

img

中套用

map

以及

area

可以实现点击某部分图片触发一个链接，点击另一部分触发另一个链接

<img src="mama.jpg" width=100 height=100 usemap="#map" /><map name="map"><area shap="rect" coords="0,0,50,50" href="" alt=""><area shap="circle" coords="75,75,25" href="" alt=""></map>

表格

表格代码示例

<table>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>

使用

colspan=val

进行跨列，使用

rowspan=val

进行跨行。

表单

<form action="WebCreation_submit" method="get" accept-charset="utf-8">
<fieldset>
<legend>title or explanatory caption</legend>
<!-- 第一种添加标签的方法 -->
<label><input type="text/submit/hidden/button/etc" name="" value=""></label>
<!-- 第二种添加标签的方法 -->
<label for="input-id">Sample Label</label>
<input type="text" id="input-id">
</fieldset>
<fieldset>
<legend>title or explanatory caption</legend>
<!-- 只读文本框 -->
<input type="text" readonly>
<!-- 隐藏文本框，可提交影藏数据 -->
<input type="text" name="hidden-info" value="hiden-info-value" hidden>
</fieldset>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>

使用

fieldset

可用于对表单进行分区

语义化

语义化（Semantic Tag）是指用合适的标签标识适当的内容，它可以起到搜索引擎优化（Search Engine Optimization），提高可访问性（例如盲人使用的屏幕阅读器），与此同时还可以提高代码的可读性。简而言之也就是在正确的地方使用正确的标签

实体字符

实体字符（ASCII Encoding Reference）是用来在代码中以实体代替与HTML语法相同的字符，避免浏览解析错误。它的两种表示方式，第一种为

外加实体字符名称，例如

，第二种为

加实体字符序号，例如

常用HTML字符实体（建议使用实体）：

字符	名称	实体名	实体数
"	双引号	"	"
&	&符	&	&
<	左尖括号（小于号）	<	<
>	右尖括号（大于号）	>	>
	空格

NOTE：具体所需可在使用时查询，无需记忆。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航