01_HTML学习

>>HTML介绍

　　超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。

>>HTML文档结构

  • <!DOCTYPE html> 声明为 HTML5 文档。注：doctype 声明是不区分大小写的
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 
    • <meta charset="utf-8"> 定义网页编码格式为 utf-8。 META 标签是记录有关当前页面的信息（如字符编码、作者、姓名等），或者设定页面自动 刷新、自动跳转到其它页面等
    • <link> 标签定义了文档与外部资源之间的关系。
    • <title> 标签定义了不同文档的标题。
    • <style> 标签定义了HTML文档的样式文件引用地址.
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习教程</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

 

>>段落标签

　　<p>这是一个段落。</p>

属性：
　　ALIGN=LEFT | RIGHT | CENTER

　　换行：<br>

　　水平线：<hr>

>>文字标签

　　标题相关：<h1></h1> - <h6></h6>

　　文本格式化标签

标签描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气  在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<span> 为文字设置单独的样式

　　

　　

 

 

 

 

 

　　

　　HTML 引文, 引用, 及标签定义

标签描述
<abbr> 定义缩写
<address> 定义地址   比如一些网站的联系地址信息
<bdo> 定义文字方向
<blockquote> 定义长的引用   如在文章中引入大段某知名作家的文字
<q> 定义短的引用语  比如在你的网页的文章里想引用某个作家的一句诗
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

　　

 

 

 

 

 

　　"计算机输出" 标签

<code> 定义计算机代码   eg:在网页中显示一些计算机专业的编程代码<code>var i=i+300;</code>
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本  为网页加入大量代码

 

 

 

 

 

>>图片标签

　　<img src="/images/logo.png" width="258" height="39" />

　　1、src：标识图像的位置；

　　2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

　　3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

 

>>超链接标签

　　<a href="http://www.runoob.com">这是一个链接</a>

　　target 属性　

 

>>列表标签

<dl>
　　<dt>Coffee</dt>
　　<dd>- black hot drink</dd>
　　<dt>Milk</dt>
　　<dd>- white cold drink</dd>
</dl>

标签描述
<ol> 定义有序列表   属性：type=编号类型（1，a,A,I,i） start=value
<ul> 定义无序列表  li的属性：type=（disc：实心圆  circle：空心圆  square：小方块  ）默认实心圆
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述

 

 

 

 

 

 

>>表格标签

标签描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

 

 

 

 

 

 

 

 

 

<table>属性

表格的边框显示

语法格式：<table frame="边框显示值">

 

 

跨多列的语法： <th colspan=#> <td colspan=#>

跨多行的语法： <th rowspan=#> <td rowspan=#>

语法格式：
<caption align="值" valign="值" >表格标题</caption>

>>表单标签

　　文本域（Text Fields） <input type="text">

　　密码字段  <input type="password"> 

　　单选框选项  <input type="radio"> 

　　复选框  <input type="checkbox"> 

　　提交按钮  <input type="submit"> 

　　New : HTML5新标签

标签描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist>New 指定一个预先定义的输入控件选项列表
<keygen>New 定义了表单的密钥对生成器字段
<output>New 定义一个计算结果

 

 

 

 

 

 

 

 

 

 

 

 

<form>属性

 

<input>标签属性

HTML5新增属性

type="color"  颜色

type="date"/type="datetime"  日期

type="email"  邮箱

type="number"  数字

type="range"  范围

type="url"  url

type="tel"  电话

 

<fieldset>

　　<legend>health information</legend>

　　height: <input type="text" />

　　weight: <input type="text" />

</fieldset>

 

>>框架标签

　　<iframe src="URL"></iframe>  浮动窗口

属性 描述

frameborder 

是否显示边框。设置属性值为 "0" 移除iframe的边框
src 显示一个目标链接的页面
height 和 width 定义iframe标签的高度与宽度

 

 

 

 

 

 

 

 

>>HTML字符实体

显示结果描述实体名称实体编号
  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号  &apos; (IE不支持) &#39;
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 人民币/日元 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

>>HTML5新增标签和特性

　　表单标签

　　已移除元素

　　以下的 HTML 4.01 元素在HTML5中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>

　　HTML5提供了新的元素来创建更好的页面结构：

标签描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command> 定义命令按钮，比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框，比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释（中文注音或字符）。
<rt> 定义字符（中文注音或字符）的解释或发音。
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节（section、区段）。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　　canvas标签

　　标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

　　<canvas id="myCanvas" width="200" height="100"></canvas>

　　媒体标签

 

 

 

 

posted @ 2018-07-02 17:43  樱花落&浅暮雪  阅读(303)  评论(0)  编辑  收藏  举报