HTML学习#1

我来读心喽

已于 2022-09-01 21:46:21 修改

阅读量171

点赞数

分类专栏： HTML 文章标签：经验分享

于 2022-09-01 21:09:22 首次发布

本文链接：https://blog.csdn.net/weixin_49191241/article/details/126648970

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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> 定义标题标题，在段落之前

我是一个段落 定义段落

没有语义，可以包含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> 块引用一个段落、多个段落、一个列表等

行内引用

<abbr> </abbr> 它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。

如下，当鼠标触碰到HTML时会弹出abbr里面title的内容

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>

和元素代表上标和下标，例如平方里面的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>

字体处理

1234 斜体1234

very 强调very

被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

tips:可以在标签里面加属性例如 abcd 这个class属性赋给了一个识别的名字

锚<a> </a>使被标签包裹的内容成为了一个超链接，可添加如下几个属性(可穿插在等之间)

·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 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 解释器会将连续出现的空白字符减少为一个单独的空格符。