HTML和css学习

嘻嘻嘻982

已于 2022-07-06 21:09:22 修改

阅读量162

点赞数

分类专栏：笔记文章标签： html css 学习

于 2022-06-20 19:59:08 首次发布

本文链接：https://blog.csdn.net/weixin_63049424/article/details/125379419

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

尚硅谷学习

引入:

前端开发简单介绍，实际就是开发软件

软件分类：系统软件（windows,Linux,masOS），应用软件，游戏软件

而软件一般由两部分组成：客户端（用户通过客户端来使用软件）和服务器（负责在远程处理业务逻辑）

服务器开发的语言：Java,PHP,C#,Python,Node.js（标注为前端所必需的）

客户端形式

文字客户端：古老方式，通过命令行来使用软件
图形客户端：通过点击拖动等等来使用软件
网页：通过访问网页来使用软件

【B/S架构】网页的特点（相较于传统图形化界面，网页具有的优点）：

1.无需安装

2.无需更新

3.跨平台

网页中使用的语言：

语言难度

HTML ＊

CSS ＊＊

JavaScript ＊＊＊＊

前端主要开发B/S，这儿的B指的是网页

网页简史蒂姆.伯纳斯.李爵士，

万维网的发明人开发世界第一个网站 http://info.cern.ch/hypertext/WWW/TheProject.html

浏览器和网页：

有了浏览器，只需要一个网址可访问任何网站，浏览器中显示的内容即为网页，网页所呈现的样子实际为浏览器所渲染的样子前端工程师负责编写网页的源代码，而浏览器则负责讲网页渲染成我们想要的样子W3C（万维网联盟）的建立

制定网页开发标准网页结构依靠W3C标准分为三部分

结构	表现	行为
HTML（用于描述页面结构）	CSS（用于控制页面中元素形式）	JavaScript（用于响应用户操作）

HTML的学习笔记

HTML,是超文本标记语言负责网页三要素中的结构,

使用便签的形式来标识网页中的不同组成部分；

所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面（windows里的记事本是纯文本编译器，这种文本编译器只能存储数据，输入文字，不能存储动画，改变颜色，视频等等）我们所写的代码一定是纯文本的，编写第一个初简单网页打开记事本，输入你想的东西最后在文本编译器敲,

contrl＋s文件名：index.html （格式：xxx.html）

（学习html，实际是学习各种便签）

安装notepad＋＋（学习辅助软件）

网页结构

〈html〉

〈head〉

〈title〉

.........

〈/title〉

〈/head〉（头便签）

   〈body〉

〈h1〉〈/h1〉

〈h2〉〈/h2〉

       〈p〉〈/p〉

〈/body〉

〈/html〉 （根便签）

网页的基本结构

<!--文档声明，声明当前网页版本-->

<!doctype html><!Doctype html>

<!--根便签（元素），网页中的所有内容的要写根元素的里面-->

<html>

<!--head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->

      <head>

 <!--meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题-->

      <meta charset="UTF-8">

<!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->

 <title>网页的标题</title>

      </head>

<!--是html的子元素，表示网页的主题，网页中所有的可见内容都应该写在body里>>

<body>

      <!--h1网页的一级标题-->



          <h1>网页的1标题</h1>



          <h2>网页的2标题</h2>



          <h3>网页的3标题</h3>



          <h4>网页的4标题</h4>





  </body>

</html>

便签的构成形式：

<便签名>……</便签名>

自结束便签

创建第一个网页便签一般成对出现，也存在一些自结束便签只有开始便签，没有结束便签，叫做自结束标签：

〈img〉，〈input〉（也可以以〈img〉〈img/〉这种形式出现）

以下两个标签为自结束标签（两种写法）

     <img>

      <imput>

      <img></img>

      <imput></imput>

注释便签

注释内容会被浏览器忽略，不会在网页中直接显示，但可在源码中查看注释，注释用来对代码进行解释说明，开发中一定要养成良好的编写注释的习惯，要求简单明了，注释还可以将一些不希望显示的内容隐藏，注释不能嵌套！！

<!--在此处写注释-->

属性

在标签中（开始标签或自结束标签）还可以设置属性

属性是一个名值对（x=y）

属性和标签名或其他属性应该使用空格隔开

属性不能瞎写，应该根据文档中的规定来编写

有些属性有属性值，有些没有，如果有属性值应该用引号隔开

例如：

<h1>这是我<font color="red">第三个</font>网页！</h1>

<h2>这是我<font color="red" size='7'>第三个</font>网页！</h2>

文档声明

文档声明（doctype），声明当前网页的版本

 <!doctype html5><!Doctype HTML>

-文档声明用来告诉浏览器当前网页的版本

-html5的文档声明

迭代

网页的版本： HTML4，XHTML2.0，HTML5 ...

进制：

1. 十进制（日常使用）

-特点：满10进1

-计数：0 1 2 3 4 5 6 7 8 9 10 11 12.。。。

-单位数字：10个（0~9）

2. 二进制（计算机底层的进制）

-特点：满2进1

-计数：0 1 10 11 100 101 111.。

-单位数字：2个（0~1）

-扩展：

-所有数据在计算机底层都会以二进制的形式保存

-可以将内存想象为一个有多个小格子组成的容器，每个小格子中可以存储一个1或一个0，这个小格子在内存中被称为1位（bit）

8bit=1byte(字节)

1024byte=1kb(千字节)

1024kb=1mb(兆字节)

1024mb=1gb(吉字节)

1024gb=1tp(特字节)

1024tp=1pb()

3.八进制：9(很少用)

-特点：满8进1

