自学前端day01-html5最最最基础

07.06学的,然而整理这些就弄了好久啊!还是对Markdown语法不太熟悉、

目录

总体:

HTML

1HTML简介

Web标准的三大组成部分:结构(structure)——网页元素、表现(presentation)——外观样式、行为(behavior)——交互。

Web 标准提出的最佳体验方案:结构、样式、行为相分离。

简单理解:结构写到 HTML 文件中, 表现写到 CSS 文件中, 行为写到 JavaScript 文件中。【结构最重要】

2HTML标签

1.HTML 标签是由尖括号包围的关键词,例如 。

2.HTML 标签通常是成对出现的,例如 和 ,我们称为双标签【包含关系和并列关系】。

3.签。标签对中的第一个标签是开始标签,第二个标签是结束标签。

有些特殊的标签必须是单个标签(极少情况),例如
【换行的意思】,我们称为单标签

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写

3VsCode使用

1.双击打开软件。

2. 新建文件(Ctrl + N )。

3. 保存(Ctrl + S ), 注意移动要保存为 .html 文件

4. Ctrl + 加号键 ,Ctrl + 减号键 可以放大缩小视图

5. 生成页面骨架结构。 输入! 按下 Tab 键。

链接的语法格式
    <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性:
    1.href:用于指定链接目标的url地址
    2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开
    3.#:空链接

4链接href

链接分类:
1.外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html"> 首页 </a >。
3.空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 </a > 。
4.下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接:  点我们点击链接,可以快速定位到页面中的某个位置.     

5单击跳转【主要就是a href="#two"以及后面相应的id="two"】

1.在链接文本的 href 属性中,设置属性值为 #名字 的形式,如<a> href="#two"< 第2集 > </a>

2.找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3> id="two"<第2集介绍> </h3>

6注释和特殊字符

注释:

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
HTML中的注释以“<!--”开头,以“ -->”结束。
具体实现:
     <!-- 注释语句 -->      快捷键: ctrl +  / 
一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的.
添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的

特殊字符:

在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。

重点记住:【空格  、大于号<、 小于号>】。其余的使用很少,如果需要回头查阅即可。

如何插入多行代码块:【用```包裹```】

例如:print("Hello, World!");

7综合案例:

<!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>测试1</title>
</head>
<body>
    <h1>这个是标题啦啦啦啦啦</h1>
    <h4>这儿放一个字体小点的h4~</h4>
    <p>正文在这里ing</p>
    <h4>第二个h4的小标题~</h4>
    <p>第二个段落~~~(然鹅为啥段落字体那么大呢)</p>
    <h5>作者:困困 <br />  <!-- 换行 -->
        2022.07.07</h5>

</body>
</html>

显示:

posted @ 2022-07-07 16:19  又又又困了  阅读(35)  评论(0编辑  收藏  举报