HTML基础知识小结 - PHP学习

Home > List of blog posts > HTML基础知识小结

Blogger Information

Blog 6

fans 0

comment 0

visits 6294

Special Recommendation

More>

Related recommendations

1.HTML文档结构

HTML文档是一个倒置的”树型”结构，基本结构如下：

<!-- 告诉浏览器这是一个HTML文件 -->
<!DOCTYPE html>
<!-- html 根标签、元素，代表整个HTML文档 -->
<!-- lang = "en" 是一个属性，表示当前页面的主要语言 -->
<html lang="en">
  <!-- 头元素 内容不显示在当前页面，这是给浏览器或者搜索引擎（百度，谷歌等）使用-->
  <head>
    <!-- 字符编码集为 UTF-8 -->
    <meta charset="UTF-8" />
    <!-- viewport 字面意思 视口，当前文档在浏览器可以被用户看到的部分，通常小于文档， -->
    <!-- 当前视口大小为设备宽度，初始显示大小比例为：1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML文档的结构</title>
  </head>
  <!-- 主元素 页面主体，这是用户真正看到的 -->
  <body>
    <!-- 标题 -->
    <h2>正在学习html基础知识</h2>
    <!-- HTML标签不区分大小写  建议所有标签全部小写 -->
  </body>
</html>

2.元素与属性的关系

元素是由双标签描述，标签是由属性表示，属性通常是以名值对的形式出现，如 name="test"。标签的通用三大属性：class、id、style,id在html里一般不常用，具有唯一性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素与属性的关系</title>
  </head>
  <!-- 当前文档的样式，只在当前文档有效 -->
  <style>
    p {
      color: green;
    }
  </style>
  <body>
    <!-- 元素：由双标签描述 标签 由属性表示 属性通常是以名值对的形式出现 -->
    <!-- 段落元素： 用`<p></p>`描述 -->
    标签有默认样式，当前文档样式，内联样式
    <!-- style 这个属性是内联样式，只在当前标签生效 -->
    <p style="color: red;" name="p1">正在学习html元素和标签的关系</p>
    <p class="test">正在学习html元素和标签的关系</p>
    <p id="study">正在学习html元素和标签的关系</p>
    <!-- 标签的三大通用属性 style、id、class -->
  </body>
</html>

3.语义化的结构元素

语义元素清楚地向浏览器和开发者描述其意义。语义化的结构元素，基本包括页眉，页脚，主体，大致如下：

<!-- 页眉 -->
<header></header>
<!-- 主体  -->
<main></main>
<!-- 页脚 -->
<footer></footer>

4.语义化的文本元素

语义化文本元素，都有自身的意义，从字面上是输出文本类型的元素。如<article>标签，用来输出文章，<address>标签用来输出地址

<!DOCTYPE html>
<!-- nav 定义导航链接集合 -->
<nav>
<a href="">导航01</a>
<a href="">导航02</a>
<a href="">导航03</a>
<a href="">导航04</a>
<a href="">导航05</a>
</nav>
<!-- section 定义文档中的部分 -->
<section>推荐</section>
<!-- article 独立于网站其他内容进行阅读 -->
<article>内容</article>
 <!-- detailss输出详细内容   mark 对关键词做标记 -->
<details> 详细<mark>内容</mark> </details>
<!-- address 输出一个地址格式 -->
<address>地址</address>
<!-- progress 输出一个进度条 -->
<progress value="80" max="100">80%</progress>

5.链接元素

链接元素可以通过使用 href 属性 - 创建指向另一个文档的链接,使用 Target 属性，可以定义被链接的文档在何处显示,链接元素还可以实现打电话，下载文件，发送邮件，和站内跳转等功能

<!-- 从当前页面 链接跳转一个外部链接 跨域 -->
<a href="www.baidu.com">百度</a>
<!-- 从新窗口打开一个链接 -->
<a href="php.cn" target="_blank">PHP中文网</a>
<!-- 下载某一个文件 -->
<a href="demo.md" download="demo.md">下载文档</a>
<!-- 打电话 -->
<a href="tel:188****4135">致电</a>
<!-- 发邮件 -->
<a href="mailto:39529**60@qq.com">给xx发邮件</a>
<!-- 在当前页面跳转 -->
<a href="#another">找到锚点</a>
<h2 id="another" style="margin-top: 1000px;">这是一个大标题</h2>
<a href="#">回到顶部</a>

6.列表元素

列表分为无序列表，有序列表和自定义列表

<!-- 无序列表 -->
<ul>
  <li>香蕉</li>
  <li>苹果</li>
  <li>梨</li>
  <li>西瓜</li>
  <li>哈密瓜</li>
</ul>
<!-- 分页功能显示 -->
<ul style="list-style: none;">
  <li>
    <a href="">首页</a>
    <a href="">上一页</a>
    <a href="">下一页</a>
  </li>
</ul>
<!-- 有序列表 -->
<ol start="3">
  <!-- <li>起床</li> -->
  <!-- <li>洗漱</li> -->
  <li>
    上课
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>PHP</li>
    </ul>
  </li>
  <li>下课</li>
</ol>
<!-- 自定义列表   -->
<dl>
  <!-- 自定义标题 -->
  <dt>手机</dt>
  <!-- 内容 -->
  <dd>打电话</dd>
  <dd>发短信</dd>
  <!-- 标题 -->
  <dt>电脑</dt>
  <!-- 内容 -->
  <dd>上网</dd>
  <dd>看电影</dd>
  <dd>上课</dd>
</dl>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：非常棒

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML基础知识小结

2020-07-27 15:42:35