首页 > > 网页制作 > css >

HTML

2018-06-29 06:37:46来源：博客园阅读 ()

什么是 HTML？

超文本标记语言(Hypertext Markup Language, HTML)是一个可以用来结构化 Web 内容并给予其含义和目标的编码语言。

HTML并不是真正的的程序语言，它是一种标记语言
它由一系列的元素（elements）所组成，不同的元素各有功用。

HTML 须知

设定文档语言

<html lang="zh-CN">

SEO（搜索引擎优化）
有助于视觉障碍人士通过读屏器阅读页面

块级元素和内联元素

块级元素在页面中以块的形式展现 - 块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中，如 <div>，<h1>, <p>。
内联元素通常出现在块级元素中并被其它文本所包围 - 内联元素不会导致文本换行，如 <a>，<em>，<strong>。

属性

布尔属性

如 <input> 被添加 disabled 属性后，就接收不到用户输入了。

<input type="text" disabled>
<input type="text">

<input type="text" disabled> 就是推荐的写法

以 checkbox 勾选为例：

<input type="checkbox" checked=false>

<input type="checkbox" >

以上五种情况，上面的四种都会导致checkbox被勾选，只有最后一种，checkbox不会被勾选

全局属性

id, class，style，title 都是是全局属性，可以被任何 HTML 元素使用。

hidden 可用于隐藏某个页面元素。

<div class="notice" hidden>请先登录</div>

contenteditable 全局属性可以使元素内容变成可编辑。

<p contenteditable>大家好！<p>

注释

<p>大家好！<p>
<!-- <p> 问候，这是一段注释 </p> -->

快捷键：在 Atom 里按 ctrl + / 或 command + / 注释代码。　

HTML 中有用的字符实体

注释：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

所以在html页面我们要显示<div>的话，应该在编辑器里面输入<div><div><div>

HTML 头部

<head> 的内容不会在浏览器中显示，它的作用是包含一些页面的元数据。
元数据（Metadata）：描述数据的数据
<title> 是用来表示整个HTML文档大致内容的元数据，即是网页的最上方（非内容页）显示的题目（不是文档的内容）

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>evenyao的博客</title>
</head>

元数据 `<meta>`

指定文档编码

<meta charset="utf-8">

适配移动页面

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设置 referer （一种防止因图片地址是外链而导致图片挂掉的方法）

<meta name="referrer" content="never">

添加页面描述（在搜索引擎搜索页面的时候，可以看到 content 里面设置的内容）

<meta name="description" content="腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站，是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户，致力成为最具传播力和互动性，权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务，为中国数以亿计的互联网用户提供富有创意的网上新生活。">

link 和 script

定制页面图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

应用 CSS 和 JS

<link rel="stylesheet" href="app.css">
<script src="app.js"></script>

HTML文本

标题与段落

<h1>HTML简介</h1>

<h2>什么是 HTML？</h2>
<p>超文本标记语言(Hypertext Markup Language, HTML)是一个可以用来结构化 Web 内容并给予其含义和目标的编码语言。<p>

<h3>嵌套元素</h3>
<p>你可以将一个元素置于其他元素之中——这被称作嵌套。<p>

<h3>空元素</h3>
<p>有一些元素并不包含内容，它们被称为空元素。</p>

<h2>HTML文本</h2>

<h3>标题</h3>
<p>标题元素允许你指定内容的标题和子标题。</p>

<h3>段落</h3>
...

列表

无序列表

<ul> Unordered List

有序列表

<ol> Ordered List

嵌套列表案例

<p>金州勇士队的全明星球员包括：<p>
<ul>
  <li>
    斯蒂芬·库里
    <ul>
      <li>微博：<a href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
      <li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
    </ul>
  </li>
  <li>凯文·杜兰特</li>
  <li>克莱·汤普森</li>
  <li>德雷蒙德·格林</li>
</ul>

HTML 超链接

如果没有超链接，Web 就没有多大意义了。

简单链接

<a href="https://github.com/evenyao">我的github</a>

链接中的 title 属性

<a href="https://github.com/evenyao" title="去往evenyao的github">我的github</a>

这个时候当光标移到这个超链接之上的时候，会显示 title 中设置的内容。

外部链接

<a href="https://github.com/evenyao" title="去往evenyao的github" target="_blank">我的github</a>

将 target 设置成 _blank 时，点击链接浏览器会新开一个 Tab 打开该网页。

返回顶部链接

或者作为一个测试链接的空返回跳转

<a href="#">返回页面顶部</a>

文档内部链接

用于定位到文档的某一部分，<a> 的 href 要对应文档内某个元素的 id（id 的值在文档内要唯一）。即定位锚点。

电话链接和Email链接

电话连接可用于移动端

<a href="tel:+86130 0000 0000">+86 130 0000 0000</a>

<a href="mailto:even@mail.com">发送邮件给even</a> <br>

<a href="mailto:even@mail.com?cc=root@mail.com">发送邮件给even并抄送给root</a>

HTML 图片

显示 vuelogo 图片，alt 属性的作用是当图片因为一些原因挂掉的时候，可以显示出来进行说明。

<img src="https://vuejs.org/images/logo.png" alt="Vue.js logo">

HTML 表格

简单表格

球员	号码	身高	体重	生日	国籍	出生地
勒布朗·詹姆斯	23	2.03米/6英尺8英寸	113.4公斤	1984年12月30日	美国
凯里·欧文	2	1.91米/6英尺3英寸	88公斤/193磅	1992年3月23日	美国/澳洲	澳洲
凯文·乐福	0	2.08米/6英尺10英寸	110公斤/243磅	1988年9月7日	美国

<table>
  <thead>
    <tr>
      <th>球员</th>
      <th>号码</th>
      <th>身高</th>
      <th>体重</th>
      <th>生日</th>
      <th>国籍</th>
      <th>出生地</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>勒布朗·詹姆斯</td>
      <td>23</td>
      <td>2.03米/6英尺8英寸</td>
      <td>113.4公斤</td>
      <td>1984年12月30日</td>
      <td colspan="2">美国</td>
    </tr>
    <tr>
      <td>凯里·欧文</td>
      <td>2</td>
      <td>1.91米/6英尺3英寸</td>
      <td>88公斤/193磅</td>
      <td>1992年3月23日</td>
      <td>美国/澳洲</td>
      <td>澳洲</td>
    </tr>
    <tr>
      <td>凯文·乐福</td>
      <td>0</td>
      <td>2.08米/6英尺10英寸</td>
      <td>110公斤/243磅</td>
      <td>1988年9月7日</td>
      <td colspan="2">美国</td>
    </tr>
  </tbody>
</table>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有