其他分享
首页 > 其他分享> > html学习笔记

html学习笔记

作者:互联网

HTML学习

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

目录

1.学习前准备

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)。

2.1.2HTML元素

<标签>内容</标签>

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

2.1.3HTML版本

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

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中有一些特殊符号显示不出来,比如多个空格、<>符号等。

实体符号语法:

​ &实体名字;

4.常用标签

4.1meta标签

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

meta标签的属性有:

样例:

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标签中的内容表示一个段落。

不符合规则的源码,浏览器会自行修正。比如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属性:用来指定超链接打开的位置

可选值

跳转顶部

<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:是图片的描述

其他属性

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

图片种类

效果一样的,用小的。

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

4.2.8内联框架

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

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

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

frameborder 指定内联框架的边框 。

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

4.2.9音频

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

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

属性:

写法一

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

写法二

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

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

5.结语

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

标签:网页,HTML,4.2,标签,元素,笔记,学习,html,2.1
来源: https://www.cnblogs.com/bloodyCrown/p/16444752.html