-技术：0 1 2 3 4 5 6 7 11 12 .。。。

-单位数字：8个（0~7）

4.十六进制：（一般显示一个二进制数字时，都会转换为十六进制）

-特点：满16进1

-技术：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12..1a 1b...

-单位数字：16个（0~f）

字符编码：所有的数据在计算机中存储是都以二进制形式存储的，文字也不例外，所以一段文字在存储到内存中时，都需要转换为二进制编码，当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读。

-编码：将字符转换为二进制的过程为编码

-解码：将二进制码转换为字符的过程为解码

-字符集（charset）：编码和解码所采用的规则称为字符集

-乱码问题：如果编码和解码所采用的字符集不同就会出现乱码问题

-常见的字符集： ASCLL，ISO88591，GBK（中国），GB2312(中国)，UTF-8 （万国码）！！！

在开发时我们使用的字符集为UTF-8

实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

在html中有些时候，我们不能直接书写一些特殊符号

比如：多个连续的空格；字母两侧的大于小于号，如果需要属要在网页中书写特殊符号，则需要使用html中的实体（转义字符）

实体语法： &实体的名字；（实体名称的格式）

eg：

空格 &nbsp；

 <P>
        hahahaha&nbsp;&nbsp;好几个hahahha&copy;
 </P>

代码运显示结果如下

hahahaha 好几个hahahha©

> 大于号 &gt；

< 小于号 &lt；

<p>
     a&lt;b&gt;c
</p>

代码运显示结果如下

ac

（其中为加粗标签），c被加粗

<p>
   a<b>c
</p>

（不是加粗标签，区别在于<>中的b左右两边有空格)

<p>
a< b >c 
</p>

ac

metal标签

通过meta标签来设置网页的字符集，避免乱码问题

meta 主要用于设置网页中的一些元数据，而元数据不是给用户看，所以所有元数据只会在代码里看到

charset 指定网页的字符集

name 指定的数据的名称

content 指定的数据的内容

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开

<meta name="keywords" content="HTML5,前端，CSS3">

description 用于指定网站的描述网站的描述会显示在搜索引擎的搜索的结果中

<metal name="description" content="这是一个非常不错的网站">

title 标签的内容会作为搜索结果的超链接上的文字显示

http-equiv ，将页面重定向到另一个网站，“。。。。。”里填写网站地址

该语句为等待三秒跳转到火狐网站

<metal http-equiv="refresh" content="3;url=https://home.firefoxchina.cn">

在网页中HTML专门用来负责网页的结构，所以在使用html标签是，应该关注的是标签的语义，而不是它的样式

标题标签：

h1~h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅此于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1~h3，h4~h6很少用
标题标签都是块元素

 <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
 <h6>六级标题</h6>

```

在页面中独占一行的元素称为*块元素*（bvlock element）

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

 <hgroup>
        <h1>回乡偶书二首</h1>
    <h2>其一</h2>
    </hgroup>

p标签表示页面中的一个段落； p也是一个块元素

<p>在p标签中的p的内容就表示一个段落</p>
 <p>在p标签中的p的内容就表示一个段落</p>

在页面中不会独占一行的元素称为*行内元素*（inline element）

em标签用于表示语音语调的一个加重

<p>今天天气<em>真</em>不错!</p>

strong标签表示强调，重要内容！

<p>你今天必须要<strong>完成作业</strong>!</p>

blockquote标签表示一个长引用（即“”）

鲁迅说:  <blockquote>
        这句话我是从来没有说过的!
    </blockquote>

q标签表示一个短引用

子曰<q>学而时习之，乐呵乐呵</q>

br标签表示页面中的换行（br*n表示n个br）

bkblkbk
<br>
    今天天气真不错
     湖北
<br>
湖北

<br>

块元素（block element）
-在网页中一般通过对块元素来对页面进行布局

行内元素（inline element）
-行内元素主要用来包裹文字

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

-块元素中基本上什么都能放

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

浏览器在解析网页时，会自动对网页中不规范的内容进行修正

比如：

标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了出现了除head和body有以外的子元素

局部标签（结构化语义标签）
header标签表示网页的头部

<header>xxx</header>

main标签表示网页的主体部分（一个页面中只有一个main）

<main>是，喜欢的，爱吃，想啥的</main>

footer标签表示网页的底部

<footer>这是底部</footer>

nav 标签表示网页中的导航

<nav>导航</nav>

aside 标签表示和主体相关的其他内容（侧边栏）

<aside>侧边栏</aside>

article标签表示一个独立的文章

<article>独立文章</article>

section标签表示一个独立的区块，上边的标签都不能表示时使用section

<section>独立区块</section>

div 标签没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

<div>区块</div>

span 行内元素，没有任何语义，一般用来在网页中选中文字

 <span>行内元素</span>

列表(list)

1.a

2.b

3.c

在html中也可以创建列表，html列表一共有三种：

1.有序列表

2.无序列表

3.定义列表

有序列表，使用ol标签来创建有序列表，使用li表示列表项

<ol>

        <li>结构</li>


        <li>表现</li>


        <li>行为</li>


 </ol>

无序列表，使用u1标签来创建无序列表，使用li表示列表项

<ul>

       <li>结构</li>


       <li>表现</li>


       <li>行为</li>


</ul>

定义列表，使用dl标签来创建一个定义列表，使用dt表示列表项，使用dd来对内容进行解释说明

<dl>


        <dt>结构</dt>


        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>



</dl>

列表之间可以相互嵌套

<ul>

        <li>aa</li>

        <li>
                bb

            <ul>

             <li>cc</li>


             <li>dd</li>


            </ul>


        </li>


    </ul>