Web学习笔记

逃-跑0420

已于 2022-10-22 19:03:45 修改

阅读量1.9k

点赞数 1

文章标签：前端学习 html

于 2022-10-19 23:33:15 首次发布

本文链接：https://blog.csdn.net/wangwangduikexin/article/details/127416174

版权

2——

什么是HTML·CSS？
是网站的编程语言
浏览器吧代码解析后的样子就是我们看到的网站，如何看到网站的原始代码？通过鼠标右键悬着查看网页源代码
如何去写代码？写导哪里呢？
一个网站是有N多个网页组成的。每一个网页 .html文件
电视剧，40集 .mp4文件

3——按键

ctrl+s：保存
ctrl+a：全选
ctrl+x/c/v：剪切/复制/粘粘
ctrl+z/y：撤销/前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+⬇：快速复制一行
alt+⬆或⬇：快速移动一行
tab：向后缩进
tab+shift：先前缩进
ctrl+d：选择相同元素的一个

5——了解网站开发

UI设计师：设计稿
设计稿——>代码
数据库里的数据——>显示到页面
HTML+CSS
HTML：结构
CSS：样式

7——HTML标签

网站：htpp://www.html5star.com/manual/html5label-meaning/

8——HTML初始代码

每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法。
！+tab键：快速的创建html的初始代码

<!DOCTYPE html> 文档声明:告诉浏览器这是一个htlm文件
<html lang="en">htlm文件的最外层标签:包裹着所有的htlm标签代码lang="en"表示是一个英文网站lang=”zh-CN”表示一个中文网站
<head>
    <meta charset="UTF-8"> 元信息:是编写网页中的一些赋值信息charset="UTF-8"国际编码，让网页不出现乱码的情况
    <title>Document</title>    设置网页的标题
</head>
<body>
    显示网页内容的区域
</body>
</html

9——HTML注释

写法：《！--注释的内容--》 在浏览器中看不到，只能在代码中看到注释类的内容。
意义：1.把暂时不用的代码注释起来，方便以后使用。
      2.对开发人员进行提示。
快捷键添加与删除注释：1.ctrl+/
                    2.shift+alt+a

10——HTML语义化

所谓HTML语义化指的是，根据网页中内容的结构，选者合适的HTML标签进行编写。
好处：1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
           2.有利于SEO，让搜索引擎爬虫更好的理解网页。
           3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
           3.便于团队开发和维护。

11——标题与段落

标题 ->双标签：<h1></h1> ~<h6></h6>
在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签。
h5 h6标签在网页中不经常使用。
段落->双标签：<P></P>

12——文本修饰标签

强调——>双标签：<strong></strong>  <em></em>
区别:1.写法和展示效果是有区别的,一个加粗,一个斜体。
     2.strong的强调性更强,em的强调性稍弱。
下标：<sub></sub>
下表:<sup></sup>
删除文本：<del></del>
插入文本：<ins></ins>
         注：一般情况下，删除文本都是和插入文本配合使用的。
         <strong>:表示强调，会对文本进行加粗
            <em>:表示强调，会对文本进行斜体
            <sub> <sup>:下标文本 上标文本
            <del> <ins>:删除文本 插入文本
            eg:
            <!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>
                <strong>强调文本</strong>
                <em>XXXXX</em>
            </body>
            </html>

13——图片标签

img——>单标签  eg：<img src="XXX.jpg"
      src:引入图片的地址
      alt:当图片出现问题的时候，可以显示一段友好的提示文字
      title:提示信息
      width:height:图片的大小

14——引入文件的地址路径

相对路经:1    .在路径中表示当前路径
         2   ..在路径中表示上一级路径
绝对路径:1    E:/ke/qf_dl201901/20190108/img/animal/dog.jpg
        2     htpp://cmsXXXXXXXXXXXX.jpeg
        注意/与\都可以替换，但绝对路径中的网址不能替换，尽量避免反斜线

15——跳转链接

a——>双标签：<a></a>
   href属性:链接的地址 eg: 1<a href="htpp://www.baidu.com">访问百度</a>   2<a href="htpp://www.qfedu.com"><img src=".img/animal/dog.jpg" alt=" ">
</a>
   target属性:可以改变链接打开的方式,默认情况下,在当前页面打开——>self,新窗口打开——>blank
             eg:<a href="htpp://www.baidu.com"target="—_black">访问百度</a>
base——>单标签：作用就是改变链接的默认行为（所有打开的网址全部是新建窗口的）
             eg：<!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>
                <base target="_blank">
             </head>
             <body>
                
             </body>
             </html>

16——跳转锚点

俩种做法：1.#号+id属性
2.#号+name属性（注意name属性加给的是a标签

实现一:  #号
        id属性
实现二： #号
        name属性
      
<!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>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>

     <a name="html"></a>
    <h2>HTML超文本标记语言</h>
    <p>xxxxxxxxxxxxxxxxxxxx</p>
    <h2 id="css">CSS样本</h2>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>

17——特殊字符

1.&+字符
2.解决冲突：左右尖括号，添加多个空格的实现
在这里插入图片描述

!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>
    <p>
        &lt;html&&gt;
        hello&nbsp;&nbsp;&nbsp;word
    </p>
</body>
</html>

18——无序列表

<ul>,<li>:列表的最外层容器,列表项
    注:ul和li必须是组合出现的,他们之间是不能有其它标签的
type属性:改变前面标记的样式(一般都是CSS去控制)
语法:<ul type=""value>
<!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>
    <ul>
          <li>第一项</li>
          <li>第一项</li>
    </ul>
    <ul type="circle">
        <li>第一项</li>
        <li>第二项</li>
    </ul>
    错误的写法
    <p>
        <p>
       <li>第一项</li>
       </p>
    </p>
</body>
</html>

19——有序数表

<ol>,<li>:列表的最外层容器，列表项
    注：有序数表用的非常少,经常用的是无序数表,无序数表可以去代替有有序数表
    同上type属性
<!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>
    <ol>
        <li>第一项</li>
    </ol>
    <ol>
        <li><a href="#">我的祖国</a></li>
    </Ool>
</body>
</html>

20——定义列表

<dl>.:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述                                                   
    <!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>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
    </body>
    </html>