前端-01Html5基本知识

飞鸿_踏雪泥
118 阅读4分钟

1 基本

1.1 第一个前端程序

  1. 内容
<html>
    <head>
        <title>我的网页</title>
    </head>
    <body>
        Hello,我的第一个网页
    </body>
</html>

使用浏览器打开

image.png

1.2 工具安装

  1. 浏览器

谷歌浏览器

image.png

image.png

清缓存

ctrl+shift+delete

image.png

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

!+回车

image.png

image.png

  • 常用快捷键

image.png

  • 快速打开浏览器

插件open in browser 安装，就会多出两个选项来

image.png

2 Html5

2.1 介绍

  1. 概念

是一种用来描述网页的一种语言，被称为超文本标记语言，本质是标记语言，标记语言是一套标记标签，一般用

  1. DOCTYPE声明

DOCTYPE是document type(文档类型)的缩写。

<!DOCTYPE html>
是H5的声明位于文档的最前面，甚至在<html>之前

作用是网页必备的组成部分，避免浏览器的怪异模式

image.png

  1. html5的基本骨架

  • html标签

  • head标签

    • 必须包含title标签
    • meta标签：一般是限定utf-8编码格式，注意是一个单标签

  • body标签

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

2.2 标签之标题

  1. 标题介绍

从h1到h6从大到小，双标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
  • 案例
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="UTF-8">
​
    <title>Document</title>
</head>
​
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
​
</html>

image.png

快捷键

h$*6+回车

  • 网页案例

www.mi.com/shop

image.png

  1. 标题标签位置摆放
align="left center | right"
默认为左的，可以设置属性变成右边

image.png

2.3 标签之段落、换行、水平线

  1. 概念

段落(p)：通过段落去承载文本

换行(br)

水平线(hr)

  1. 段落
  • 运用
<!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>我是一个段落标签</p>
</body>
​
</html>

image.png

  • 网页案例

image.png 3. 换行

  • 运用

注意是单标签

<!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>我是一个段落标签</p>
    <p>如果您希望在不产生一个<br>新段落的情况下进行换行</p>
</body>
​
</html>

image.png

  1. 水平线
  • 运用

image.png

  • 案例
<!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>我是一个段落标签</p>
    <p>如果您希望在不产生一个<br>新段落的情况下进行换行</p>
    <hr color="red" width="300px" size ="10px" align = "left">
</body>

</html>

image.png

2.4 标签的图片

  1. 概念

使用标签定义HTML页面中的图像

<img scr="" alt="" title="" width="" height="">
  1. 运用
  • 用法

image.png

  • scr

图片必须和代码在同一个文件夹下

<!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>
    <img src="1683454588303.jpg" >
</body>
</html>

效果

image.png

  • alt
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像">
</body>

当图片获取不到的时候，会显示alt的名字，即代替文本

image.png

  • width
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像" width="300px">
</body>
  • height
<body>
    <img src="1683454588303.jpg" alt = "我的qq头像" width="300px" height="300px">
</body>
  • title

鼠标边边会出现文字提示

image.png

  1. 关于scr的补充
  • 绝对路径
  • 相对路径

子级关系/

image.png

父级关系../

image.png

同级关系./

2.5 超文本链接

  1. 概念

使用来设置超文本链接，其中href属性来描述链接的地址

<a href="url">链接文本</a>
  1. 运用
<body>
    <a href="https://www.baidu.com">百度</a>
</body>

记得写全https://

图片也可以当作跳转的中介

<body>
    <a href="https://www.baidu.com">
        <img src="1683454588303.jpg" alt="qq头像" width="300px">
    </a>
</body>

2.6 文本标签

  1. 基本使用

image.png

<body>
    <em>月月</em>
    <b>月月</b>
    <i>月月</i>
    <strong>月月</strong>
    <del>月月</del>
    <span>月月</span>
</body>

image.png

  1. 嵌套
<body>
	<p>我喜欢吃<em>em白菜</em></p>
</body>

image.png

2.7 列表标签之有序列表

  1. 有序列表
  • 基本使用
<body>
    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龙果</li>
    </ol>
</body>

image.png

  • ol属性

image.png

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

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

image.png

  • 嵌套

也可以嵌套，li中再套一组ol

<body>    
	<ol>
        <li>水果</li>
        <li>
            蔬菜
            <ol>
                <li>白菜</li>
                <li>油菜</li>
            </ol>
        </li>
    </ol>
</body>

image.png

2.8 无序列表

  1. 概念
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>
</body>

image.png

  1. ul属性

image.png

<body>
<ul type ="disc">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

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

<ul type = "squre">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

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

</body>

image.png

  • 嵌套

也可以嵌套的

  1. 实际运用
  • 百度新闻

image.png

  • 小米

image.png

辅助以css

  1. 快捷键

ul>li*2

2.9 标签之表格

  1. 概念

表格：

行：

，有几行就几个tr

单元格(列)：

，有几列就在tr中写几列，中间可以写文本的

  1. 运用

三行三列的单元格

<body>
    <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>
    </table>
</body>

image.png

  1. 快捷键

table <tr*2>td{单元格}

    table>tr*3>td*3{哦哦}

回车成这样
    <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>
    </table>
  1. 属性
  • 基本属性

image.png

以后用css调整的多

  • 运用
<table border="1">
    <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>
  • 效果

image.png

宽高也可以设置，也可以后css调整

  1. 单元格合并
  • 水平合并colspan
<body>
    <p>合并单元格</p>
    <table border="1">
        <tr>
            <td>yes1</td>
            <td>yes2</td>
            <td>yes3</td>
        </tr>
        <tr>
            <td colspan="2">yes4 yes5</td>
            <td>yes6</td>
        </tr>
        <tr>
            <td>yes7</td>
            <td>yes8</td>
            <td>yes9</td>
        </tr>
    </table>
</body>
  • 垂直合并rowspan
<body>
    <p>水平合并单元格3,4以及垂直合并单元格3，6</p>
    <table border="1">
        <tr>
            <td>yes1</td>
            <td>yes2</td>
            <td rowspan="2">yes3 yes6</td>
        </tr>
        <tr>
            <td colspan="2">yes4 yes5</td>
        </tr>
        <tr>
            <td>yes7</td>
            <td>yes8</td>
            <td>yes9</td>
        </tr>
    </table>
</body>

效果

image.png

如果合并四个，先水平合并，后垂直合并

2.10 表单

  1. 引入

image.png

  1. 属性

表单一般包括容器和控件，控件包含输入框和按钮

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

action服务器地址，method请求类型，name表单名字

  1. 组成

表单标签，表单域(输入框)，表单按钮

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

image.png

  1. 补充表单元素
  • 文本框
    <form>
        用户名：<input type ="text">
    </form>

image.png

  • 密码框
    <form>
        Password：<input type ="password" name = "pwd">
    </form>

image.png

密码是小黑圆点

  • 提交按钮
   <form>
        <input type = "submit" value = "Submit">
    </form>

image.png

avatar
文章
阅读
粉丝