当前位置: 首页 > web >正文

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>

http://www.xdnf.cn/news/6123.html

相关文章:

  • Angular 知识框架
  • 【SQL】如何在 SQL 中统计结构化字符串的特征频率
  • 【位运算】常见算法公式使用
  • 360智语:以全栈技术重塑企业级智能体开发新标杆
  • 银行卡真伪验证助力金融合规-银行卡实名认证接口
  • 电机的导程和脉冲之间的关系
  • Ansible Roles 是一种用于层次化和结构化组织 Ansible Playbook 的机制。
  • SVG 知识详解:从入门到精通
  • 鸿蒙5.0项目开发——鸿蒙天气项目的实现(主页1)
  • 《Effective Python》第2章 字符串和切片操作——Python 字符串格式化的现代选择f-strings
  • Python 之 Flask 入门学习
  • 《P4391 [BalticOI 2009] Radio Transmission 无线传输 题解》
  • 完整的 CentOS 6.10 虚拟机安装启动脚本
  • spark中的转换算子
  • 易学探索助手-项目记录(九)
  • HTTP GET报文解读
  • 学习机器学习的体会与姓名性别预测案例分析
  • CMakeLists生成调用静态动态库可执行demo
  • 论语详解---缠中说禅(整理)
  • 通义千问-langchain使用构建(一)
  • ChromeDriver进程泄漏问题分析与最佳实践解决方案
  • 排序算法详解
  • Electron入门指南:用前端技术打造桌面应用
  • Socket API 核心函数详解
  • 一文了解 HTTP Content-Type:从基础到实战
  • 第六天——贪心算法——字符串分隔
  • 【C++】模板(初阶)
  • 从lightrag的prompt到基于openai Structured Outputs 的优化实现思路
  • 虚幻引擎5-Unreal Engine笔记之摄像机与场景捕获相关概念的解析
  • C语言学习之文件操作