前端开发学习笔记-1-HTML

最新推荐文章于 2024-05-20 21:21:56 发布

薛定谔的量子猫.

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量175

点赞数

文章标签： html5 前端

本文链接：https://blog.csdn.net/Wsnbb007/article/details/127176906

版权

HTML的定位:

web前端开发由三部分组成：结构（html）、表现（css）、行为（javascript）。

html就是用来做这个结构的,网页里面的各种元素,包括文字、图片、音视频、链接等基本都是一股脑塞进html里面的。单纯的html就像下图一样。

HTML主要内容：

使用工具：Visual Studio Code

快捷创建html骨架：

创建 .html 为后缀名的文件.

英文感叹号!+Enter键/Tab键

<!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>
    
</body>
</html>

需要了解的是:

其中head标签包裹的头部内容,主要是从外界引入的各种样式等,

title标签包裹的是网页标题,

最主要的body标签包裹的就是网页的主体内容。

HTML常用标签:

排版标签：

1.<div></div>

div 大盒子标签,最常用的标签。

主要作用就是把整个网页分成很多板块，然后把各种内容分别填入对应的盒子里。

div大盒子可以设置宽度和高度，一个独占一行，也就是不能两个并列排。

2.<span></span>

span 小盒子标签。

与大盒子div相比，小盒子可以一行有多个，但是不能设置宽度和高度，其宽高由里面的内容撑开。

3.<h></h>

h 标题标签。

顾名思义，用来包裹标题的标签，所以字体自动加粗，一人独占一行。

常见的标题往往分几个等级，在html中标题有六个等级，从h1到h6，<h1></h1>最大，h6最小，依次递减。

4.<p></p>

p 段落标签。

用来装一段文字的，一个p包裹一个段落的文字，下一段就要换行，也就是说p标签和div标签一样一人独占一行。

媒体标签：

5.图片标签

将图片引入网页的标签

<img src="图片地址/图片路径">

6.音频标签 audio

将音频引入网页的标签

<audio src="./music.mp3" controls autoplay loop></audio>

7.视频标签 video

将视频引入网页的标签

<video src="./video.mp4" controls autoplay loop muted width="300"></video>

8.超链接标签

用来跳转的链接

<a href="链接的地址">跳转的文本</a>

9.列表标签

1)无序列表

        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>

用于创建网页中没有顺序要求的列表,最常用的列表标签，前面会自动添加小圆点。

2)有序列表

      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>

用于创建网页中有顺序要求的列表,比如排行榜之类的,会自动添加排名数字。

3)自定义列表

        <dl>
            <dt></dt>
            <dd></dd>
            <dd></dd>
            <dd></dd>
        </dl>

dt包裹小标题，dd为对应内容，常用于网页底部导航。

文件路径:

上述的图片和音视频的引入都需要用到路径,由src="路径"引入,链接由href="#"引入。

绝对路径：

绝对路径有两个位置,计算机内部的地址和网上的网络地址。

1）计算机盘符

<img src="D:\前端开发\第一天\images\hero.jpg" alt="">

2)网址路径

<a href="http://www.jd.com/">加上链接的内容</a>

相对路径：

一般将网页的各种文件放在一个根目录里，然后从当前html文件出发寻找目标文件的路，就是相对路径。

同级目录输入 ./ 然后直接找到目标文件

下级目录输入 ./ 找到目标文件夹,点进去再找到目标文件

上级目录输入 ../ 从当前文件夹跳出到上级文件夹,再寻找目标文件

补充：

1.换行标签 <br> 在该标签处执行换行

2.表格标签 table

用于制作表格的标签，很少用到。

3.表单标签 form

用于制作表单的标签，用于制作注册表等。

内部常用标签：

文本框
<input type="text" placeholder="默认内容">
密码框
<input type="password" placeholder="">
单选框
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
多选框
<input type="checkbox" checked >
文件上传
multiple:多文件上传
<input type="file" multiple>
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置" >
普通按钮
<input type="button"value="普通按钮">
搜索框
<input type="search">
图像提交按钮
<input type="image" src="./img/btn.png" alt="">

下拉菜单

<select>
<option>请选择城市</option>
<option selected>上海</option>
<option>北京</option>
<option>深圳</option>
<option>广州</option>
<option>武汉</option>
</select>

文本域

<textarea placeholder="评论或建议"></textarea>