第45天：标签的分类和重要属性及常用标签、css介绍及选择器

标签

        标签的分类

        按结构分，html标签可以分为单标签和双标签。

        单标签

        由一个标签组成。例如：

<br/>
<hr/>
<img/>
        双标签

        由开始标签和结束标签两部分构成，例如：

<a></a>
<h></h>
<p></p>
<div></div>

        按照属性分，标签还可以分为块级标签和行内标签，行内标签又叫做内联标签。

        块级标签和行内标签的区别

        块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。

        标签的两个重要属性

        id值

        相当于是人的身份证，一个文档中，id值不能够重复，必须唯一。

        class值

        是可以有多个的，一个标签可以有多个class值，一个class值也可以被多个标签拥有。

        标签的嵌套

  •         标签之间是可以互相嵌套的，标签套标签；
  •         块儿级元素是可以嵌套所有的标签的；
  •         p标签不能够嵌套块儿级元素，但是它可以嵌套行内元素；
  •         行内元素只能嵌套行内元素，不能够嵌套块儿级元素，非写了嵌套，也不报错，只不过是没有效果。

html常用标签

        div标签与span标签

        div标签用来定义一个块级元素，一般用在占位置布局；span标签用来定义内联(行内)元素，一般用在占文本布局。它们并无实际的意义，主要通过CSS样式为其赋予不同的表现。

        img标签

        img标签的写法：

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

        说明：src中可以写内部的图片地址，也可以写外链的地址 。

        a标签

        a标签的功能

        a标签指的是超链接标签，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

        a标签的写法
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
        a标签的href属性

        href属性指定目标网页地址。该地址可以有几种类型：

  •         绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
  •         相对URL - 指当前站点中确切的路径（href="index.htm"）
  •         锚URL - 指向页面中的锚（href="#top"） 
        a标签的target属性
  •         _blank表示在新标签页中打开目标网页
  •         _self表示在当前标签页中打开目标网页 

        列表标签

        列表分为无序列表、有序列表和标题列表。

        无序列表

        无序列表的写法

<ul type="disc"><li>第一项</li><li>第二项</li>
</ul>

        无序列表的type属性

  1. disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式
        有序列表
<ol type="1" start="2"><li>第一项</li><li>第二项</li>
</ol>

        有序列表的type属性:

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马
        标题列表
<dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容1</dd><dd>内容2</dd>
</dl>

        表格标签

        表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

        表格的基本结构
<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表单

        表单用于向服务器传输数据，从而实现用户与Web服务器的交互，表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等，表单还可以包含textarea、select、fieldset和 label标签。

        表单属性
表单属性

属性

描述

accept-charset

规定在被提交表单中使用的字符集（默认：页面字符集）。

action

规定向何处提交表单的地址（URL）（提交页面）。

autocomplete

规定浏览器应该自动完成表单（默认：开启）。

enctype

规定被提交数据的编码（默认：url-encoded）。

method

规定在提交表单时所用的 HTTP 方法（默认：GET）。

name

规定识别表单的名称（对于 DOM 使用：document.forms.name）。

novalidate

规定浏览器不验证表单。

target

规定 action 属性中地址的目标（默认：_self）。

        表单元素
        基本概念

        HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

        所以表单一般用来收集用户的输入信息。

        表单工作原理

        访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
        服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。    

css及选择器

        css介绍

        CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

        每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

        css注释

/*这是注释*/

        css的引入方式

        行内样式

        行内式是在标记的style属性中设定CSS样式。

<p style="color: red">Hello world.</p>
        内部样式

        行内式是在标记的style属性中设定CSS样式。

<head><meta charset="UTF-8"><title>Title</title><style>p{background-color: #2b99ff;}</style>
</head>
        外部样式

        将css写在一个单独的文件中，然后在页面进行引入。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

        基本选择器

        id选择器
#i1 {background-color: red;
}
        类选择器
.c1 {font-size: 14px;
}
p.c1 {color: red;
}
        元素选择器
p {color: "red";}
        通用选择器
* {color: white;
}

        组合选择器

        后代选择器

        li内部的a标签设置字体颜色

li a {color: green;
}
        儿子选择器
div>p {font-family: "Arial Black", arial-black, cursive;
}
        毗邻选择器
div+p {margin: 5px;
}
        弟弟选择器
#i1~p {border: 2px solid royalblue;
}

        属性选择器

        用于选取带有指定属性的元素

