HTML学习笔记（一）

2021/5/24 18:27:31

编程Tag： 属性 标签 浏览器 网页 使用 html 笔记 学习

本文主要是介绍HTML学习笔记（一），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML学习笔记（一）

  • 前言
    • 开发模式
  • HTML入门
    • 一、概述
    • 二、HTML骨架格式
    • 三.标签
      • 1.概述
      • 2.head标签
    • 四.标签学习
      • 1.排版标签
      • 2.文本格式化标签（熟记）
      • 3.标签属性
      • 4.图像标签``（重点）

前言

开发模式

在软件的使用过程中，有两种方式：

  • C/S结构：Client/Server，通过安装的程序的客户端，将数据发送给服务端，服务端会响应相应的行为。（QQ/LOL）
    • 前文的登录操作，使用就是Swing/SWT/RCP
  • B/S结构：Browser/Server，通过浏览器的客户端，不需要安装程序，只是需要通过访问某个地址，就可以使用响应的程序，发送信息给服务端，服务端会响应相应的行为。（WebQQ/微信）

浏览器（显示内容）

世界主流的浏览器有哪些：谷歌浏览器（Chrome-必须安装）、IE、Safari、Firefox、Opera、Edge浏览器

前端开发工具

DreamWare、WebStrom、HBuilder、Visual Studio Code、记事本

HTML入门

一、概述

HTML是一种描述网页的语言，称为超文本标记语言，（注意：它不是编程语言），所谓标记语言就是提供了一套标记标签（知道这些标签的作用）。HTML就是使用标记标签来描述网页

运行环境：在浏览器中解释执行

标签：由尖括号括起来的关键词，HTML预先已经定义好了一些我们可以使用的标签。

<元素名称开始> 显示的“元素”内容-对标签 </元素名称结束>
<元素名称/> 单标签

网页：网页是网站的构成的基本元素，一个网站是由一个或者多个网页组成，网页其实就是一个文件（超文本标记语言格式），该文件的后缀名：html/htm

  • 静态网页：网站内容是预先定义好的，每个看到的网页的内容都是一样
  • 动态网页：取决于用户提供的参数，例如：每个人看到的购买网站的内容都是不一样

标签的演示案例

<h1>HTML预先定义好的标签，有预先设计好的显示样式</h1>
<yf06>符合标签的定义格式，浏览器能识别了该标签，但是没有预先设置的显示样式，那么就是显示默认样式</yf06>

WEB浏览器的作用，读取HTML文件（识别），并且以网页的形式显示出它们的内容。浏览器不会显示HTML的标签，而是通过使用标签来解释页面的内容

二、HTML骨架格式

<!DOCTYPE> <!-- HTML注释：定义HTML文档类型 -->
<html> <!-- HTML文件的根标签 -->
    <head> <!-- HTML文件头部信息 -->
        <title>网页的标题</title>
    </head>
    <body>
        <h1>网页显示的内容</h1>
    </body>
</html>

三.标签

1.概述

HTML标签：作用所有HTML中标签的根节点，一个页面中应该只有一个，最大标签

HEAD标签：文档头部标签，可以描述文档中属性、信息（标题等）

BOYD标签：文档主体，90%以上的标签都是写在body中的

（1）标签的分类

HTML文件是由很多的标签组成， 分为单标签和对标签

<元素名称开始> 显示的“元素”内容-对标签 </元素名称结束> ：<h1> 内容 </h1>
<元素名称/> 单标签 : <br/>换行

（2）标签关系

  • 嵌套关系（父子关系）
<body>
    <h1>网页
        <yf06>显示的</yf06>内容
    </h1>
</body>
  • 并列关系（兄弟关系）
<head></head>
<body></body>

（3）标签属性

属性类似于特性，例如手机的颜色、尺寸、重量等等都是手机属性。标签也有属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示</title>
    <!--  引入的logo图片 -->
    <link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<p align="center" title="叶凡">
    遮天
</p>
<p align='right' title='苏铭'>
    求魔
</p>
<p align="left">
    诛仙
</p>
</body>
</html>

在这里插入图片描述

  1. 一个标签可以拥有多个属性，必须写在开始标签中，位于元素名称的后面。
  2. 属性之间不区分前后顺序，标签名与属性、属性与属性之间使用至少一个空格分开
  3. 任何标签的属性有默认值，省略该属性，那么就是使用系统预先定义好的默认值。
  4. 采用键值对的格式KEY=VALUE,等号两端不要使用空格

