18910140161

Html

首页 >> 前端开发 >> Html

html学习笔记

顺晟科技

2022-09-15 22:24:03

194

html的学习笔记，学习使用。

HTML学习

因为学了一半，停了，所以笔记前后详细程度不同。参考课程尚硅谷、DasAutoooo

目录
  • HTML学习
    • 1.学习前准备
    • 2.HTML入门
      • 2.1什么是HTML
        • 2.1.1HTML标签
        • 2.1.2HTML元素
        • 2.1.3HTML版本
        • 2.1.4<!DOCTYPE> 声明
        • 2.1.5中文编码
      • 2.2HTML基础
        • 2.2.1HTML标题
    • 3.实体
    • 4.常用标签
      • 4.1meta标签
      • 4.2结构化语义标签
        • 4.2.1独占一行的元素称为块元素 block element。
        • 4.2.2行内元素（inline element）行内元素主要用来包裹元素。
        • 4.2.3单标签
        • 4.2.4列表
        • 4.2.5超链接
        • 4.2.6相对路径
        • 4.2.7图片标签
        • 4.2.8内联框架
        • 4.2.9音频
    • 5.结语

1.学习前准备

  • 浏览器(不要用360浏览器、2345浏览器。。。)
    • Google Chrome
    • Mozilla Firefox
    • Safari
    • Edge
  • 编辑器
    • VS Code(VS Code yyds!)
    • Sublime Text
    • Atom.io
    • webstorm

2.HTML入门

2.1什么是HTML

​ HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

​ HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。摘自百度。

2.1.1HTML标签

<标签>内容</标签>

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的。
  • 标签对中的第一个标签是开始标签(opening tag)，第二个标签是结束标签(closing tag)。

2.1.2HTML元素

<标签>内容</标签>

包含标签在内的整个内容叫做HTML元素。

2.1.3HTML版本

HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
HTML 1991

2.1.4<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

2.1.5中文编码

在浏览器中输入中文一般会出现乱码，我们需要简单处理一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

用vs code输入"!"即可自动生成模板，我们在模板中可以看到，这就是浏览器的解码方式了，我们可以用gbk或utf-8。

2.2HTML基础

2.2.1HTML标题

HTML 标题（Heading）是通过

-

标签来定义的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>head test</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

3.实体

​ html中有一些特殊符号显示不出来，比如多个空格、<>符号等。

实体符号语法：

​ &实体名字;

  • &nbsp; 空格 " "
  • &gt; 大于号 >
  • &lt; 小于号 <
  • &copy; 版权符号 ©

4.常用标签

4.1meta标签

​ 用于设置网页的元数据，不是给用户看的。

meta标签的属性有：

  • charset

    用于指定网页的字符集

  • name

    指定数据的名称

  • content

    指定数据的内容

样例：

billbill

<meta
      name="description"
      content="bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。"
    />

description是描述，搜索引擎搜索到后，会显示出来。

京东

<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

keywords是关键词，用于搜索引擎的搜索关键词

跳转

    <meta http-equiv="refresh" content="3;url = https://www.bilibili.com/">

几秒后跳转到某个网页。

4.2结构化语义标签

4.2.1独占一行的元素称为块元素 block element。

  • 在网页中一般是通过块元素对页面进行布局。
  • 块元素基本上什么都可以放。

在p标签中的内容表示一个段落。

  • p元素中不能放任何的块元素

不符合规则的源码，浏览器会自行修正。比如body外放元素、p元素中放块元素。

<header>表示网页头部</header>
<main>网页表示主体</main>  <!--一个页面只会有一个-->
<footer>表示尾部</footer>
<nav>nav表示网页中的导航</nav>
<aside>表示和主题相关的其他内容</aside>
<article>表示一个独立的文章</article>
<section>一个独立的区块</section>
<div>没有语义,就是用来表示一个区块</div>
<blockqute>长引用，块元素</blockqute>

4.2.2行内元素（inline element）行内元素主要用来包裹元素。

  • 一般情况下在块元素中房行内元素，而不会在行内元素中放块元素。
