HTML学习记录及整理

原创

SimonDM

修改于 2018-05-05 11:59:10

5.2K12

修改于 2018-05-05 11:59:10

文章被收录于专栏：Python Web学习记录及整理

HTML简介

<!DOCTYPE ”此文仅为个人学习的知识梳理，权威且更详细的内容请查阅w3school。“>

THML全称Hyper Text Markup Language，超文本标记语言。它是一种标记语言，用于告诉浏览器区分文本的含义，如哪些是标题，哪些是段落，哪些是超链接等，它不是用来定义文档的样式的，定义样式可以用css。

<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

HTML标签

基础

<!DOCTYPE> DTD声明，必须放在文档的第一行，用于声明文档的类型。HTML5中为<!DOCTYPE html>。必须给html文档添加DTD声明，这样浏览器才能获知文档的类型。
<html></html>此标签告诉浏览器这是一个html类型文档。
- <head></head>定义文档的头部，是所有头部信息的容器。
  - <base>为页面上所有的链接规定默认的链接地址或目标。必须href：URL，可选target：_blank/_self/_parent/_top/_framename。
  - <meta>提供文档的元信息，如提供搜索引擎的搜索关键词。name:"keywords" content:"HTML,ASP,PHP"，http-equiv:指明服务器发给浏览器的头部信息，如contet_type:text/html。
  - <title>定义文档的标题，必须且只能放在head中。
  - <link>链接外部资源，常用于链接外部样式表，用于链接一个外部的css文件。rel：stylesheet，type：text/css，href：URL。
  - <script>定义JavaScript脚本。必须：type：text/javascript，可选src：URL 外部资源，charset：charset 字符集。等。另外，<noscript>用于定义客户端不支持js的替代内容。
  - <style>定义HTML文档的样式信息，用于文档内部使用的css。必须且唯一：type：text/css。
- <body></body>定义文档的主体，内包含文档的所有内容（文字、图片、视频、超链接等）。
<h1>to<h6>定义标题。
<p>定义段落。
<br>一行空行。
<hr>一条水平线。
注释，不能嵌套。

格式

<i>斜体<b>粗体<big>大号字体<small>小号字体<tt>等宽字体。
<em>强调文本<strong>语气更强<code>计算机代码<samp>样本文本<var>变量<cite>引用<del>被删除的文本。

表单

<form>定义html表单。

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

accept-charset规定服务器可处理的表单数据字符集。
action：URL。当提交表但时向何处发送数据。
autocomplete：on/off。是否自动完成。用户输入字段时，浏览器会根据之前输入过的值显示。
enctype发送表单之前的编码方式
method：get/post，用于发送form-data的方法
name表单名称
novalidate提交表时是否进行验证。
target表单的action URL打开方式。

<input>输入框，用于搜集用户信息。
- type：
  - text文本输入框，明文
  - password密码输入框，用户输入的字符会被掩码
  - button按钮，可选value属性设置按钮上的显示字符。
  - reset重置按钮，用于清楚表单中的所有数据
  - submit提交按钮
  - image图像形式的提交按钮
  - radio单选按钮
  - checkbox复选框
  - file用于上传文件
  - hidden隐藏的字段，对用户不可见。
<textarea>多行文本输入控件
<button>按钮
<select>下拉列表

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<optgroup>列表中相关选项的组合
<label>与input联用，标注
<datalist>下拉列表，与input联用，定义input可能的值。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

框架

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

<frameset>定义框架集。可选cols/rows定义框架集中的列/行数目和尺寸。
<frame>定义frameset内的框架窗口。
<iframe>内联框架。

图像

<img>图像。链接图像。必须src：URL，图像资源。alt：text图像的替代文本。可选：height、width。
<map>图像映射
<area>定义图像地图的内部区域。
<canvas>定义图形。
<figcaption>文档中插入图像的标题。
<figure>文档中插入图像。

音频/视频

<audio>音频

<audio controls="controls" autoplay="autoplay">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

<video>视频
- <height>视频播放器的高度。
- <width>视频播放器的宽度。
- <poster>视频下载时或播放前显示的图像。

<video controls poster="/images/w3school.gif">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>

<source>定义媒介资源，为了在浏览器不支持某格式的情况下提供替代格式资源。

链接

<a>定义超链接。
- href：URL链接指向页面的URL。
  - 绝对URL-href="http://www.example.com/index.html"指向另一个站点。
  - 相对URL-href="index.html"指向站点内的某个文件。
  - 锚URL-href="#top"指向页面中的锚点。
- target：在何处打开新链接页面。
  - _blank新建窗口。
  - _self当前窗口，默认。
  - _top
  - _parent
  - framename指定框架中打开。
- type链接目标类型
<link>外部资源
<nav>定义导航链接，用于代替ul。如果某些链接组是用于导航，可用nav包裹。

列表

<ul>unordered list定义无序列表，通常与li配套使用，常用于文章列表、图片列表以及导航条等。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>ordered list定义有序列表，用的不多。
<li>list item定义列表条目，常嵌套于ul和ol中使用。
<dl><dt><dd>definition list定义列表，与<dt>definiton title和<dd>definition description联用。常用于定义某块内容，如导航栏的下拉菜单内容等。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

表格

<table>定义html的表格
<caption>表格标题
<th>table head表头，可选属性colspan：num，单元格横跨列数。rowspan：num，单元格竖跨行数，都用于合并单元格。
<tr>table row表格行
<td>table data表格单元（单元格cell），用法同th。
<thead><tbody><tfoot>定义表格的表头、主体、脚注。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$120</td>
  </tr>
</table>

样式/节

<div>块，块级元素。
<span>行内元素，常用于为块中某些内容设置单独的样式。
<header>页眉，通常放一些介绍信息等。
<footer>页脚，通常包含文档的作者、版权信息、使用条款、联系信息等。
<section>节
<article>用于页面中相对独立的一篇文章。
<aside>定义其所处内容之外，如侧边栏。
<details>元素的细节<summary>定义details的标题
<dialog>对话框

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

html5

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

html5

登录后参与评论

0 条评论

热度

HTML学习记录及整理

HTML学习记录及整理

HTML简介

HTML标签

基础

格式

表单

框架

图像

音频/视频

链接

列表

表格

样式/节

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