p[title] {color: red;
}

        用于选取带有指定属性和值的元素

p[title="213"] {color: green;
}

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

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

相关文章

uniapp-自定义表格，右边操作栏固定

uniapp-自定义表格，右边操作栏固定

uniapp-自定义表格&#xff0c;右边操作栏固定 在网上找了一些&#xff0c;没找到特别合适的&#xff0c;收集了一下其他人的思路&#xff0c;基本都是让左边可以滚动&#xff0c;右边定位&#xff0c;自己也尝试写了一下&#xff0c;有点样式上的小bug&#xff0c;还在尝试修…
阅读更多...
[论文笔记]E5

[论文笔记]E5

引言 今天又带来一篇文本匹配/文本嵌入的笔记：Text Embeddings by Weakly-Supervised Contrastive Pre-training。中文题目是 基于弱监督对比预训练计算文本嵌入。 本篇工作提出了E5模型(EmbEddings from bidirEctional Encoder rEpresentations)。该模型以带弱监督信号的对…
阅读更多...
Zookeeper 集群搭建

Zookeeper 集群搭建

Zookeeper Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目 Zookeeper 工作机制 Zookeeper从设计模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架 一旦这些数据的状态发生变化&#xff0c;Zookeeper就将负责通知…
阅读更多...
微信小程序 跳转客服页面

微信小程序 跳转客服页面

前言 小程序 用户反馈 没有页面设计 可以直接跳转小程序指定客服页面 <button class"contactBtn"open-type"contact" contact"handleContact" session-from"sessionFrom">
阅读更多...
【Tomcat】如何在idea上部署一个maven项目?

【Tomcat】如何在idea上部署一个maven项目?

目录 1.创建项目 2.引入依赖 3.创建目录 4.编写代码 5.打包程序 6.部署项目 7.验证程序 什么是Tomcat和Servlet? 以idea2019为例&#xff1a; 1.创建项目 1.1 首先创建maven项目 1.2 项目名称 2.引入依赖 2.1 网址输入mvnrepository.com进入maven中央仓库->地址…
阅读更多...
【Docker】一些可以直接用的Docker环境

【Docker】一些可以直接用的Docker环境

这里罗列一些打包的镜像&#xff0c;方便直接使用。 cu11.6ubuntu18.04 docker push kevinchina/deeplearning:cu11.6ubuntu18.04 FROM nvidia/cuda:11.6.2-cudnn8-devel-ubuntu18.04 RUN apt-get update && apt-get install -y wget git vim curl RUN wget http://…
阅读更多...
MyBatis实验（四）——关联查询

MyBatis实验（四）——关联查询

前言 多表关联查询是软件开发中最常见的应用场景&#xff0c;多表查询需要将数据实体之间的一对多、多对多、一对一的关系的转换为复杂的数据对象。mybaits提供的association和collection元素&#xff0c;通过映射文件构造复杂实体对象&#xff0c;在构造实体过程中&#xff0…
阅读更多...
Qt：删除QWidget中的所有布局和组件

Qt：删除QWidget中的所有布局和组件

技术要点&#xff1a; 1、调用QWidget::layout()可获取组件的布局&#xff1b; 2、QLayout::count() 可获取布局内的子项数量&#xff0c;包括子布局和子组件&#xff1b; 3、QLayout::itemAt(int index) 可根据索引获取相应的子项&#xff1b; 4、QLayout::removeWidget(Q…
阅读更多...
手机通讯类、ip查询、智能核验、生活常用API接口推荐

手机通讯类、ip查询、智能核验、生活常用API接口推荐

手机通讯类 手机号码归属地&#xff1a;提供三大运营商的手机号码归属地查询。 空号检测&#xff1a;通过手机号码查询其在网活跃度&#xff0c;返回包括空号、停机等状态。 手机在网状态&#xff1a;支持传入三大运营商的号码&#xff0c;查询手机号在网状态&#xff0c;返…
阅读更多...
linux mysql 创建数据库并配置用户远程管理

linux mysql 创建数据库并配置用户远程管理

要在Linux上创建MySQL数据库并配置用户以实现远程管理&#xff0c;您可以执行以下步骤&#xff1a; 1. 登录到MySQL服务器&#xff1a; 在您的Linux终端中&#xff0c;使用以下命令登录到MySQL服务器。您需要提供MySQL服务器的用户名和密码。 mysql -u root -p 输入密码后&a…
阅读更多...
几种软件开发方法对比

