董洞洞同学

董洞洞同学

关注
发信
关注(28)粉丝(399)

web前端开发基础入门html5+css3+js学习笔记（一）

目录

1.第一个前端程序

用记事本创建文件名为Welcome.html

<html>
	<head>
			<title>
			我的第一个网页
			</title>
	</head>
	<body>
	欢迎来到网页制作
	</body>
</html>

2.前端工具的选择与安装

浏览器选择：谷歌浏览器（有开发者调试工具）
鼠标右键，选择检查，进入开发者调试工具

开发者工具：VSCode
安装中文，扩展，收索chinese，安装

3.VSCode开发者工具快捷键

生成浏览器文件.html的快捷方式

VSCode常用快捷键列表

4.HTML5简介与基础骨架

4.1 HTML5的DOCTYPE声明

避免浏览器怪异模式，防止不同浏览器渲染出不同效果来。

1. <!DOCTYPE html>

4.2 HTML5基本骨架

4.2.1 html标签

其他元素要包裹在它里面，限定了文档的开始点和结束点

1. <!DOCTYPE html>
2. <html>
3. </html>

4.2.2 head标签

head标签用于定义文档的头部，描述了文档的各种属性和信息，包括文档的标题、在Web中的文职以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

1. <!DOCTYPE html>
2. <html>
3. 		<head>
4. 		</head>
5. <html>

4.2.3 body标签

body元素定义文档的主体。
body元素包含文档中的所有内容（比如文本、超链接、图像、表格和列表等等）
它会直接在页面中显示出来，也就是用户可以直观看到的内容

 1. <!DOCTYPE html>
 2. <html>
 3. 		<head>
 4. 		</head>
 5. 		<body>
 6. 			我会显示在浏览器中
 7. 		</body>
 8. </html>

4.2.4 title标签

  1. 可定义文档的标题
  2. 它显示在浏览器窗口的标题栏或状态栏上
  3. <title>标签是<head>标签中唯一必须要求包含的东西，就是说写head一定要写title
  4. <title>的增加有利于SEO优化（收索引擎优化）
<!DOCTYPE html>
<html>

<head>
    <title>我的网页</title>
</head>
<body>
    欢迎光临
</body>

</html>

4.2.5 meta标签

meta是一个单标签。meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8

<!DOCTYPE html>
<html>

<head>
    <title>我的网页</title>
    <meta charset="UTF-8">
</head>

<body>
    欢迎光临
</body>

</html>

5.标签之标题

总共有六级

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

5.1 快捷键

生成h1-h6的快捷键h$*6

快速打开浏览器安装插件
拓展，搜索open in browser，点击安装
正确使用标签可以提高seo

5.1 标题标签位置摆放

在标签中添加属性：align=left|center|right

6.标签之段落、换行、水平线

6.1 标签之段落

段落是通过<p>标签定义的
建议文本写在标签内，标签内可以修改其字体大小等，标签外无法控制

6.2换行

<br>或<br />单标签

6.3 水平线

<hr/>标签在html页面中创建水平线
属性：color,width,size,align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
        我是一个段<br>落标签
    </p>
    <hr color="red" width="300px" size="20px"  align="left"> <!--宽度和高度的单位是像素-->
</body>
</html>

7.标签之图片

网站中最多的元素就是图片
<img>标签定义html页面中的图像，它是单标签
属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="1.webp" alt="美丽的小姐姐" width="300px" title="小姐姐"><!--一般不同时规定宽度和高度-->
</body>
</html>

8.图片路径详解

8.1 绝对路径

从盘符开始

8.2 相对路径

8.2.1 子级/

8.2.2 父级../

8.2.3 同级./

8.3 网络路径

具体的网络地址

9.标签之超文本链接

9.1 超链接描述

html使用标签<a>来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分。

9.2 超链接属性

在标签<a>中使用了href属性来描述链接的地址
<a href="url">链接文本</a>

默认情况下，链接未点是蓝色带下划线，点击后是紫色带下划线，点击时红色带下划线。后期可用css样式修改这些效果

9.3 超链接表现

鼠标移动到超链接上会变成小手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <a href="https://www.baidu.com">百度一下</a>
    <a href="https://www.baidu.com">
        <img src="1.webp" width="300px">
    </a>
</body>
</html>

10.标签之文本

10.1 常用文本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>白菜</p>

    <p>我喜欢吃<em>em白菜</em></p>
    <i>i白菜</i>
    <b>b白菜</b>
    <strong>strong白菜</strong>
    <span>span白菜</span>
    <del>del白菜</del>
    
</body>
</html>

11. 列表标签之有序列表

11.1 有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签

11.2 type属性

<ol>的属性type拥有的选项

  1. 1 表示列表项目用数字标号（1，2，3…）
  2. a 表示列表项目用小写字母标号 （a,b,c…）
  3. A 表示列表项目用大写字母标号（A，B，C…）
  4. i 表示列表项目用小写罗马数字标号（i，ii，iii…）
  5. I 表示列表项目用大写罗马数字标号（I, II, III…）

11.3 有序列表嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <ol type="a">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>

    <ol type="A">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>

    <ol type="1">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>

    <ol type="i">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>

    <ol type="I">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>

    <ol>
        <li>水果</li>
        <li>
            蔬菜
            <ol>
                <li>白菜</li>
                <li>油菜</li>
                <li>辣椒</li>
                <li>黄瓜</li>
            
            </ol>
        </li>
        <li>肉类</li>
    </ol>
</body>
</html>

12.列表标签之无序列表

12.1 无序列表实现

