HTML常用标签、CSS基础

HTML常用标签

标签的分类

1. 单标签
    img br hr 
    <img />
2. 双标签
    a h p div <a></a>
3. 按照标签属性分类
    1. 块儿标签
        # 自己独自占一行
        h1-h6 p div
    2. 行内(内联)标签
        # 自身文本有多大就占多大
        a span u i b s

div标签和span标签

这两个标签它是没有任意意义的，主要用来'布局'页面
div一般用在占位置布局
span一般用在占文本布局

标签的嵌套

标签之间是可以互相嵌套的，标签套标签
块儿级元素是可以嵌套所有的标签的
p标签不能够嵌套块儿级元素，但是它可以嵌套行内元素
行内元素只能嵌套行内元素，不能够嵌套块儿级元素，非写了嵌套，也不报错，只不过是没有效果
"""针对于前端来说，不会轻易的报错! 如果你写的不对，只会没有对应的效果"""

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

src：
    1. 内部的图片地址
    2. 写外链的地址
title：
    鼠标悬浮的时候显示的内容(是所有标签都要的)
width: 图片的宽度
height：图片的高度
### 一般情况下只写一个，等比例缩放
alt：当图片不存在的时候，显示的内容

a标签

超链接标签

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href属性指定目标网页地址。该地址可以有几种类型：
● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
● 相对URL - 指当前站点中确切的路径（href="index.htm"）
● 锚URL - 指向页面中的锚（href="#top"）

target：
● _blank表示在新标签页中打开目标网页
● _self表示在当前标签页中打开目标网页

标签的两个自带重要属性

id 值: 相当于是人的身份证，一个文档中，id值不能够重复，必须唯一
class 值：是可以有多个的，一个标签可以有多个class值，一个class值也可以被多个标签拥有
<div id="d1" class='c1 c2 c3'></div>
<div id="d2" class='c2'></div>
<div id="d3" class='c3'></div>
<div id="d3" class='c1'></div>
#d1
.c1
要想使用id值，必须使用#开头
要想使用class值，必须使用 .开头

列表

1.无序列表

	<ul type="disc"><li>第一项</li><li>第二项</li></ul>type属性：● disc（实心圆点，默认值）● circle（空心圆圈）● square（实心方块）● none（无样式）

2.有序列表

<ol type="1" start="2"><li>第一项</li><li>第二项</li>
</ol>type属性：
● 1 数字列表，默认值
● A 大写字母
● a 小写字母
● Ⅰ大写罗马
● ⅰ小写罗马

3.标题列表

<dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容1</dd><dd>内容2</dd>
</dl>

表格

id     name    age   gender    salary
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000

<table><thead><tr><th>序号</th><th>姓名</th><th>爱好</th></tr></thead><tbody><tr><td>1</td><td>jason</td><td>杠娘</td></tr><tr><td>2</td><td>Yuan</td><td>日天</td></tr></tbody>
</table>

属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.（最好通过css来设置长宽）
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）

form表单标签

<form action=""><p><label for="inp1">username: <input type="text" id="inp1"></label></p><p><label for="inp2">password: <input type="password" id="inp2"></label></p><p><label for="inp3">password: <input type="date" id="inp3"></label></p><p><input type="checkbox" name="hobby"> read<input type="checkbox" name="hobby"> music<input type="checkbox" name="hobby"> tangtou</p><p><input type="checkbox" name="hobby1"> read1<input type="checkbox" name="hobby1"> music1<input type="checkbox" name="hobby1"> tangtou1</p><p><input type="radio" name="gender"> 男<input type="radio" name="gender">  女<input type="radio" name="gender">  未知</p><p><input type="hidden" value="123"></p><p><input type="file" multiple></p><p><select name="" id=""><option value="">上海</option><option value="">北京</option><option value="">河南</option></select></p><textarea name="" id="" cols="30" rows="10"></textarea><p><input type="submit" value="登录"><input type="reset" value="重置"></p>
</form>

属性说明:
● name：表单提交时的“键”，注意和id的区别
● value：表单提交时对应项的值
  ○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
  ○ type="text","password","hidden"时，为输入框的初始值
  ○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用

select属性
属性说明：
● multiple：布尔属性，设置后为多选，否则默认单选
● disabled：禁用
● selected：默认选中该项
● value：定义提交时的选项值

验证form表单朝后端提交数据

<form action="">

    action:
        """写朝后端提交的地址"""
        这里你写什么地址就朝这个地址提交数据，应该填写后端的地址
        1. 什么都不写：朝当前地址提交
        2. 全写：http://127.0.0.1:5000/index/ 朝这个地址提交
        3. 只写后缀
            /index/-------->IP:PORT/index

 """form表单要想把数据提交到后端，每一个标签都要有一个name属性."""
name的属性值就是提交到后端数据的key值，用户输入的内容就是value值

针对于复选框、单选框标签都应该有一个value属性，用于区别前端用户选择的哪个选项

