小菜学前端day01（学习笔记）

潇潇楠

已于 2022-07-17 23:02:27 修改

阅读量250

点赞数

分类专栏：前端学习基础篇文章标签：前端学习 html

于 2022-07-17 22:59:05 首次发布

本文链接：https://blog.csdn.net/m0_48500172/article/details/125828227

版权

前端学习基础篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

万维网联盟（W3C）

W3C:制定网页的开发标准。是同一个网页在不同的浏览器中有相同的效果。（编写的网页都需要遵守W3C的规范）
HTML:用于描述页面的结构。
CSS:用于控制页面中的样式。
JavaScript:用于响应用户操作。
一个网页主要由三部分组成：结构，表现，行为。

HTML(Hypertext Markup Language) 超文本标记语言

HTML使用标签的的形式来标识网页中的不同组成部分。超文本指的是超链接,使用超链接可以从一个页面跳转到另一个页面。
代码结构：

<!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>
		<h1>hello</h1>   
</body>
</html>

head：头部
title：标题
body:主体
meta：主要用于设置网页中的一些元数据。
charset：指定网页的字符集
name：指定的数据的名称
content：指定的数据的内容
keyword:网站关键字，可以同时指定多个关键字，关键字之间可以用“，”隔开

<meta name="keywords" content="淘宝,掏宝,网上购物,C2C,在线交易,网络购物,打折,免费开店,网购,频道,店铺">

将页面重定向到另一个网站：（3秒后跳转到百度）

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

布局标签(结构化语义标签)：

<!--header表示网页的头部
main表示网页的主体部分(一个页面中只会有一个main)
footer表示网页的底部nav表示网页中的导航
aside 和主体相关的其他内容(例边栏)
article表示一个独立的文章
section表示一个独立的区块,上边的标签都不能表示时使用section
div没有语义,就用来表示一个区块,div是主要的布局元素
span行内元素,没有任何的语义,一般用于在网页中选中文字-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>

标签：

 <!-- hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup -->
<hgroup>
    <h1>静夜思</h1>
    <h2>李白</h2>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</hgroup>
    <!--p标签表示页面中的一个段落p也是一个块元素  -->
    <p>在p标签中的内容就表示一个段落</p>
    <p>在p标签中的内容就表示一个段落</p>
    <!-- em标签用于表示语音语调的一个加重 -->
    <p>今天天气<em>真</em>好! </p>
    <!-- strong表示强调重要内容  -->
    <p>你今天不能再<strong>摆烂</strong>了! </p>
    子曰：<!-- blockquote 表示一个长引用-->
        <blockquote>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</blockquote>
    <!-- q表示一个短引用-->
    子曰:<q>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</q>
    <!-- br 表示换行 -->
    <br>
    <br>
    hello!

在这里插入图片描述

超链接标签：

<!-- target属性,用来指定超链接打开的位置
可选值:self 默认值 在当前页面中打开超链接
      _blank在一个新的要么中打开超链接 -->
<a href="http://www.baidu.com" target="_blank">超链接</a>
<p>可以直接将超链接的href属性设置为“#”,点击超链接后页面不会发生跳转,而是转到当前页面的顶部位置</p>
<a href="#">回到顶部</a>
<!--可以跳转到页面的指定位置,只需将href属性设置目标元素的id属性值
id属性(唯一不重复的)
	每一个标签都可以添加一个id属性
	id属性就是元素的唯一标识,同一个页面中不能出现重复的id属性-->
    <a href="#bottom">到底部</a>
    <a id="bottom" href="#">回到顶部</a>
<!--可以使用 javascript:;来作为href的属性,此时点击这个超链接什么也不会发生-->
    <a href="javascript:;">这是一个新的超链接</a>

知识补充：
1.字符编码：
编码：将字符转换为二进制码的过程称为编码。
解码：将二进制码转换为字符的过程称为解码。
菜菜捞捞—>1010001111000011(编码)
1010001111000011—>菜菜捞捞(解码)
2.如果需要在网页中书写特殊的符号，需要使用html中的实体（转义字符）
实体的语法：&实体名称；
例如：&nbsp；（空格） &gt；(大于号）&lt；(小于号) &copy；（版权符号）等。