几种软件开发方法对比

几种软件开发方法对比 1　综述 软件开发方法是一种使用早已定义好的技术集及符号表示习惯来组织软件生产的过程。 本文对净室方法、结构化方法、面向对象方法、原型法、逆向工程等方法进行梳理&#xff0c;并对各种开发方法特点、优点进行对比。 2　净室方法 2.1　特点 净…
阅读更多...
asp.net旅游交流管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

asp.net旅游交流管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net 旅游交流管理信息系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c# 语言开发 asp.net旅游交流网站1 应用技…
阅读更多...
学术生活|如何有效参与学术会议

学术生活|如何有效参与学术会议

参与学术会议是研究生展示自己、提高学术能力、拓展人脉关系的重要途径。拟参会者可以从研究参加人员名单&#xff0c;找共同点&#xff0c;平等地与大佬展开交流。进行有用的学术社交需要真诚、多积累个人学术作品和发表&#xff0c;并不要仅仅加微信。这些经验将帮助学者更好…
阅读更多...
阿里云的OSS云存储的基本使用

阿里云的OSS云存储的基本使用

阿里云官网&#xff1a;阿里云-计算&#xff0c;为了无法计算的价值 通过阿里云官网&#xff0c;登录进入用户的界面&#xff0c;在搜索框中输入OSS&#xff0c;然后进入阿里云的对象存储OSS的控制台。&#xff08;未开通的开通即可&#xff09; 创建 Bucket 点击【Bucket 列…
阅读更多...
Product owner的职责

Product owner的职责

Product owner就是产品的负责人。Product owner的职责就是使Scrum团队创造增量能够实现产品价值最大化。那么Product owner该如何做呢&#xff1f;作为Scrum团队的一员&#xff0c;他&#xff08;她&#xff09;要为团队提供清晰的产品信息&#xff0c;如产品的愿景、目标。当然…
阅读更多...
执行source命令显示 command not found

执行source命令显示 command not found

1&#xff09;修改完成/etc/profile&#xff0c;使其生效 source /etc/profile -提示找不到命令 试试&#xff1a;A&#xff09;locate source /etc/profile 试试&#xff1a;B&#xff09;usr/bin/source /etc/profile 也就是source命令无法识别而已&#xff0c;至…
阅读更多...
4.数据库的基本操作

4.数据库的基本操作

1.创建数据库 系统安装完成后会有部分默认数据库存在: 注意&#xff1a;mysql的语句每一个输入完后要有分号才能写下一个 这初始的四个库不要删除 其中:mysql数据库中存储用户访问权限。 创建自己的数据库命令如下: create database database_name&#xff08;数据库名字&am…
阅读更多...
Stable Diffusion系列（二）：ControlNet基础控件介绍

Stable Diffusion系列（二）：ControlNet基础控件介绍

文章目录 线稿提取类Canny&#xff1a;边缘检测SoftEdge&#xff1a;软边缘检测Lineart&#xff1a;精细线稿提取Scribble/Sketch&#xff1a;涂鸦提取MLSD&#xff1a;建筑领域的线条提取 3D提取类Normal map&#xff1a;法线贴图Depth&#xff1a;深度计算Segmentation&#…
阅读更多...
linux 出现Access-Your-Private-Data.desktop README.txt

linux 出现Access-Your-Private-Data.desktop README.txt

参考:https://blog.csdn.net/h66295112/article/details/81085643 参考:https://askubuntu.com/questions/71708/how-do-i-open-access-your-private-data-desktop 原因应该是通过terminal修改了ubuntu密码&#xff0c;然后重启 THIS DIRECTORY HAS BEEN UNMOUNTED TO PROTECT…
阅读更多...
Nginx 部署多个安全域名，多个服务【工作记录】

Nginx 部署多个安全域名，多个服务【工作记录】

以下是本人通过Docker 部署的Nginx挂载出来的文件目录 先看下 nginx.conf 配置文件内容&#xff1a;如下 ps&#xff1a;当前文件就是安装后的初始内容&#xff0c;无修改。主要关注最后一行 include /etc/nginx/conf.d/*.conf;表示引入其他目录下的.conf配置文件&#xff1b;…
阅读更多...
最新文章

Copyright @ 2022~2023