2022.9.1
HTML文档实例
<!DOCTYPE html>
<html lang="zh-CN"> <!-- 声明这是中文-->
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<p>我的界面</p>
</body>
</html>
·DOCTYPE html 声明文档类型
·html 这个元素包裹了整个html文档
HEAD
·head 它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容,这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。
·<meta charset = "utf-8"> 标记编码(写在head里),
·通常meta包含name,content元素,content为name描述的具体值,例如
<meta name="Keywords" content="我的代码">但是keywords已经被弃用了
name元素包含:Keywords 告诉搜索引擎关键词
Description用来告诉搜索引擎你的网页主要内容。
Robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。Content的 参数有all、none、index、noindex、follow、nofollow。默认是all。(去百度)
Author (作者),Copyright (版权),Generator (编辑器),revisit-after (重访)
·title 页面标题
·link rel代表样式,href代表路径,通常用于css特效
<link rel="icon" href="favicon.ico" type="image/x-icon" sizes=16*16>
为网站添加自定义图标,图片可以为gif,png等等,type代表接受image和icon
href代表路径
·script脚本 src代表路径,通常用于交互(js)
<script src="my-js-file.js" defer></script>
·body 包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。
·<!--注释-->
一些标签
<h1> </h1> 定义标题标题,在段落之前
<p>我是一个段落</p> 定义段落
<span></span>没有语义,可以包含css,script
<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗?</span>
<ul> </ul> 这是一个无序列表,里面的元素可以用<li>单独包裹起来,如果加了<li>就会在每个元素之前加上 · 这一个点 列表可嵌套
<ul>
<li>豆浆</li>
<li>油条</li>
<li>豆汁</li>
<li>焦圈</li>
</ul>
<ol> </ol> 有序表,加了<li>之后每个元素前面会加上对应数字
<ol>
<li>沿着条路走到头</li>
<li>右转</li>
<li>直行穿过第一个十字路口</li>
<li>在第三个十字路口处左转</li>
<li>继续走 300 米,学校就在你的右手边</li>
</ol>
<dl> </dl> 描述列表,每一项都用 <dt> 元素闭合。每个描述都用 <dd> 元素闭合。在dd与dt之间会自动产生缩进
<dl>
<dt>内心独白</dt>
<dd>戏剧中,某个角色对自己的内心活动或感受进行念白表演,这些台词只面向观众,而其他角色不会听到。</dd>
<dt>语言独白</dt>
<dd>戏剧中,某个角色把自己的想法直接进行念白表演,观众和其他角色都可以听到。</dd>
<dt>旁白</dt>
<dd>戏剧中,为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白,只面向观众,内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>
<blockquote cite = "url地址"> </blockquote> 块引用一个段落、多个段落、一个列表等
<p cite= " "> </p> 行内引用
<abbr> </abbr> 它常被用来包裹一个缩略语或缩写,并且提供缩写的解释(包含在title属性中)。
如下,当鼠标触碰到HTML时会弹出abbr里面title的内容
<p>我们使用 <abbr title="超文本标记语言(Hyper text Markup Language)">HTML</abbr> 来组织网页文档。</p>
<sup> 和<sub>元素 代表上标和下标,例如平方里面的2就属于上标,化学式的数字就属于下标
<time> </time> 用于标记时间
<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间,小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 调用特定的周 -->
<time datetime="2016-W04">The fourth week of 2016</time>
字体处理
<em> 1234 </em> 斜体1234
<strong> very <strong> 强调very
- <i> 被用来传达传统上用斜体表达的意义:外国文字,分类名称,技术术语,一种思想……
- <b> 被用来传达传统上用粗体表达的意义:关键字,产品名称,引导句……
- <u> 被用来传达传统上用下划线表达的意义:专有名词,拼写错误……
tips:可以在标签里面加属性 例如<p class="note"> abcd </p> 这个class属性赋给了一个识别的名字
锚<a> </a>使被标签包裹的内容成为了一个超链接,可添加如下几个属性(可穿插在<p>等之间)
·herf 一个超链接地址,代表点击这个位置进入一个地址
·title 标签为超链接添加额外的title信息,当鼠标触到超链接时会提示title的信息
·target 指定链接显示方式 例如 target="_blank" 将新建一个网页,默认为在当前网页显示
超链接除了可以链接到文档外,也可以链接到 HTML 文档的特定部分(被称为文档片段)。用#引用这个链接
·download 给下载文件起一个名字
<h2 id="Mailing_address">邮寄地址</h2>
<p>要提供意见和建议,请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>
<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的超链接。
<a href="https://www.mozilla.org/zh-CN/">
<img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>
<!--这种方式是把图片创建成一个超链接,href也可以指向文件路径,默认为当前目录,用两个点..来代表上一目录-->
</p>
空元素(只有一个标签)
<img src = "文件位置"> 在这里输入一个img
<link href="地址" rel="stylesheet"> 外部资源链接元素
<link rel="icon" href="favicon.ico">
<link href="main.css" rel="stylesheet">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-icon-114.png" type="image/png">
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
·tips:无论你在 HTML 元素的内容中使用多少空格 (包括空白字符,包括换行),当渲染这些代码的时候,HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。