无序列表是一个项目的列表，此列项目使用粗体原点（典型的小黑圆圈）进行标记
无序列表始于<ul>标签。每个列表项始于<li>标签。

12.2 type属性

<ul>的属性type拥有的选项

  • disc 默认实心圆
  • circle 空心圆
  • square 小方块
  • none 不显示

12.3 无序列表嵌套

12.4 常见应用场景

  • 无序的列表效果
  • 导航效果

12.5 快捷键

快速生成ul+li的布局：ul>li*3(数字根据自己的需要的li数量修改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul type="disc">
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

    <ul type="circle">
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

    <ul type="square">
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

    <ul type="none">
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

    <ul>
        <li>蔬菜</li>
        <li>
            水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>橘子</li>
            </ul>
        </li>
        <li>肉类</li>
    </ul>

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

13.标签之表格

13.1 表格展示效果

表格：<table>
行：<tr>
单元格（列）：<td>

13.2 快捷键

快速生成表格结构:table>tr*4>td*5{单元格}

13.3 表格属性

  1. border：设置表格的边框
  2. width：设置表格的宽度
  3. height：设置表格的高度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1" width="400px" height="200px">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>

        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>

        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

14.表格单元格合并

单元格合并属性
web前端开发基础入门html5+css3+js学习笔记（一）-LMLPHP

  • 水平合并：colspan
  • 垂直合并: rowspan
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>合并单元格6和7：colspan</p>
    <p>合并单元格15和20：rowspan</p>
    <p>水平合并：保留左边，删除右边</p>
    <p>垂直合并：保留上边，删除下边</p>

    

    <table border="1" width="600px" height="400px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td rowspan="3">单元格13、18、23</td>
            <td>单元格14</td>
            <td rowspan="2">单元格15、20</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">单元格16、17、21、22</td>
            <td>单元格19</td>
        </tr>
        <tr>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>
</body>
</html>

15.Form表单

作用：让网站具有交互性
表单在Web网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，按钮等，这些输入框，按钮叫控件，表单就是容器，它能够容纳各种各样的控件

<form action="url" method="get|post" name="myform"></form>

属性说明
action服务器地址
name表单名称
method中Get和Post的区别

  1. 数据提交方式，get把提交的数据url可以看到，post看不到
  2. get一般用于提交少量数据，post用来提交大量数据

15.1 表单元素（可理解为表单控件）

一个完整的表单包含三个基本组成部分：表单标签（）、表单域（输入框）、表单按钮（button按钮）
1.表单标签
2.表单域
3.表单按钮

<form>
	<input type="text">
	<input type="submit">
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="url" method="get|post" name="myform"></form>

    <form><!--表单标签-->
        <input><!--表单域-->
        <input type="submit"><!--表单按钮-->
        <button>按钮</button><!--表单按钮-->
    </form>

    <form>
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

16.表单元素

16.1 文本框

文本域通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
	First name:<input type="text" name="firstname">
	<br>
	Last name:<input type="test" name="lastname">
</form>

16.2 密码框

密码字段通过标签<input type="password">来定义

<form>
	Password:<input type="password" name="pwd">
</form>

16.3 提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="url" method="get">
	Username:<input type="text" name="user">
	<input type="submit" value="Submit">
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text">
        <input type="submit">
    </form>

    <form>
        用户名：<input type="text">
        <br>
        密码：<input type="password">
        <br>
        <input type="submit" value="登入">
    </form>
</body>
</html>

17.块元素与行内元素（内联元素）

html5之前元素分为块级元素和内联元素；
html5之后按内容模型来区分，分为元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。元素不属于任何一个类别，被称为穿透的，元素可能属于不止一个类别，称为混合的。

内联元素和块级元素的区别

常见块级元素

常见内联元素（行内元素）

行内块级元素（特点：不换行、能够识别宽高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>标签</h1>
    <p>段落</p>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>

    <a href="#">超链接</a>
    <span>内容</span>
    <em width="400px">注重语气</em><!--行元素设置宽度并不能生效-->

    <img  width="300px" src="2.webp" alt="">
    <img src="2.webp" alt=""><!--行内块级元素不换行，却能识别宽高-->

</body>
</html>

18.HTML5新增标签

目的：新增布局标签利于SEO

18.1 拓展知识

div容器元素，也是页面中见到的最多的元素。本身没有任何样式效果。

18.2 H5新标签

  1. <head></head>头部
  2. <nav></nav>导航
  3. <section></section>定义文档中的节，比如章节、页眉、页脚
  4. <aside></aside>侧边栏
  5. <footer></footer>脚部
  6. <article></article>代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>标签</h3>
    <a href="#">超链接</a>
    <strong>文本</strong>
    <p>段落</p>
    <ul>
        <li>列表</li>
    </ul>

    <table>
        <tr>
            <td>单元格</td>
        </tr>
    </table>

    <div>
        <ul>
            <li>导航1</li>
            <li>导航2</li>
            <li>导航3</li>
        </ul>
    </div>

    <div>
        <img src="" alt="">
    </div>

    <div>
        <img src="" alt="">
        <p> </p>
    </div>

   <!--传统布局-->
   <div id="header"></div>
   <div id="nav"></div>
   <div id="article">
        <div id="section"></div>
   </div> 
   <div id="silder"></div>
   <div id="footer"></div>

   <!--新布局新标签-->
   <header></header>
   <nav></nav>
   <article>
        <section></section>
   </article>
   <aside></aside>
   <footer></footer>


</body>
</html>
08-17 07:40
Powered by LMLPHP ©2024 董洞洞同学 0.002059