HTML基础（一）

喺小VIE
109 阅读2分钟

简介

HTML：HyperText Markup Language，超文本标记语言

HyperText，超文本，意思是不仅于文本（超链接，图片......）

Makrup，标记，意思是文本标记为超文本的标记符号（<a>，<li>......）

Language，语言，即特定的开发语言

标签结构

<!-- 双标签结构 -->
<标签名 属性名=“属性值”></标签名>

<!-- 单标签的例子：<input/> -->
<标签名/>

<!-- 支持直接写属性值的情况：<input disabled> -->
<标签名 属性值>

HTML基本结构

<html>
  <head></head>
  <body>
    <标签名 属性名=“属性值”/>
  </body>
</html>

HTML文档声明

<!DOCTYPE html> <!-- HTML5 -->

HTML字符编码

<head>
  <meta charset="UTF-8">
</head>

HTML设置语言

大多数的浏览可以分析网页内容的主语言，然后依据客户端的使用语言提供翻译提示

<html lang="en">
</html>

HTML标准结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>TITLE</title>
  </head>
  
  <body>
    
  </body>
</html>

HTML排版标签

<h1>标题</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<div>
  <p>段落</p>
  <p></p>
  <p></p>
</div>

HTML语义化标签

  • 提高代码阅读效率
  • 利于SEO
  • 利于设备解析（阅读模式）

HTML块级元素与行内元素

  • 块级元素：独占一行的元素，块级元素内可以嵌套块级和行内（<p>``<h1>也是块级但不能嵌套块级）
<h1></h1>
<div></div>
<p></p>
  • 行内元素：不独占一行，行内元素只能有行内（不建议嵌套块级，否则会影响样式）
<input>
<span></span>

HTML文本标签

<!-- 呈现斜体 -->
<em></em>

<!-- 呈现加粗 -->
<strong></strong>

<!-- 没有效果，只是用于短语包裹 -->
<span></span>

HTML图片标签

<img src="图片路径" alt="利于SEO" width="宽" height="高">

HTML超链接

<a>标签是一个表现为行内元素的标签，但实际它可以嵌套块级元素和行内元素（除了<a>）

<!-- 原页面跳转 -->
<a href="http://" target="_slef"></a>

<!-- 新页面跳转 -->
<a href="http://" target="_blank"></a>

<!-- 直接打开文件 -->
<a href="./xxx.mp4"></a>

<!-- 下载方式打开文件 -->
<a href="./xxx.mp4" download="文件名"></a>

<!-- 跳转到锚点（使用 <a name=""> 实现） -->
<a href="#锚点名"></a>
<a name="锚点名"></a>

<!-- 跳转到锚点（使用 id="" 实现） -->
<a href="#锚点名"></a>
<p id="锚点名"></p>

<a href="#">回到顶部</a>

<a href="">刷新页面</a>

<!-- 调用js脚本 -->
<a href="javascript:alert('');">弹窗</a>

<!-- 唤起外部应用 -->
<a href="tel:10086">电话</a>
<a href="mailto:10000@qq.com">邮件</a>
<a href="sms:10086">短信</a>

HTML列表

  • 有序列表（ol，ordered list）
  • 无序列表（ul，unordered list）
  • 自定义列表（dl，difination list）
<!-- 有序列表 -->
<ol>
  <li></li>
  <li></li>
</ol>

<!-- 有序列表 -->
<ul>
  <li></li>
  <li></li>
</ul>

<!-- 自定义列表 <dl> <dt> <dd> -->
<dl>
  <dt>difination title</dt> <dd>difination description</dd>
  <dt>difination title</dt> <dd>difination description</dd>
</dl>

<!-- 列表嵌套 -->
<ul>
  <li>章节一
    <ul>标题一
      <li>项目1</li>
      <li>项目2</li>
    </ul>
  </li>
  <li>章节二</li>
</ul>

HTML其他标签

<!-- 换行，break -->
<br>

<!-- 分割线 -->
<hr>

<!-- 保留格式 -->
<pre></pre>
avatar
文章
阅读
粉丝