原创

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 条评论
登录 后参与评论

相关文章

  • Django开发在线教育平台--学习整理(一)

    首先,打开cmd,cd到存放django项目的文件夹,创建一个新工程(也可以用虚拟环境virtualenv):

    SimonDM
  • CSS学习记录及整理

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

    SimonDM
  • 一键生成你的微信社交数据报告

    今天分享的是一键生成你的微信社交数据报告(公众号内回复 微信 获取工具),这个工具是基于python对微信好友进行全方位数据分析,包括:昵称、性别、年龄、地区、...

    苏生不惑
  • WebStorm:遇到的问题

    最近自己WebStorm用得多一点了 和android studio一样,同样是IDEA的ide (记得自己还是eclipse的时候,原来同事很早就开始用I...

    dodo_lihao
  • 记一次非常愉悦的 Python 使用经历

    临近毕业,班群里发了个要核对的信息的表格,要我们检查一下,涉及到毕业证。 于是我就下载来看一看,结果傻了眼:(敏感信息已打码) ? 是的,姓名和身份证号都是明文...

    企鹅号小编
  • Android Base64编码字符串与文件之间的转化

    开发中有时传输图片或音频等文件。我们会采用Base64编码成字符串传输 那么获取后 就要重新生成文件。

    剑行者
  • 20190503-汉明距离

    两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目。给出两个整数 x 和 y,计算它们之间的汉明距离

    py3study
  • 记录下关于微信h5支付那点事儿(百分之80拷贝官方)

    H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。主要用于触屏版的手机浏览器请求...

    HLQ_Struggle
  • uniapp 组件传参

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    达达前端
  • Ajax请求SpringMVC Json数据报错Http 400(一)

        最近在完善博客的过程中,发现了一些细节问题。后台使用的是SpringMvc,前台使用的是jquery请求。之前后台采用的是

    幽鸿

扫码关注云+社区

领取腾讯云代金券