当前位置：首页 > news >正文

HTML：入门

news 来源：原创 2025/5/15 5:40:39

入门：

通过配置好的的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>