HTML基础

2017-08-19 本文已影响0人 MirL

一、HTML简介

html结构png

注意事项：

<!DOCTYPE html> 必须首行定格
<title> 为文档标题
<meta charset=“utf-8”> 文档解码格式
<meta name="keywords" content="..."> 和 <meat name="description" > 提供给搜索引擎使用
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 移动端浏览器的宽高缩放
<link> 标签可以引入favicon和样式CSS文件

二、HTML语法

html语法.png
书写规范
- 小写标签属性
- 属性值双引号
- 代码因嵌套缩进
全局属性

id，<div id="unique-element"></div>，页面中唯一
class，<div class='btn'>Click Me</div>，页面中可重复出现
style，尽量避免
title，对于元素的描述类似于Tooltip的效果

三、HTML标签

[HTML5 标签集合]

html标签集合.jpg

文档章节

<body> 页面内容 <header> 文档头部 <nav> 导航 <aside> 侧边栏 <aritce> 定义外部内容（如外部引用的文章）<section> 一个独立的块 <footer> 尾部
页面通常结构

页面结构.gif

文本标签

<!— 默认超链接 —>
 <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="_blank">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="#achor">Achor Point</a>
<section id="achor">Achor Content</section>
 
<!-- 邮箱及电话需系统支持 -->
<a href="mailto:sample-address@me.com" title="Email">Contact Us</a>
<!-- 多个邮箱地址 -->
<a href="mailto:sample-address@me.com, sample-address0@me.com" title="Email">Contact Us</a>
<!-- 添加抄送，主题和内容 -->
<a href="mailto:sample-address@me.com?cc=admin@me.com&subject=Help&body=sample-body-text" title="Email">Contact Us</a> 
<!-- 电话示例 -->
<a href="tel:99999999" title="Phone">Ring Us</a>

组合内容标签

<div>
<p>
<ol>
<ul>
<dl>
<pre>
<blockquote>

文档章节

<body> 页面内容 <header> 文档头部 <nav> 导航 <aside> 侧边栏 <aritce> 定义外部内容（如外部引用的文章）<section> 一个独立的块 <footer> 尾部

引用

<cite> 引用作品的名字、作者的名字等
<q> 引用一段文字（大段文字引用用<blockquote>）
<blockquote> 引用大块文字
<pre>保存格式化的内容（其空格、换行等格式不会丢失）

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

代码

<code> 引用代码

格式化

<b> 加粗 <i> 斜体

强调

<em> 斜体。着重于强调内容，会改变语义的强调<strong>粗体。着重于强调内容的重要性

换行

<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>

资源标签

图标签

canvans基于像素，性能要求比较高，可用于实时数据展示。svg为矢量图形图像。

热点区域标签

`img`中套用`map`以及`area`可以实现点击某部图片触发一个链接，点击另一部分触发另外一个链接。
![](mama.jpg)
<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可用于对表单进行分区
表单中的其他控件类型：

textarea （文本框）
select与option（下拉菜单可多选）

input 类型支持值列表

Value	Description
button	Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox	Defines a checkbox
color	Defines a color picker
date	Defines a date control (year, month and day (no time))
datetime	The input type datetime has been removed from the HTML standard. Use datetime-local instead.
datetime-local	Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
email	Defines a field for an e-mail address
file	Defines a file-select field and a "Browse..." button (for file uploads)
hidden	Defines a hidden input field
image	Defines an image as the submit button
month	Defines a month and year control (no time zone)
number	Defines a field for entering a number
password	Defines a password field (characters are masked)
radio	Defines a radio button
range	Defines a control for entering a number whose exact value is not important (like a slider control)
reset	Defines a reset button (resets all form values to default values)
search	Defines a text field for entering a search string
submit	Defines a submit button
tel	Defines a field for entering a telephone number
text	Default. Defines a single-line text field (default width is 20 characters)
time	Defines a control for entering a time (no time zone)
url	Defines a field for entering a URL
week	Defines a week and year control (no time zone)

语义化

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

三、实体字符

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

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

字符	名称	实体名	实体数
"	双引号	&quot	&#34
&	&符	&amp	&#38
<	左尖括号（小于号）	&lt	&#60
>	右尖括号（大于号）	&gt	&#62
	空格	&nbsp	&#160
	中文全角空格	&qmp	&#12288

常用特殊字符实体（不建议使用实体）：

字符	名称	实体名	实体数
¥	元	¥	¥
¦	断竖线	¦	¦
©	版权	©	©
®	注册商标R	®	®
™	商标TM	™	™
·	间隔符	·	·
«	左双尖括号	«	«
»	右双尖括号	»	»
°	度	°	°
×	乘	×	×
÷	除	÷	÷
‰	千分比	‰	‰

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

浏览器兼容

主流浏览器都兼容 HTML5 的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如：

<script>
    document.createElement("header");
</script>

也可以使用 shiv 来解决兼容性问题，详情可参考HTML5 Shiv

HTML基础

一、HTML简介

二、HTML语法

三、HTML标签

[HTML5 标签集合]

文档章节

文本标签

组合内容标签

文档章节

引用

代码

格式化

强调

换行

列表

无序列表

有序列表

自定义列表

嵌入

资源标签

图标签

热点区域标签

表格

表格代码示例

表单

语义化

三、实体字符

浏览器兼容

猜你喜欢

热点阅读