<q></q>
<!--   短引用内联元素     -->
<em></em>
<!--   语气强调     -->
<strong></strong>
<!--   加粗     -->
<span></span>
<!--   行内元素，也没有语义	-->

4.2.3单标签

<br/>换行，单标签。

<hr/>水平线，单标签。

4.2.4列表

  1. 有序列表

    ol(orderlist)标签 <ol> </ol>

    li(list item)列表项<li></li>

  2. 无序列表

    ul(unorderlist)标签 <ul> </ul>

    <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

  3. 定义列表

    dl(definition list)标签<dl></dl>

    dt表示定义的内容，dd对内容解释说明。

    <dl>
    <dt>定义的内容</dt>
	<dd>对内容进行解释说明</dd>
</dl>

    列表之间可以相互嵌套。

4.2.5超链接

a标签(锚点 anchor),行内元素

<a href=""></a>

a标签内能嵌套除自己外的任何元素，包括块元素。

target属性：用来指定超链接打开的位置

可选值

  • _self 默认值在当前页面打开超链接。

    <a href="test" target="_self"></a>

  • _blank 在一个新的页面打开超链接。

    <a href="test" target="_blank"></a>

跳转顶部

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

跳转任意位置

id属性

id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性。

<a href="#id"></a>

跳转到任意位置，以id属性为锚点。

href占位符

开发常用占位符。

<a href="#">点击会回到顶部</a>
<a href="javascript:;">点击超链接什么都不会发生</a>

4.2.6相对路径

./	当前路径
../	上一级路径

4.2.7图片标签

自结束标签,是替换元素（块元素和内行元素之间，具有两种元素的特点）。

<img src="" alt="描述"/>

alt：是图片的描述

其他属性

  • width

    图片宽度

  • height

    图片高度

只改变一个属性，另一个属性同时改变，保持比例。改变两个，才会改变比例。

图片种类

  • jpeg(jpg)

    支持的颜色丰富，不支持透明效果，不支持动图。

    一般用来显示图片。

  • gif

    支持的颜色比较少，支持简单透明，支持动图。

    颜色单一的图片，动图

  • png

    支持颜色丰富，支持复杂透明，不支持动图。

    颜色丰富，复杂透明图片（专为网页而生）

  • webp

    谷歌专门推出的网页中的图片的一种格式。

    有以上所有的优点。

    但兼容性不好。

  • base64

    将图片使用base64编码，这样可以将图片转化为字符，通过字符的形式引入图片。

    一般是一些需要和网页一起加载的图片才会使用base64。

效果一样的，用小的。

效果不一样的，用效果好的。

4.2.8内联框架

用于向当前页面中引入一个其他页面。

<iframe src="https://www.qq.com" frameborder="" ></iframe>>

src指定要引入网页的路径。

frameborder 指定内联框架的边框 。

0表示没有边框 1表示有。

4.2.9音频

audio标签，用来向页面中引入一个外部的音频文件。

音视频文件引入时，默认情况下不允许用户控制播放、停止。

属性：

  • controls

    是否允许用户控制播放。controls没有值，存在即为允许控制。

  • autoplay

    音频是否自动播放。

    如果设置了autoplay，则音乐在打开页面时自动播放，但目前大部分浏览器都不会对音乐自动播放。

  • loop

    循环播发。

写法一

<audio src="" controls></audio>

写法二

可以处理不支持audio的浏览器报错。

<audio controls>
    对不起，版本太旧，不支持  <!--用于处理版本太低，提示报错信息。-->
	<source src="xxx"> 
    <embed src="xxx" type="xxx"> <!--有这句，就没有兼容问题了-->
</audio>

5.结语

完结撒花★,°:.☆(￣▽￣)/$:.°★ 。，小米的企业实践要开始写项目了，吓得我赶紧补完html，明天学css。

上一篇：HTML中多种空格转义字符 下一篇：HTML5 十大新特性(一)——语义
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！