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>
相关推荐
珍宝商店10 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖20 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒20 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser22 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan25 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family27 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_42 分钟前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend1 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理1 小时前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构
API开发1 小时前
apiSQL+GoView:一个API接口开发数据大屏
前端·后端·api·数据可视化·数据大屏·apisql