软件创新开发基地，web前段作业（第一周）

Gog_Fairy

已于 2022-10-28 14:41:03 修改

阅读量1.4k

点赞数 1

分类专栏： html 文章标签：前端

于 2022-10-20 16:09:17 首次发布

本文链接：https://blog.csdn.net/Gog_Fairy/article/details/127379958

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、第一集的笔记

1.1 课程的主要部分

HTML+CSS系列教程1之拨云见日
HTML+CSS系列教程2之朔本求源
MTML+CSS系列教程3之风生水起
MTML+CSS系列教程4之巧夺天工

1.2 如何写好前段

感兴趣够努力

二、第二集笔记

1.1 什么是HTML+CSS?

是做网站的编程语言。
浏览器解析后的样子就是我们看到的网站，如何看到网站的原始代码？
通过鼠标右键选择查看网页的源代码。

如何去写代码？写到哪里呢？
一个网站是由N多个网页组成的。网页的文件格式为：.html文件
电视剧，一部电视由很多集组成。
电视剧文件的格式为：.mp4文件
他们是两种编程序言，一般情况下需要配合使用，是作为网站开发的基础语言。

1.2创建.html文件

1.首先要将文件中的显示改成“文件扩展名”。
2.创建一个文本文件，并将其后缀改为“heml”。
在这里插入图片描述
3.用记事本在.html文件中进行修改。

三、第三集的笔记

1.1下载并学会试用vscode编译器

1.学会如何安装插件语言包、“open in browser” “view in borrow”
2.学习编辑器的基本使用?
ctrl+s:保存
创建文件、穿件文件夹、重命名和删除
ctrl+a:全选
ctrl+x,ctrl+c,ctrl+v:剪切，复制，粘贴
ctrl+z ctrl+y:撤销前进
在文件——>首选项——>设置（进行调解换行或者文字大小）
shift+end：从头选中一行代码。
shift+homo：从尾部选中一行代码
shift+alt+光标下键：快速复制一行
Tab：使行向后缩进
shift+tab：是向前缩进
shift+alt:是向后缩进

四、第四集笔记

1.1更多的快捷键和使用技巧

1.选中文件夹，用搜索功能进行搜索。

1.2浏览器

1.Google Chrome是一款可以让你更快速，轻松且安全地使用网络的浏览器。
2.统计的浏览器市场占有份额：https://rank.kkj.cn/browserworld.shtml
3.五大浏览器：E/Edge，Chrome，Safari，Opera，Firefox

五、第五集笔记

1.1深入了解网站的开发

UI设计师：设计稿
web前段开发工程师（H5开发）
设计稿—>代码
数据库里的数据——>显示到页面
HTML+CSS
HTML:结构（框架） CSS：样式（装潢）
web后端开发工程师
在这里插入图片描述
删除淘宝网页的样式，剩下html
web前段工程师需要掌握的三大技能：Javascript,与html,css。
三者之间的关系又是如何的。

六、第六集笔记

1.1web前段的三大核心技术

HTML:结构 CSS:样式 Javascript:行为

通过开关javascript来更改网站的功能

1.2编辑网页样式

1.换颜色

效果展示：

在这里插入代码片<style>
div{color:red}
</style>
<div>HTML+CSS系列教程</div>

2.将文字转变成特殊效果
`<style>
div{color:red;font-style:italic;}
</style>
<div>HTML+CSS系列教程</div>

<script>
    let div =document.querySelector('div');
   let timer=nu11;
   let flag=true;
    div.onouseover=function(){
        timer=setinterval(()=>{
            if(flag){
            div.style.color='blue';
            div.style.fontstyle='normal';
    }
    else{
        div.style.color='red';
        div.style.fontstyle='italic';
    }

flag=!flag;

},500);
};
div.onmouseout=function(){
    clearinterval(timer);
};
</script>

七、第七集笔记

1.1 HTML的基本结构和属性？

HTML：超文本标记语言
超文本：文本内容+非文本内容（图片，视频，音频等）
标记：<单词>
语言：编程语言
标记也叫作标签；

<header>
<footer>

标签效果输出展示
在这里插入图片描述

写法分为两种：
单标签

双标签
创建标签的快捷键：TAB+单词——> <单词>
标签是可以上下排列的，也可以看做是组合的嵌套。
但是一个标签只能有一个标题

八、HTML初始代码

1.1 HTML代码的初始解结构

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

九、HTML的注释

1.1注释的写法

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

十、HTML汉化义

1.1汉化义

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

十一、标题与段落

1.1 标题

标题 ->双标签：<h1></h1> ~<h6></h6>
在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签。

1.2 段落

h5 h6标签在网页中不经常使用。
段落->双标签：<P></P>

十二、文本修饰标签

强调——>双标签：
区别:1.写法和展示效果是有区别的,一个加粗,一个斜体。
2.strong的强调性更强,em的强调性稍弱。
下标：<sub></sub>
下表:<sup></sup>
删除文本：<del></del>
插入文本：<ins></ins>
注：一般情况下，删除文本都是和插入文本配合使用的。
<strong>:表示强调，会对文本进行加粗
<em>:表示强调，会对文本进行斜体
<sub> <sup>:下标文本上标文本
<del> <ins>:删除文本插入文本
用斜体来强调文件，效果展示：在这里插入图片描述

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

上下标效果展示：

a <sup>2</sup>+b <sup>2</sup>=c <sup>2</sup>
</p>
<p>
        促销:原价 <del>300</del>，现价：<ins>100</ins>.
    </p>

在这里插入图片描述

十三、图片标签

1.1各类标签所代表的功能

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

十四、引入文件的地址和路径

1.1 两种路径的类型

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

十五、跳转链接

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">访问百度
base——>单标签：作用就是改变链接的默认行为（所有打开的网址全部是新建窗口的）
eg：

十六、俩种做法：

1.1第一种做法

1.#号+id属性

1.2第二种做法

2.#号+name属性（注意name属性加给的是a标签

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

效果展示：在这里插入图片描述

十七、特殊字符

1.1特殊符号

在编写一些文本的时候，经常会遇到输入法无法正常输入的情况，这个时候用html中的代码来表示这些特殊字符。
1.&+字符
2.解决冲突：左右尖括号，添加多个空格的实现
在这里插入图片描述
!DOCTYPE html>

Document

<html&> hello word

十八、无序列表

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

十九、有序列表

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

二十、定义列表

1.1

<dl>.:定义列表
2. <dt>:定义专业术语或名词
3. <dd>:对名词进行解释和描述

二十一、嵌套列表

1.1

列表之间可以互相嵌套，形成多层级的列表
代码：

<ul>
    <li>
辽宁省<ul>
    <li>沈阳</li>
    <li>大连</li>
    <li>丹东</li>
</ul>
    </li>
<li>
    山东省<ul>
        <li>济南</li>
        <li>烟台</li>
        <li>青岛</li>
    </ul>
</li>

</ul>

效果展示：
在这里插入图片描述

嵌套的定义列表：

<dl>
<dt>中国</dt>
<dd>
    <dl>
<dt>江苏省</dt>
<dd>南京</dd>
<dd>无锡</dd>
    </dl>
    <dl>
        <dt>山东省</dt>
        <dd>烟台</dd>
        <dd>青岛</dd>
            </dl>
</dd>



</dl>

效果展示：
在这里插入图片描述

1.2

作业：
代码：

    <li>
    小吃类
        <ul>
            <li>煮粉干</li>
            <li>凉拌芹菜</li>
            <li>蛋炒饭</li>
            <li>米饭</li>
        </ul>
    </li>
<li>
    卤味类
    <ul>
        <li>鸭肠</li>
        <li>面筋</li>
        <li>牛肚</li>
    </ul>
</li>

<li>套餐类
    <ul>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>

    </ul>
</li>
<li>炖罐类
    <ul>
<li>牛肉枸杞</li>
<li>猪心枸杞</li>
<li>猪蹄黄豆</li>


    </ul>


</li>
</ul>

效果展示：在这里插入图片描述

二十二、表格标签

1.1

<table>：表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题

之间是由嵌套的关系的，要符合嵌套的规范

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>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>
        
<tr align="right">

    <th colspan="2">日期</th>
    <th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
    <td>2020年十月十五日</td>
    <td>白天</td>
    <td>晴朗</td>
    <td>天气晴朗，适合出勤</td>
</tr>
<tr>
    <td>2020年十月十五日</td>
    <td>白天</td>
    <td>阴雨</td>
    <td>有小雨，出门带伞</td>
</tr>
<tr>
    <td valign="top" rowspan="2">2020年十月十六日</td>
    <td>白天</td>
    <td>阴雨</td>
    <td>有小雨，出门带伞</td>
</tr>
<tr >
   
    <td>白天</td>
    <td>阴雨</td>
    <td>有小雨，出门带伞</td>
</tr>

    </table>
</body>
</html>

效果展示：在这里插入图片描述

二十三、表格的属性

border：表格的边框
cellpadding:单元格之内的空间
cellspacing:单元格之间的开年
rowspan:合并行
colspan:合并列
alifn:左右的对齐方式
valign:上下的对齐方式

<td valign="top" rowspan="2">
<table border="10" cellpadding="30"

效果展示：
在这里插入图片描述

二十四、表单input的标签

:表示表单最外层的容器 :标签用于所及用户的信息，更具不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。 input是一个单标签，标签里面有一个type的属性，决定是和是什么样的控件。 action选择提交的的地址

在这里插入图片描述

<body>
    <form action="http://www.baidu.com">
        <h2>输入框:</h2>
        <input type="text">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkput" checked>苹果
        <input type="checkput">香蕉
        <input type="checkput">葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
        
        

    </form>
    
</body>