HTML学习笔记01

HTML笔记01

什么是HTML

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

HTML发展史

HTML学习笔记01_第1张图片

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

HTML5的优势

  • 世界知名浏览器厂商对 HTML5 的支持
    • 微软
    • Google
    • 苹果
    • Opera
    • Mozilla
    • ……
  • 市场的需求
  • 跨平台

W3C标准

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

HTML基本结构

HTML学习笔记01_第2张图片

  • < body>< /body>等成对的标签,分别叫开放标签闭合标签
  • 单独呈现的标签(空元素),叫作自闭合标签,如
    ;意为用/来关闭空元素。

练习:第一个HTML网页

  • 下面我们来写一个HTML网页,来熟悉一下HTML的基本结构:


DOCTYPE html>


<html lang="en">


<head>
    
    
    <meta charset="UTF-8">
    <meta name="keywords" content="Clown,Java学习">
    <meta name="description" content="Clown,来这里可以学习Java">

    
    <title>我的第一个网页title>
head>


<body>
Hello,World!
body>
html>
  • 打开浏览器查看网页:

HTML学习笔记01_第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>
<p>真奇怪      真奇怪p>
<p>两只老虎     两只老虎p>
<p>跑得快        跑得快p>
<p>一只没有耳朵    一只没有尾巴p>
<p>真奇怪      真奇怪p>


<hr/>


两只老虎    两只老虎<br/>
跑得快       跑得快<br/>
一只没有耳朵     一只没有尾巴<br/>
真奇怪      真奇怪<br/>
两只老虎     两只老虎<br/>
跑得快        跑得快<br/>
一只没有耳朵    一只没有尾巴<br/>
真奇怪      真奇怪<br/>


<h1>粗体和斜体h1>

粗体: <strong>I love youstrong>
斜体: <em>I love youem>

<br/>

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

body>
html>
  • 打开浏览器查看网页:

HTML学习笔记01_第4张图片

图像标签

  • 常见的图像格式:
    • JPG
    • GIF
    • PNG
    • BMP
    • ……

HTML学习笔记01_第5张图片

  • 下面我们通过写代码的方式来学习图像标签:
  • 首先准备一张图片:

  • 然后我们编写代码:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习title>
head>
<body>

<img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">

body>
html>
  • 打开浏览器查看网页:

HTML学习笔记01_第6张图片

链接标签

HTML学习笔记01_第7张图片

  • 文本超链接
  • 图像超链接

超链接

  • 页面间链接
    • 从一个页面链接到另一个页面
  • 锚链接
  • 功能性链接
  • 下面我们通过写代码的方式来学习链接标签:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习title>
head>
<body>

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





<a href="1.我的第一个网页.html" target="_blank">点击此处跳转到我的第一个网页a>
<a href="https://www.baidu.com" target="_self">点击此处跳转到百度首页a>

<br/>


<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">
    a>
p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">
    a>
p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">
    a>
p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">
    a>
p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">
    a>
p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">
    a>
p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">
    a>
p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="星空" title="悬停文字" width="330" height="240">
    a>
p>


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

<a name="bottom">底部a>



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


<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=24736743&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="你好,加我领取红包" title="你好,加我领取红包"/>
a>

body>
html>
  • 打开浏览器查看网页:

HTML学习笔记01_第8张图片

HTML学习笔记01_第9张图片

  • 我们还可以通过锚链接实现页面间的跳转:
  • 例如:我们给图像标签学习的页面的中加入以下代码:
<a href="4.链接标签.html#bottom">点此跳转到链接标签页面的底部a>
  • 此时的图像标签学习页面:

HTML学习笔记01_第10张图片

  • 点击文字即可跳转到链接标签学习页面的底部。

行内元素和块元素

  • 块元素
    • 无论内容多少,该元素独占一行
    • ph1-h6…)
  • 行内元素
    • 内容撑开宽度,左右都是行内元素的可以在排在一行
    • astrongem…)

列表

  • 什么是列表
    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
  • 列表的分类
    • 无序列表
    • 有序列表
    • 定义列表
  • 下面我们通过写代码的方式来学习列表:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习title>
head>
<body>


<ol>
    <li>Javali>
    <li>Pythonli>
    <li>C/C++li>
    <li>C#li>
    <li>PHPli>
ol>

<hr/>


<ul>
    <li>Javali>
    <li>Pythonli>
    <li>C/C++li>
    <li>C#li>
    <li>PHPli>
ul>

<hr/>


<dl>
    <dt>学科dt>

    <dd>Javadd>
    <dd>Pythondd>
    <dd>C/C++dd>
    <dd>C#dd>
    <dd>PHPdd>

    <dt>位置dt>

    <dd>北京dd>
    <dd>上海dd>
    <dd>广州dd>
    <dd>深圳dd>
    <dd>成都dd>
dl>

body>
html>
  • 打开浏览器查看网页:

HTML学习笔记01_第11张图片

表格

  • 为什么使用表格
    • 简单通用
    • 结构稳定
  • 基本结构
    • 单元格
    • 跨行
    • 跨列
  • 下面我们通过写代码的方式来学习表格:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习title>
head>
<body>




<table border="1px">
    <tr>
        
        <td colspan="4">1-1td>
    tr>
    <tr>
        
        <td rowspan="2">2-1td>
        <td>2-2td>
        <td>2-3td>
        <td>2-4td>
    tr>
    <tr>
        <td>3-1td>
        <td>3-2td>
        <td>3-3td>
    tr>
table>

body>
html>
  • 打开浏览器查看网页:

HTML学习笔记01_第12张图片

媒体元素

  • 视频元素
    • video
  • 音频元素
    • audio
  • 下面我们通过写代码的方式来学习媒体元素:
    • 首先我们准备一个视频文件和一个音频文件:

HTML学习笔记01_第13张图片

  • 然后我们编写代码:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习title>
head>
<body>



<h3>视频h3>
<video src="../resources/video/冒泡排序演示.mp4" controls autoplay>video>


<h3>音频h3>
<audio src="../resources/audio/HappyBirthday.mp3" controls autoplay>audio>

body>
html>
  • 打开浏览器查看网页:

HTML学习笔记01_第14张图片

你可能感兴趣的:(HTML学习笔记合集,html,学习,笔记)