当前位置：主页 > 查看内容

HTML5基础

发布时间：2021-05-25 00:00| 有 位朋友查看

简介：HTML 什么是HTML HTML Hyper Text Markup Language(超文本标记语言) HTML发展史 HTML 5提供了一些新的元素和一些有趣的新符性同时也建立了一些新的规则这些元素、特性和规则的尖子提供了许多新的网页功能如使用网页实现动态渲染图形、图表、图像、和动画以及……

HTML

什么是HTML

  1. HTML
    • Hyper Text Markup Language(超文本标记语言)

HTML发展史

在这里插入图片描述

HTML 5，提供了一些新的元素和一些有趣的新符性，同时也建立了一些新的规则，这些元素、特性和规则的尖子，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像、和动画，以及不需要安装任何插件直接使用网页播放视频等。

W3C标准

  1. W3C
    • World Wide Web Consortum (万维网联盟)
    • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
    • http://www.w3.org/
    • http://www.chinaw3c.org/
  2. W3C标准包括
    • 结构化标准语言（HTML、XML）
    • 表现标准语言（CSS）
    • 行为标准（DOM、ECMAScript）

HTML基本结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    //网页头部
<body>

</body>
    //主体部分
</html>
、等成对的标签，分别叫开放标签和闭合标签单独呈现的标签（空元素），如
; 意为用/来关闭空元素

网页基本信息

DOCTYPE声明

标签 标签

网页基本标签

  1. 标题标签

    <h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

  2. 段落标签

    <p>由于第一次安装这个环境，</p>
<p>扯了挺久了，弄好了，高进记录一下，避免以后还需要</p>
<p>下面链接是npm官方的安装</p>
<p>https://www.npmjs.com/package/windows-build-tools</p>

  3. 换行标签

    <br>

  4. 水平线标签

    <hr>

  5. 字体样式标签

    粗体：<strong>i love you</strong>
斜体：<em>i love you</em>

  6. 注释和特殊符号

    注释<!-- -->
空格
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
大于&gt;
<br>
小于&lt;
&copy;版权所有

图像标签

常见的图像格式

  • JPG
  • GIF
  • PNG
  • BMP
<img src="path" alt="text" title="text" width="x" height="y"
  • src:图像地址 alt：图像的替代文字 title:鼠标悬停提示文字 width:图像宽度 height:图像高度

链接标签

<a href="path"target="目标窗口位置">链接文本或图像</a>
  • href="path"链接路径 target链接在哪个窗口打开 常用之：_self\blank

  1. 文本超链接

  2. 图像超链接

  3. 超链接

    • 页面间链接

    • 从一个页面链接到另一个页面

  4. 锚链接

    <a name="top">顶部</a>

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

  5. 功能性链接

    <!--功能性链接
邮件链接：mailto
-->
<a href="mailto:2820678041@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52"
         alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</body>

行内元素和快元素

  1. 块元素
    • 无论内容多少，该元素独占一行
    • (p、h1-h6)
  2. 行内元素
    • 内容撑开宽度，左右都是行内元素的可以在排在一行
    • (a.strong.em)

列表

  1. 什么是列表

    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息

  2. 列表的分类

    • 无序列表

    • <!--无序列表-->
<ul>
    <li>java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

    • 有序列表

    • <!--有序列表
应用范围：试卷，问卷....
-->
<ol>
    <li>java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

    • 自定义列表

    • <!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
公司网站底部
-->
<dl>
    <dt>学科</dt>

    <dt>Java</dt>
    <dt>Python</dt>
    <dt>Linux</dt>
    <dt>C</dt>

    <dt>位置</dt>

    <dt>河北</dt>
    <dt>河南</dt>
    <dt>山西</dt>

</dl>

表格

  1. 为什么使用表格

    • 简单通用
    • 结构稳定

  2. 基本结构

    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
    <!--表格table
行  tr  rows
列  td
-->
<table border="1">
    <tr>
       <!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--colspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

页面结构分析

元素名描述
header标题头部区域的内容（用于叶敏或页面重点一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容
；原文链接：https://blog.csdn.net/zq140311/article/details/115558622
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：windows 中 \r\n 区别于 类unix中的\n 疑问说明 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