htmlcss基础

embedded/2024/9/23 1:34:38/

html_0">html

组成

html"><!--跟标签-->
<html><!--头标签--><head><!--网页的标题标签--><tltle>测试html</title></head><!--体标签--><body><font color="yellow" size="7">测试体</font></body>
</html>

VSCODE

常用插件

  • open in brower:用浏览器 快捷打开并预览html文件
  • path intellisense:路径自动补全与提示
  • npm intellisense:require 三方文件时路径与文件名提示补全
  • auto rename tag:修改html标签,修改一个另一个自动同步修改
  • css peek:按住ctrl+左键点击class类名可以快速定位到样式表位置,快速修改

使用vscode注意

  • 设置vscode的文件自动保存
  • 快捷键
    alt+shift+向上/下键:复制一行代码
    alt+向上/下键:移动
    ctrl+d:删除

基础标签

标签描述
h1-h6定义标题
font定义文本的字体、字体尺寸、字体颜色
b定义粗体文本
i定义斜体文字
u定义文本下划线
center定义文本居中
p定义段落
br定义换行
hr定义水平线

特殊符号

<: &lt
>: &gt
@: &copy

图片、音频、视频标签

标签描述
img定义图片
audio定义音频
video定义视频

img:定义图片

  • src:规定显示图像的url
  • height:定义图像的高度
  • width:定义图像的宽度

aduio:定义音频,支持mp3,wav,ogg

  • src:规定音频的url
  • controls:显示播放控件

video:定义视频,支持mp4,webm,ogg

  • src:规定视频url
  • controls:显示播放控件

超链接标签

标签描述
a定义超链接,用于链接到另一个资源
href:指定访问资源的url
target:指定打开资源的方式
		_self:默认值,当前页面打开_blank:空白页面打开

列表标签

标签描述
ol定义有序列表
ul定义无序列表
li定义列表项

ol和ul标签均有type属性

表格标签

标签描述
table定义表格
tr定义行
td定义单元格
th定义表头单元格

table:定义表格

  • border:规定表格边框的宽度
  • width:规定表格的宽度
  • cellspacing:规定单元格之间的空白

tr:定义行

  • align:定义表格行的内容对齐方式

td:定义单元格

  • rowspan:规定单元格可横跨的行数
  • colspan:规定单元格可横跨的列数

布局标签

标签描述
div定义html文档中的一个区域部分,经常与css一起使用,用来布局网页
span用于组合行内元素

表单标签

标签描述
form定义表单
input定义表单项,通过type属性控制输入形式
label为表单项定义标注
selcet定义下拉列表
option定义下拉列表的列表项
textarea定义文本域

form表单标签常见属性:

  1. action:将收集的数据提交到具体后台服务器地址
  2. method:提交数据到后台的方式(get/post)

表单项

:表单项,通过type属性控制输入形式

type取值描述
text默认值,单行输入
password密码
radio单选按钮
checkbox复选框
file文件上传按钮
hidden隐藏的输入字段
submit提交按钮,把表单数据发送给服务器
reset重置按钮
button可点击按钮

http://www.ppmy.cn/embedded/58269.html

相关文章

Qt提升控件失败的解决办法

在 Qt Creator 中&#xff0c;通常是可以通过继承已有的类来创建新的子类的。如果您想要将 QGraphicsView 提升为新建的子类&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开 Qt Creator&#xff0c;并打开您的项目。打开包含 QGraphicsView 的头文件&#xff08;例如 …

开源数据科学平台Anaconda简介

开源数据科学平台Anaconda简介 零、时光宝盒 最近&#xff0c;某金融行业女性选择以跳楼的形式结束自己的生命&#xff0c;这件不幸的事情成了热门话题&#xff0c;各种猜测的都有&#xff0c;有些人评论的话真的很过分。我想起前段时间看到的&#xff0c;有个女学生跳江&#…

k8s-第二节-常用操作

k8s命令行常用操作 k8s命令行 操作对象时都要前面声明操作对象类型 kubectl get kubectl describe kubectl delete kubectl edit kubectl logs kubectl exec kubectl port-forward 端口转发将pod 端口映射出来 kubectl cp 本地文件路径:容器文件路径 kubectl apply …

系统架构师考点--信息系统基础知识

大家好。今天我们来总结一下信息系统基础知识的相关考点&#xff0c;每年都会考&#xff0c;一般是在上午场选择题中&#xff0c;占3分左右&#xff0c;其次下午场论文也有可能会出相关的考题。 一、信息系统概述 信息系统&#xff1a; 是由计算机硬件、网络和通信设备、计算…

MATLAB 2024b 更新了些什么?

MATLAB 2024b版本已经推出了预览版&#xff0c;本期介绍一些MATLAB部分的主要的更新内容。 帮助浏览器被移除 在此前的版本&#xff0c;当我们从MATLAB中访问帮助文档时&#xff0c;默认会通过MATLAB的帮助浏览器&#xff08;Help browser&#xff09;。 2024b版本开始&…

【前端从入门到精通:第二课:HTML头部标签常用标签】

走进HTML世界 HTML简介 可参考百度百科 学习变成到底难不难&#xff1f; A. 1 * 5 ? B. 111 * 555 ? A 到 B的过程&#xff0c; 差距就在于动手&#xff0c;不动手你就学不会。 如何创建HTML文件 ​鼠标右键->新建文本文件->更改后缀名.html 创建文件所需要注…

【SOM神经网络的数据分类】SOM神经网络的数据分类的一个小案例

【SOM神经网络的数据分类】SOM神经网络的数据分类的一个小案例 注&#xff1a;本文仅作为自己的学习记录以备以后复习查阅 一 概述 自组织特征映射网络&#xff08;Self-Organizing Feature Map, SOM&#xff09;也叫做Kohonen网络&#xff0c;它的特点是&#xff1a;全连接、…

Android 列表视频滑动自动播放—滑动过程自动播放(实现思路)

本文基于Exoplayer PlayerView 实现列表视频显示一定比例后自动播放 首先引入google media3包 implementation androidx.media3:media3-exoplayer:1.1.1 implementation androidx.media3:media3-exoplayer-dash:1.1.1 implementation androidx.media3:media3-ui:1.1.1 impl…