HTML学习记录及整理

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>
  1. accept-charset规定服务器可处理的表单数据字符集。
  2. action:URL。当提交表但时向何处发送数据。
  3. autocomplete:on/off。是否自动完成。用户输入字段时,浏览器会根据之前输入过的值显示。
  4. enctype发送表单之前的编码方式
  5. method:get/post,用于发送form-data的方法
  6. name表单名称
  7. novalidate提交表时是否进行验证。
  8. 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>
  • <autoplay>音频就绪后自动开始播放。
  • <controls>显示播放控件。
  • <loop>循环,音频结束后重新开始播放。
  • <muted>静音
  • <preload>加载方式并预备播放,与autoplay冲突。
  • <src>资源。URL
  • <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>
  • 其它属性同audio
  • <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>对话框

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ionic3+

【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念

用ionic3来实现就是采用segment组件。其中ios和android的样式分别如下两图:

11020
来自专栏calmound

基于iframe的移动端嵌套

需求描述 上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其...

62460
来自专栏无所事事者爱嘲笑

Vue中scoped css和css module比较

48520
来自专栏IT开发技术与工作效率

IntelliJ IDEA 教程 技巧篇本篇概要

12920
来自专栏企鹅号快讯

wordpress导航菜单详解及改造

对于wordpress主题来说 wp的菜单是必不可少的 可以用于制作导航栏 也可以做侧边栏、页脚导航等等 只要熟练掌握 就能利用wp菜单做成想要的东西 话不多说...

55570
来自专栏练小习的专栏

几种SVG图像的fallbacks

在网页前景图像的使用上,针对不同像素比的屏幕,常规的做法是使用2X 3X的图像。 一些特定场景可以使用SVG来完成,因为他的矢量特性,不需要再针对更高的像素比...

19750
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

19020
来自专栏自动化测试实战

船长带你看书——《selenium2 python 自动化测试实战》(2)

38670
来自专栏Ray学习笔记

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片幻灯片、下拉菜单、弹出框等,都可以结合JavaScript和CSS实现。在这章,我...

13940
来自专栏大前端开发

微信小程序之图片选择、预览与上传

所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升...

76750

扫码关注云+社区

领取腾讯云代金券