## 对于文件数据的提交需要满足以下条件：
1. 请求方式必须是post
2. 数据编码方式：
    1. application/x-www-form-urlencoded
    2. multipart/form-data
    3. json
3. 编码方式必须是multipart/form-data才能提交问价
4. urlencoded只能够提交不是文件的数据，form-data是可以提交普通数据和文件数据
5. urlencoded形式的数据长什么样子：
     username=&password=&date=&hidden=123&myfile=&city=
6. form-data编码格式的数据：
    username=&password=&date=&hidden=123&myfile=&city=
    boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
    文件数据
    """对于form-data提交的数据，后端还是在form里面去普通数据，而在files里面去文件数据"""
7.  form表单不能够提交json数据
8. 如果想提交json格式的数据：Ajax技术、第三方的api工具postman

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
"""CSS就是对HTML标签做样式的，让不好看的变得更加的好看"""

CSS语法：
选择器 {属性名1:属性值;属性名2:属性值;属性名3:属性值;属性名4:属性值;属性名5:属性值;
}CSS注释:/*这是注释*/
HTML注释：<!-- 这是注释 -->
注释符号的快捷键是：ctrl + ?CSS的几种引入方式:行内样式:<p style="color: red">Hello world.</p>内部样式：<head><meta charset="UTF-8"><title>Title</title><style>p {background-color: #2b99ff;}</style></head>外部样式：<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器

如何学习CSS?
1. 先学习如何找到标签
2. 找到标签之后在进行属性操作

选择器种类非常之多，但是，大多数都是了解的，用的最多的也就几个，对我们来说，只需要掌握这几个就可以了
基本选择器：
    ID选择器
        
    类选择器
    元素选择器
    通用选择器
    
组合选择器
    后代选择器

 我们使用亲戚关系表示标签之间的关系<div id="div1"> div是p的父亲，p是div 的儿子<p class="c1"> p是a的父亲，a是p的儿子，a是div的孙子<a href="">点我把</a><a href="">点我把</a><a href="">点我把</a></p>div<a href="">我会不会变颜色呢</a> a是p的兄弟</div><p> p是div的兄弟<a href="">哈哈哈哈</a></p>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/124115.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

华为OD机考算法题：支持优先级的队列

华为OD机考算法题：支持优先级的队列

题目部分 题目支持优先级的队列难度易题目说明实现一个支持优先级的队列&#xff0c;高优先级&#xff08;数字越大&#xff0c;优先级越高&#xff09;先出队列&#xff1b;同优先级时先进先出。 如果两个输入数据和优先级都相同&#xff0c;则后一个数据不入队列被丢弃。 队…
阅读更多...
Windows下Redis配置密码，并设置自启动

Windows下Redis配置密码，并设置自启动

1. 解压redis修改配置文件&#xff08;设置密码&#xff09; 打开Redis的配置文件&#xff0c;通常位于Redis安装目录下的 redis.windows.conf 去掉"requirepass"前注释&#xff0c;修改"foobared"为要设置的密码 requirepass foobared2.注册服务&#x…
阅读更多...
Docker 批量导出/导入镜像

Docker 批量导出/导入镜像

可以编写一个脚本&#xff0c;该脚本循环遍历一个文件夹中的所有镜像存档文件&#xff0c;并使用 docker load 命令加载它们。以下是一个 Bash 脚本示例&#xff1a; 导出&#xff1a; #!/bin/bash### 批量docker镜像的_脚本 # 获取到 "image:tag" 格式的镜像名 IMG…
阅读更多...
Mac 安装psycopg2,报错Error: pg_config executable not found.

Mac 安装psycopg2,报错Error: pg_config executable not found.

在mac 上安装psycopg2的方法&#xff1a;执行&#xff1a;pip3 install psycopg2-binary。 如果执行pip3 install psycopg2&#xff0c;无法安装psycopg2 报错信息如下&#xff1a; Collecting psycopg2Using cached psycopg2-2.9.9.tar.gz (384 kB)Preparing metadata (set…
阅读更多...
9.Vue2-监听属性的用法

9.Vue2-监听属性的用法

题记 vue2监听属性的用法 计数器 使用watch实现计数器&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>实例</title> <script src"https://cdn.staticfile.org/vue/2.4.2/vue.min.js"…
阅读更多...
SpringCloud之Eureka的学习【详细】

SpringCloud之Eureka的学习【详细】

目录 服务架构演变 单体架构 分布式架构 分布式架构需要考虑的问题 微服务 架构比较 微服务技术对比 服务拆分注意事项 案例 服务远程调用 RestTemplate Eureka注册中心 RestTemplate存在的问题 服务调用考虑的问题 Eureka的作用 搭建EurekaServer 服务注册 …
阅读更多...
刷穿力扣（31~60）

刷穿力扣（31~60）

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 31. 下一个排列 排列原理就是 C 中的 next_permutation 函数&#xff0c;生成指定序列的下一个全排列从给定序列的最右端开始&#xff0c;找到第一个满足 nums[i] < nums[i 1] 的元素 nums[i]若找不到这…
阅读更多...
挑战吧，HarmonyOS应用开发工程师

挑战吧，HarmonyOS应用开发工程师

一年一度属于工程师的专属节日1024&#xff0c;多重活动亮相啦~ 参与活动即有机会获得HUAWEI Freebuds 5i 耳机等精美礼品&#xff01; 点击“阅读原文”查看更多活动详情&#xff01;
阅读更多...
算法笔记【8】-合并排序算法

算法笔记【8】-合并排序算法

文章目录 一、前言二、合并排序算法基本原理三、实现步骤四、优缺点分析 一、前言 合并排序算法通过采用分治策略和递归思想&#xff0c;实现了高效、稳定的排序功能。本文将深入探讨合并排序算法的原理、实现步骤&#xff0c;并讨论其优缺点。 二、合并排序算法基本原理 合…
阅读更多...
双向链表的初步练习

双向链表的初步练习

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇: Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”…
阅读更多...
maya中文显示字体改英文

maya中文显示字体改英文

将原来zh_CN 改为en-US
阅读更多...
java集合之List接口实现类常用方法详解

java集合之List接口实现类常用方法详解

目录 一、List集合概述 二、ArrayList类 三、ArrayList常用方法实例 四、LinkedList类 五、Linkedist常用方法实例 一、List集合概述 java.util.List接口继承自Collection接口&#xff0c;是单列集合的一个分支&#xff0c;通常将实现了List接口的对象称为List集合&#x…
阅读更多...
MySQL数据库干货_09—— MySQL中的外键约束(Foreign Key)

MySQL数据库干货_09—— MySQL中的外键约束(Foreign Key)

外键约束(Foreign Key) 添加外键约束 使用DDL语句添加外键约束 ALTER TABLE 表名 ADD CONSTRAINT 约束名 FOREIGN KEY( 列 名 ) REFERENCES 参照的表名(参照的列名);示例一&#xff1a; 创建 departments 表包含 department_id 、department_name &#xff0c;location_id。…
阅读更多...
dbeaver配置es连接org.elasticsearch.xpack.sql.jdbc.EsDriver

dbeaver配置es连接org.elasticsearch.xpack.sql.jdbc.EsDriver

查看目标es服务版本&#xff0c;下载对应驱动
阅读更多...
[UDS] --- CommunicationControl 0x28

[UDS] --- CommunicationControl 0x28

1 0x28功能描述 根据ISO14119-1标准中所述&#xff0c;诊断服务28服务主要用于网络中的报文发送与接受&#xff0c;比如控制应用报文的发送与接收&#xff0c;又或是控制网络管理报文的发送与接收&#xff0c;以便满足一定场景下的应用需求。 2 0x28应用场景 一般而言&#…
阅读更多...
k8s节点已有镜像，但Pod一直在拉取镜像时卡着

k8s节点已有镜像，但Pod一直在拉取镜像时卡着

Pod状态为ContainerCreating&#xff0c;查看日志提示pull镜像&#xff0c;但该镜像在Node节点已经存在&#xff0c;且拉取策略为IfNotPresent 解决&#xff1a;重启kubelet
阅读更多...
迁移学习 - 微调

迁移学习 - 微调

什么是与训练和微调&#xff1f; 你需要搭建一个网络模型来完成一个特定的图像分类的任务。首先&#xff0c;你需要随机初始化参数&#xff0c;然后开始训练网络&#xff0c;不断调整参数&#xff0c;直到网络的损失越来越小。在训练的过程中&#xff0c;一开始初始化的参数会…
阅读更多...
指针相关面试题目

指针相关面试题目

数组名的意义&#xff1a; 1. sizeof( 数组名 ) &#xff0c;这里的数组名表示整个数组&#xff0c;计算的是整个数组的大小。 2. & 数组名&#xff0c;这里的数组名表示整个数组&#xff0c;取出的是整个数组的地址。 3. 除此之外所有的数组名都表示首元素的地址。 下…
阅读更多...
【地理位置识别】IP归属地应用的特点

【地理位置识别】IP归属地应用的特点

IP归属地应用是一类用于确定特定IP地址的地理位置信息&#xff08;通常是城市、地区或国家&#xff09;的工具和服务。以下是IP归属地应用的几个主要特点&#xff1a; 地理位置识别&#xff1a; IP归属地应用主要用于确定IP地址的地理位置。这可以帮助组织更好地了解其网站访问…
阅读更多...
【C语言实现扫雷小游戏——可展开一片】

【C语言实现扫雷小游戏——可展开一片】

文章目录 1. 游戏分析和设计1.1扫雷游戏的功能说明1.2数据结构的分析与设计 2.代码实现2.1基本框架2.2初始化棋盘2.3打印棋盘2.4布置雷2.4统计周围雷的个数2.5排查雷2.6展开一片 3.完成代码3.1game.h3.2 game.c3.3test.c 学习完了函数和数组&#xff0c;让我们做个扫雷小游戏巩…
阅读更多...
最新文章

Copyright @ 2022~2023