【HTML】-- 01 初识HTML

HTML

1.初识HTML

Hyper Text Markup Language:超文本标记语言

1.1 W3C标准

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

1.2 HTML基本结构

【HTML】-- 01 初识HTML_第1张图片

如上所示,、等成对的标签,分别叫开放标签闭合标签。单独呈现的标签(空元素)如


,意为用/来关闭空元素

1.3 网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签title>
head>
<body>


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


<p>跑得快    跑得快p>
<p>真奇怪    真奇怪p>
<p>一只没有耳朵    一只没有耳朵p>


<hr/>


跑得快    跑得快<br/>
真奇怪    真奇怪<br/>
一只没有耳朵    一只没有耳朵<br/>


<h1>字体样式标签h1>
粗体:<strong>i love youstrong><br/>
斜体:<em>i love youem><br/>


空    格:空        <br/>
大于号:><br/>
小于号:<<br/>
版权号:©版权所有duo<br/>



body>
html>

特殊符号预览:

【HTML】-- 01 初识HTML_第2张图片

1.4 图像标签

  • 常见的图像格式

    • JPG
    • GIF
    • PNG
    • BMP
  • <img src="path" alt="text" title="text" width="x" height="y"/>
    
    

1.5 链接标签

  • 文本超链接

  • 图像超链接

  • <a href="path" target="目标窗口位置">链接文本或图像a>
    
    

超链接:页面间链接(从一个页面链接到另一个页面)、锚链接、功能性链接

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签title>
head>
<body>

<a id="top">顶部a><br/>


<a href="3.图像标签.html" target="_blank">
    点击图片确认跳转 <br/>
    <img src="../resources/image/fire.jpg" alt="我的头像" title="fire">
a><br/>
<a href="https://www.baidu.com" target="_blank">百度一下,你就知道a>

<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire">p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire">p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire">p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire">p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire">p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire">p>




<a href="mailto:[email protected]">点击联系我a>

<a href="#top">回到顶部a><br/>
<a id="bottom">底部a>

body>
html>

上述代码显示网页如下:

【HTML】-- 01 初识HTML_第3张图片

【HTML】-- 01 初识HTML_第4张图片

此外,还可以通过在href属性中添加#直接跳转至页面中的锚处:

<a href="4.链接标签.html#bottom"><br/>点击跳转a>

你可能感兴趣的:(html,前端)