2.head标签

<!DOCTYPE> <!-- HTML注释：定义HTML文档类型 -->
<html> <!-- HTML文件的根标签 -->
    <head> <!-- HTML文件头部信息 -->
        <meta charset="utf-8"><!--  meta 提供网页的页面元信息，设置网页的编码格式 -->
        <title>网页的标题</title><!-- 设置网页的标题 -->
        <!-- 引入外部样式 -->
        <link rel="stylesheet" type="text/css" href="style.css"><!-- 定义文档与外部资源的关系，最常见引用CSS -->
        <!--  引入的logo图片 -->
        <link rel="icon" type="image/x-icon" href="logo.jpg">
        <!-- 设置内部样式 -->
        <style type="text/css">
        </style>
        <!-- 引入脚本文件,个人不推荐使用 -->
        <script type="text/javascript" src="demo.js"></script>
    </head>
    <body>
        <h1>网页显示的内容</h1>
    </body>
</html>

四.标签学习

学习的标签都是写在body网页内容中的标签

1.排版标签

  • （1）标题标签（熟记）
<!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>
        <h7>西游记</h7>
        <h8>西游记</h8>
    </body>
</html>

页面当中经常使用到标题标签，HTML一共提供了6个等级标题标签，文字加粗并且换行，依照重要性字体大小递减。

面试考试的知识点：h1标签的使用，必须要慎重，h1标签尽量少用，一般情况下h1标签都是给logo使用，页面上不要动不动出现h1标签

  • （2）段落标签（熟记）：

单词缩写=>paragraph，<p></p>

  • （3）水平标签（了解）：

<hr/> 单标签

案例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>标题</h1>
        <p>2021-04-18 09:35:14　来源: 广播站</p>
        <hr/>
        <p>123</p>
        <p>456</p>
    </body>
</html>

上述案例，当浏览器进行标签解释执行的时候，就能知道哪个是标题、哪个是段落，有助于浏览器对代码的识别性比较好，让整个网页的内容有“语义”

对比代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="font-size: 20px;font-weight: bold;">标题</div>
        <span>2020-04-18 09:35:14　来源: 广播站</span>
        <hr/>
        <div>jqk</div>
        <div>123</div>
    </body>
</html>
  • （4）<div></div> <span></span>标签（重点）

这两个标签是没有任何语义的，是我们网页的布局主要使用的标签（css+div）

2.文本格式化标签（熟记）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本格式化标签</title>
    </head>
    <body>
        <b>遮天：加粗</b><br/>
        <strong>叶凡：加粗：重中之重</strong><br/>
        <hr/>
        <i>医生：斜体</i><br/>
        <em>天使：斜体：重要</em>
        <hr/>
        <del>神墓：删除线</del><br/>
        <del>39.00元</del>现在<strong>28.00元</strong>
        <hr/>
        <u>东皇:下划线</u><br/>
        <ins>东皇:下划线</ins>
        <hr/>
        <span>H<sub>2</sub>O<sup>2</sup></span>
        <hr/>
        <span>归墟<small>归墟</small><big>归墟</big></span>
    </body>
</html>

在这里插入图片描述

3.标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示</title>
    <!--  引入的logo图片 -->
    <link rel="icon" type="image/x-icon" href="love.jpg">
</head>
<body>
<p align="center" title="叶凡">
    遮天
</p>
<p align='right' title='苏铭'>
    求魔
</p>
<p align="left">
    诛仙
</p>
</body>
</html>
  1. 一个标签可以拥有多个属性，必须写在开始标签中，位于元素名称的后面。
  2. 属性之间不区分前后顺序，标签名与属性、属性与属性之间使用至少一个空格分开
  3. 任何标签的属性有默认值，省略该属性，那么就是使用系统预先定义好的默认值。
  4. 采用键值对的格式KEY=VALUE,等号两端不要使用空格

​学习CSS样式，属性尽量不要使用关于样式的属性

4.图像标签<img>（重点）

在这里插入图片描述
图片路径问题：

  1. 绝对路径

    • <img src="E:\图片\壁纸\01.jpg" width="600px" title="好漂亮" border="3">：不能用服务器的方式打开（图片无法显示）

    • <img src="网页中复制图片地址">：实际开发使用这种带协议的绝对路径

  2. 相对路径
    • 同层直接写地址
    • 若图片不在同层，<img src="../images/author.jpg">先返回上一层


这篇关于HTML学习笔记（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程