0基础超详细笔记 HTML第一天

魏佳伟

已于 2023-05-30 21:28:07 修改

阅读量70

点赞数

文章标签： html 前端 css

于 2023-05-29 18:09:39 首次发布

本文链接：https://blog.csdn.net/qq_54249255/article/details/130929955

版权

HTML——超文本标记语言，何为超文本？顾名思义，超越文本的语言。即，可在网页中显示除文本之外的元素，如图像，声音，链接，音乐，视频，等。标记语言，非编程语言。在浏览器中解析。

前端三要素——1.HTML 2.CSS 3.JS。也称作前端三剑客。也就是，结构，表现，行为。一一对应。简单俩说，HTML为网页骨架，CSS为网页修饰，JS用于实现网页交互。

注意：

1. 后缀名为html或者htm，为何是htm，在H5问世之前，计算机的操作系统最多可解析的文件字符长度只有三位。

2.在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白实体在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，实符字体就是以&开头的，以分号结尾的。例如 ——表示空格。后面会讲到。

代码初识。————：

基本架构分为三部分:

<!DOCTYPE html>

是标准的H5网页声明。不加该行会出现，网页元素在不同浏览器中出现不同效果。

<html lang="en">

</html>

根标签元素，一个页面中只能有一个根标签元素。也就是说，所有的代码都必须写在<html></html>中。

根元素下，一共有两对子元素，即<head></head>和<body></body>。

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

在head子元素中，主要用于设置或者导入外部文件，一般不直接显示在浏览器视口中，常用的子标签为 meta 、title、link、script，分别表示元信息设定、文档标题、css、js

第一行

 <meta charset="UTF-8">

表示网页的编码，全部用万国码UTF-8的字符编码。

第二行

<meta http-equiv="X-UA-Compatible" content="IE=edge">

content兼容性问题，是IE=edge.

第三行

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。 initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

第四行

<title>Document</title>

选项卡名称。

HTML语法

1. 注释：

快捷键：ctrl+/ 和ctrl + shift + /

2.单标签元素和多标签元素：

如<meta> <img> <br>等

如<div></div>等。

3. 属性

一般HTML中的属性有：class，id，title，style（其中title表示，鼠标移入时，显示提示文字。）

4. 实符字体。

如  < >，如下图，无需记忆，用时查询。

5.块级元素及行内元素。

作用分别为:在网页中搭建结构，在结构中填充内容

块级元素：

特点：1.独占一行。2.盒子高度由内容撑起。3.默认宽度100%，可以通过CSS来设置宽度。

如：html , body,div，h1-h6，p, ul,li, ol li , dl dt dd.header,footer,nav,article,section,aside,address

行内元素:

特点：1.与其他元素在同一行显示，2.宽高由自身决定。

如：span，a，strong,b,em,i,ins,u,del,s

6.各种标签。

h1-h6

img : 属性：src width height alt title (其中alt表示，图片加载失败时的提示文字。)

注意：1.img标签不会独占一行

2.有时设置img的宽高会使图片失真，这时只需要设置宽度或者高度中的一个，另外一个会等比例调整。一般除了自适应的页面，不建议设置width和height。

a：属性：href,target="_blank或者_self"(鼠标单机a标签，前者在新建页面弹出超链接，后者在自身页面弹出。)

注意：锚点链接，给目标设置一个id，<a href="#该id" >则会跳转到此处。

注意：H5新增：<a href="mailto:xxxxxxxxx@qq.com">打开邮箱</a>

mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息。

- base标签

base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开注意点 1.base标签必须要写在head标签之间 2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行

H5新增标签：

视频<vedio>

1.<vedio src=""></vedio>

2.<vedio>

</source>

</vedio>

↑ 为何要用第二种，英文之前的版本有兼容性问题。

属性：src，当只给video设置src时，视频只加载，但不能播放。

width和height

注意：二者只设置一个，另一个自适应。

controls：控制条。（可以播放，调节音量，等等。）

autoplay：自动播放。

loop：循环播放。

muted：静音播放。

poster=“../images/1.jpg”:播放前的图片。

音频 <audio>

属性：src，当只给audio设置src时，没东西显示。

controls 控制条。

不能设置width，和height

autoplay：自动播放。

loop：循环播放。

muted：静音播放。

poster=“../images/1.jpg”:播放前的图片。

figure&figcaption

figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

多用于用作文档中插图的图像。

details

details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。

open属性

当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元素应该被收缩起来不显示。默认值为false

summary子元素

summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。