HTML:入门

入门:

通过配置好的的vscode可以输入 !+回车 的方式快速生成html网页的基本构架

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

head部分对网页的设置,必须有。title标签指的是网页的名称,可以自己定义

body部分:

引入CSS设置字体的颜色

三种形式:

span标签

<span> 标签属于内联元素,主要用于为文本的特定部分或者小范围的内联内容添加样式或进行标识。它本身不会对内容的显示造成影响,只有在为其应用了 CSS(像设置颜色、字体、背景等样式)或者添加了 JavaScript 行为之后,才会发挥作用。

第一种实现方式:

直接在body标签内需要改变字体颜色的用span框中:

复制代码
 <span style="color: black;">
         这是一个<span>span</span>标签
     </span>
第二种实现方式:

在head标签内编写内部样式

复制代码
<style>
        span{
            color: red;
        }
    </style>

body标签内用span标签引用的就具有上面的设置

复制代码
<span>
         这是一个<span>span</span>标签
     </span>
第三种实现方式:

创建一个css文件,然后引入到html页面中去

引入:在head标签内

复制代码
<link rel="stylesheet" href="css/new1.css">

前端开发种表示颜色的多种方式:

CSS选择器

优先级:id选择>类选择>元素选择

一、元素选择器

在head标签内写入style标签:里面表示h1和h2中的字体分别是红和蓝

复制代码
<style>
        h1{
            color: red;
        }
        h2{
               color: blue;
        }
    </style>
二、类选择器

在style标签中用 . 后接类名,例如 .class1

复制代码
<style>
        .class1{
        color: green; 
        }
    </style>

在body中引用

复制代码
<span class="class1">
        这是一个标签
     </span>
三、ID选择器

现在head里面的style标签定义一个id1

复制代码
<style>
        #id1{
            color: pink;
        }
    </style>

然后在引用

复制代码
<span id="id1">
        这是一个标签
    </span>
更多选择器

引入视频

通过标签<video>来引用视频

controls来设置展示视频的播放栏

autoplay来设置自动播放

复制代码
<video src="video/1.mp4" controls autoplay width="400" height="300"></video>

引入音频

复制代码
<audio src="" controls width="400" height="300"></audio>

引入图片

复制代码
<img src="C:/Users/16338/Pictures/Saved Pictures/1.jpg" width="400" height="300">

段落<p>

用<p> 标签包裹表示一个段落

可以在head中style中设置其格式

复制代码
<style>
        p{
            /* 设置行高 */
            line-height: 20px;
            /* 设置字体大小 */
            font-size: 16px;
            /* 设置字体 */
            font-family: 'Courier New', Courier, monospace;
            /* 设置字体颜色 */
            color: red;
            /* 设置字体样式 */
            font-style: italic;
            /* 设置字体粗细 */
            font-weight: bold;
            /* 设置首行缩进 */
            text-indent: 2em;

        }
    </style>

其他设置字的展示标签

实体字符

盒子模型

布局标签:网页开发中,会使用div和span这两个没有语义的布局标签。

div的框架:

设置

flex布局

·flex是flexible Box的缩写,意为"弹性布局",是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。

·通过给父容器添加flex的相关属性,来控制子元素的位置和排列方式。

表单标签(form)

表单项

<input>
复制代码
<input type="text" name = "name">

表格标签<table>

<tr>标签定义每一行

<th>标签是定义的表格头

<td>定义的是表格的主体内容

复制代码
<table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
        </tr>
    </table>
相关推荐
gnip1 小时前
js上下文
前端·javascript
中草药z1 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)1 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休2 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel2 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组2 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽2 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5812 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript