div独占一行 html_web前端基础-HTML及CSS选择器

HTML及CSS选择器

  • 一、html基本结构
  • 二、html标签
    • 1、标题标签
    • 2、a标签
    • 3、img标签
    • 4、div和span标签
    • 5、列表标签
    • 6、表格标签
    • 7、form表单
    • 8、select下拉框标签
    • 9、textarea标签
  • 三、CSS
    • 1、css样式引入方式
    • 2、标签嵌套
    • 3、css选择器

一、html基本结构

html是一种超文本标记语言,进行网页页面的文本编辑
html注释写法:

基本结构如下:

                                                      我是标题
9a37ffcc348a658368d47c12904818ac.png

link图标:
标题图标:
写法:

    我是标题
06e89a9d566fbf49a8937d769edc9a23.png

二、html标签

标签写法分类:
1、全封闭标签,如

xxx


标签属性:

xxx

xx:属性名 ss:属性值
2、自封闭标签:

1、标题标签

-
:表示一级标题到六级标题
    我是标题公司Asir     Bsir     

小王

小李

小赵


小周
小李

页面效果:

2bb9d49df24552b33630c30f337acc87.png

2、a标签

跳转对应网址的页面
未访问之前是蓝色字体,访问后变紫色

# 要a标签的效果,但不刷新或跳转页面:
xxx
xxx

锚点:
页面内容进行跳转
标签设置id属性=值(xx),a标签href属性的值写法href=’#xx’,点击这个a标签就能跳转到id属性为xx的那个标签所在位置

    我是标题
顶部位置
公司potal百度 potalpotal回到顶部

页面效果:

b7dc48de915b669c216305205fc87199.png

可通过第二个按钮跳转到百度:

f8baa3da7ebac9b8d04c01a0ecf0a522.png

3、img标签

img标签:页面插入图片
src属性:图片路径 必须写
alt属性:图片加载失败或者正在加载时提示的内容
title属性:鼠标悬浮时显示的内容,不是img标签独有的
width:设置图片宽度(建议用css设置)
height:设置图片高度(建议css设置)

    我是标题

页面效果:

0b3e451a7b38fdeb5265595f2339de6e.png

4、div和span标签

没有任何文本修饰效果:

    我是标题小王

小李

小文
小林

页面效果:

f0adde6e40b35526e317ba8ce7665f46.png

扩展:标签分类
块级标签(行外标签):独占一行,h1-h6、p、br、hr、div、ul、li
块级标签可以包含内联标签,以及某些块级标签
内联标签(行内标签):不独占一行,img/a/span,只能包含内联标签,不能包含块级标签

5、列表标签

1)ul标签:
写法:

内容1内容2......

2)ol标签
写法:

内容1内容2......

3)dl标签

无空位内容有空位内容......

页面效果:

4c7640fbbadb077360b86e0fc45c2bc0.png

6、表格标签

可以在网页中生成表格
写法:

表头1表头2...内容1内容2...

colspan:横行合并
rowspan:纵列合并
示例

    我是标题
名称 年龄 爱好 小王 18 篮球 小李 20 游泳 小王

页面效果:

1151890cbcc6a9bd0ff983413828c033.png

7、form表单

action属性:指定提交路径,提交到哪里去
form表单标签会将嵌套在form标签里面的输入框的数据全部提交到指定路径

input标签 输入框:
input标签,如果要提交数据,一定要写name属性

普通文本输入框 密文输入框 提交按钮 触发form表单提交数据动作 重置按钮 清空输入内容 不会触发form表单提交数据的操作 时间日期输入框 文件选择框 纯数字输入框

单选框:
多选框:

单选框和多选框请务必加name属性和value默认值
单选和多选value默认值可将存储的数据变短

    我是标签    

欢迎来到xxx公司

用户名:
密码:
性别: 女 男
爱好: 篮球 足球 乒乓球 数字:

页面效果:

c43d459a83ff7dc5a7b0556035033f2a.png

8、select下拉框标签

示例:

    我是标签选择性别:男女
喜欢的明星:明星1明星2明星3

页面效果:

48298368323878e7e60e329be9cf6086.png

9、textarea标签

多行文本输入框

    我是标签请输入内容:

页面效果:

f2e36f9fb42c7c55e9865c2449e2c45e.png

三、CSS

1、css样式引入方式

第一种:
直接在头部添加

    我是标题
hello
How are you?

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

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

相关文章

监控系统服务器如何配置,监控系统服务器的配置

监控系统服务器的配置 内容精选换一换裸金属服务器安装Agent后,裸金属实例出现在云监控服务管理控制台的“主机监控 > 弹性云服务器”列表中。主机监控Agent根据169.254.169.254提供的服务来判断是弹性云服务器还是裸金属服务器。如果该地址的路由被修改&#xf…

解析markdown_markdown-it 原理浅析

前言最近使用 markdown-it 比较多,也开发了一些插件,在这个过程中对源码进行了研读,最终写了这篇文章。需要了解细节的读者可以自行阅读文档。此文分为两个部分:原理剖析和原理应用(编写插件)。markdown-it…

获取网站服务器数据库,利用XmlHttp获取服务器数据库数据以表格的方式返回客户的代码示例...

以下示例,不使用任何的无刷新组件,直接通过XmlHttp完成!一、JS文件代码// JScript 文件二、ASHX文件代码using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.IO;using Syst…

第一次失效_特斯拉螺栓腐蚀失效分析_搜狐汽车

本文车型速览除了文章作者的主观观点外,我们正尝试基于全网可查的客观数据,为您提供中立、客观的参考依据:本文部分车型速览:展开微信扫码,直接一次看完附近所有城市低价(附近城市均有经销商可售卖至本市) 提交成功&am…

c#计算长方形的周长和面积公式_Java面向对象练习题之计算圆的面积和周长

创建一个圆Circle类。为该类提供一个变量r表示半径,一个常量PI表示圆周率;同时为该类提供两个方法:方法一用于求圆的面积,方法二用于求圆的周长;为该类提供一个无参的构造方法,用于初始化r的值为4。在main方…

简单计算机面试题库及答案_试讲可以看教案吗?必看的面试考前问题解答

“皮卡皮卡!”教资面试倒计时4天啦快使尽全力发出你的十万伏特胜利就在前方部分小伙伴们还对教资面试存在种种疑惑下面牛奶为大家一一作出解答教师资格面试题目是如何确定的?答:面试题目分为试讲题目、结构化题目和答辩题目。▲试讲题目是考生在备课前&…

python输出读取的空格数目_Python 3基础教程: 输入和输出具体代码实例

在前面文章中,我们其实已经接触了 Python 的输入输出的功能。本章节我们将具体介绍 Python 的输入输出。输出格式美化Python两种输出值的方式: 表达式语句和 print() 函数。(第三种方式是使用文件对象的 write() 方法; 标准输出文件可以用 sys.stdout 引用。)如果你…

点击button后改变文字_27. 教你零基础搭建小程序:小程序的常见组件—button

筒子们,这一章接着讲Button 标签。开放能力的属性button标签的开放能力是指open-type 属性。其中,这个属性的合法值包括如下:这一部分呢,需要分为两个方式来演示。一是可在模拟器中直接看效果; 二是要通过真机调试看效…

语言把数据写入csv文件_把JSON/CSV文件打造成MySQL数据库

生活中,你我一定都看到过这种「xx元爆改出租屋」,「爆改小汽车」之类的文章,做为IT人,折腾的劲头一点也不差。软件开发过程中,你是否有时候,会拿着业务提供的一个个CSV或者JSON的数据文件,写个解…

SLF4JLoggerContext cannot be cast to LoggerContext

org.apache.logging.slf4j.SLF4JLoggerContext cannot be cast to org.apache.logging.LoggerContexthive启动时,一直报错,原因是 hadoop与hive的jar包冲突,下载对应版本的hadoop和hive 安装包,检查log相关的jar包是否对应,并进行 log4j 或 sjf4j 包的 排除和添加。

pacs定位线_C#开发PACS医学影像处理系统(十五):Dicom影像交叉定位线算法

1.定位线概念:某个方位的影像在另一个方向的影像上的投影相交线,例如横断面(从头到脚的方向)在矢状面(从左手到右手)上的影像投影面交线。举个例子:右边的是MR(核磁共振)的某一帧切片,这是从头开始扫描,扫描到眼睛这个…

图片饱和度_摄影后期完全调色指南(三):饱和度与自然饱和度有什么区别?...

泼辣年度大课 | 摄影后期完全调色指南(一)摄影后期完全调色指南(二):详解色温与色调在上一篇教程里面我们讲到了全局色彩调整中的色温和色调工具,今天来讲解剩下的两个工具:饱和度与自然饱和度工具,这两个工具使用的频率也非常的高…

2023年大模型回顾

大家好,这里是最佳拍档,我是大飞 一年前的今天,ChatGPT发布 仅仅花了5天时间 ChatGPT的注册用户数量达到100万 创了互联网历史记录 两个月后,2023年1月 ChatGPT的月活用户数量达到1亿 火箭般蹿升的用户数量 预示了今年生成…

windows 下的文件对比工具

deffinity,一款专用于文件对比的工具,安装简单,使用方便 下载链接如下: https://www.appinn.com/diffinity-for-win/

18c分布式事务 oracle_浅谈ORACLE的分布式事务

平台环境: suk: linux as4 oracle 9201 primary: windows xp oracle 10.2.0.3 首先在primary数据库上建立测试数据。 SQL create table test as select * from dba_objects; Table created. SQL insert into test select * from test; 9873 rows created. SQ平台环境…

shell 中去掉末尾换行符

# 多行为一行 echo "aaa\ bbb\ ccc" # 结果 #aaabbbccc#多行还是多行 echo "aaa bbb ccc" #结果 #aaa #bbb #ccc

python五子棋游戏15*15_在STM32上运行五子棋小游戏(15x15)

本程序算法资料来自下面网站.----https://www.cnblogs.com/buptzym/archive/2012/06/20/2556052.html----先定义一个数组 用于存储整个棋盘的数据.u16 ChessBoard[15][15];//棋盘数据.一.己方下棋 基础函数.1.在屏幕上显示出来一个15*15的棋盘.void DrawTable(void)//画出15x15…

点名册_骑士新书《万界点名册》十万收藏火爆气势不减当年修真聊天群

最近好多人都在讨论圣骑士的传说新书《万界点名册》,新书还没有发布,起点就给了闪屏推荐,引得的很多读者心痒痒的想要看看到底是怎样的神作。所以才发布两万多字的新书投资人就快一万人了,收藏也突破了十万。这速度好像是坐了火箭…

hadoop重启后 9000端口不在

原因可能是hadoop的namenode还未启动成功,可以去查看namenode的日志,是否有错误日志,如果没有错误日志,耐心等待namenode的恢复