HTML笔记

Keywords: #cs #HTML

HTML学习总结

概述

HTML的全称为Hyper Text Markup language, 汉语翻译为超文本标记语言。它就是通过标记标签来描述网页。生动一点的理解就是，HTML是给网页画好一个骨架，告诉浏览器怎么展示这个网页。

基本概念

  • 标签（element）是HTML操作的基本单位，形式一般为尖括号，可以理解为HTML就是通过这些标签告诉浏览器如何操作的。标签一般是成对出现的，但是也有例外，比如<br> 这种无内容的标签。
  • 属性（attribute）是标签的一个功能，这个主要是为了更好的展示标签所要呈现的内容，可以理解为是标签的“化妆品”
  • 类（class）属性值直接引用css的封装。

通用骨架

<!doctype html>
<!-- 这是一个HTML文档 -->
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p>这是一个简单的网页</p>
  </body>
</html>
  • <!doctype html> 是表示这个是一个html文件
  • <html></html> 这里是文本描述网页，可以理解为这是html编写有效区域
  • <head></head> 这里主要是标记网页相关信息，比如<title> 展示在浏览器的tab上面。
  • <body></body> 表示在浏览器展示时的区域，写在这里的东西都会直接展示在浏览器。
  • <p></p> 表示普通文本信息。

常见元素

在header中，主要是标记网页信息，所以这里主要是告诉大家网站的基本信息。

  • <title></title>这个是展示在浏览器标签显示的，如果收藏到浏览器也是展示这段文字，同时搜索引擎也会收录这个，所以这里面的描述一定要准确。
  • <style></style> 定义网页展示风格，这部分涉及到 css
  • <link rel="" href=""> 这个主要是引入额外的文件使用。比如引入css文件，<lilnk rel="stylesheet" href="mystyle.css">
  • <meta> 用于标记网页的字符编码、网页描述、关键字、文档作者等等。这个标签主要是给浏览器使用（比如布局）、搜索引擎（收入关键词）以及其它网页服务。比如：<meta charset="GBK"><meta name="description" content="Just for test"><meta name="keywords" content="HTML, CSS, JavaScript"><meta name="author" content="NC"><meta name="viewport" content="width=device-width, initial-scale=1.0"> 最后的viewport决定用户可视范围，device-width是根据设备展示宽度，initial-scale表示浏览器初次展示initial zoom level。
  • <script></script> 定义JavaScript元素
  • <base href="" target="_blank"> 给出网页的基本涉及的URL或者是目标

body

文本

  1. <h1></h1>...<h6></h6> 标题，最多支持6层。
  2. <p></p> 段落文本，但是注意，这里不会保留你文本的格式。
  3. <blockquote cite=""></blockquote> 引用文段
  4. <q></q> 单句引用
  5. <abbr title=""></abbr> 解释缩写词
  6. <address></address> 地址格式
  7. <cite></cite> 给文化作品备注
  8. <bdo dir='rtl'></bdo> 文本反过顺序
  9. <hr> 在文本中出现一条横线
  10. <br> 换行元素。这个和<hr> 一样没有成对
  11. <pre></pre> 保留文档的格式展示，是preformatted的前缀，可以理解为<p>的格式版
  12. <a href="https://..." title="" target="_blank"></a> 文本引用跳转.href表示跳转的url或者邮箱，title填写链接说明，target表示跳转的方式，值有：_self 当前页面打开;_blank 新建一个标签打开含有该链接框架的父框架；_top 在当前的整个浏览器打开。(可以与图片结合，图片跳转)
 <a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

常用的格式元素：

  1. <b></b> 或者<strong></strong> 加粗字体
  2. <i></i> or <em></em> 斜体
  3. <mark></mark> 标记
  4. <del></del> 删除线
  5. <ins></ins> 下划线
  6. <sub></sub> 下标
  7. <sup></sup> 上标

表格

 <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

<table></table> 表示图标，<tr></tr> 表示行，<td></td> 表示单元格

内嵌网页

<iframe> 长用来在网页中内嵌一个网页

 <iframe src="url" title="description"></iframe>

列表

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

<ul> 表示无序列表，如果要有顺序可以用<ol> :

 <ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

这里面type表示怎么展示记数。

还有其它表示方式：

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

块

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 13 million inhabitants.</p>
</div>

图像

通用格式如下：

<img src="_url_" alt="_alternatetext_" width="500" height="600">

src表示图像的地址，alt是对图像的描述

图像的map可以指定一个区域跳转：

 <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

这里的usemap给了一个编号，给后面map绑定后，就可以使用map来指定图片区域跳转。

音乐

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

视频

 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
← prev next →