[JavaWeb玩耍日记]HTML与CSS快速使用

2024-03-01 08:52

本文主要是介绍[JavaWeb玩耍日记]HTML与CSS快速使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

一.标签

二.指定css

三.css选择器

四.超链接

五.视频与排版

六.布局测试

七.布局居中

八.表格

九.表单

十.表单项


实验项目目录:

 必要文件new.css:

h1 {color:black;
}
span{color: #968D92;;
}
a {color: #000;text-decoration: none;
}
p {text-indent: 50px;line-height: 40px;
}
#pLast {text-align: right;
}

 

 

一.标签

        该文件中的标签/元素:

            标题:h1~6

            图片:img

            分割线:hr

            换行:br

            空格: 

            有序列表:ol+li

            无序列表:ul+li

       

        1.如何设置图片的相对路径?

        ./  代表当前目录,平级可省略

        ../ 代表上一级目录。。

       

        2.width与height常用单位有哪些?分别表示什么意思?

        px:像素

        %:相对于父元素的百分比

       

        3.图片的width与height,如果只设置一个会发生什么?

        图片将会根据其中一个将会等比例缩放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题内容</title>
</head>
<body><img src='img/news_logo.png' width="150px">&nbsp;&nbsp;新浪政务 > 正文<h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1><hr>2023年03月02日 21:50 央视网<br><ol type="1"><li>妙蛙种子</li><li>小火龙</li><li>杰尼龟</li></ol><ul><li>妙蛙种子</li><li>小火龙</li><li>杰尼龟</li></ul>
</body>
</html>

 

 


 

二.指定css

    1.没有任何语义的标签:span

    2.指定css的有哪三种方式?

        1.写在.css文件当中,使用link标签导入

        2.写在head标签的style标签中,格式与.css文件中的一样

        3.在标签中用style属性指定

    3.指定颜色的三种方式:

        1.#968D92

        2.rgb(99, 255, 255)

        3.black

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/new.css">
</head>
<body><h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1><hr><span style="color:#968D92;">2023年03月02日 21:50 央视网</span>
</body>
</html>

 

 


三.css选择器

        1.css属性设置

            字体颜色:color: black;

            字体大小:font-size 14px;

        2.css的三个选择器是哪些?优先级如何?

            元素选择器:指定某标签使用某样式

            class选择器: 使用.xxx作为标识,在标签中使用class属性引用,多个标签可以有相同的class

            id选择器: 使用#id作为标识,id属性不要重复

            css生效优先级:id>class>标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {color: rgb(80, 80, 80);}.cls{color: #968D92;font-size: 14px;}#id{color: black;}</style>
</head>
<body><img src='img/news_logo.png' width="150px">&nbsp;&nbsp;新浪政务 > 正文<h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1><hr><span class="cls">2023年03月02日 21:50</span><span id="id"> 央视网 </span> 
</body>
</html>

 


 

四.超链接

        1.超链接标签:a

        2.css属性-去掉超链接的下划线::text-decoration: none

        3.超链接标签属性:

            指定链接网址:href="https://www.baidu.com/"

            设置新建页面打开:target="_blank"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a{color: #000;text-decoration: none;}</style><link rel="stylesheet" href="css/new.css">
</head><body><img src='img/news_logo.png' width="150px">&nbsp;&nbsp;<a href="https://www.baidu.com/"> 新浪政务 </a> <h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1><hr><span>2023年03月02日 21:50</span><a href="https://www.baidu.com/" target="_blank"> 百度一下 </a> 
</body>
</html>

 

 


 

五.视频与排版

        1.html标签:

            定义段落:p

            文本加粗:b

            视频标签:video

            音频:audio

        2.css属性:

            首行缩进:text-indent: 50px;

            设置行高:line-height: 40px;

            设置对齐方式靠右:text-align: right;

        3.video标签属性:

            点击可播放控件:controls(如果标签属性名和属性值一样,可以只写一个)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HoneyWorks</title><style>a {color: #000;text-decoration: none;}p{text-indent: 50px;line-height: 40px;}#right{text-align: right;}</style><link type="stylesheet" rel="css/new.css">
</head>
<body><h1>新歌发布:いつだって戦ってる</h1><p><b>HoneyWorks</b>(日語:ハニーワークス),簡稱Haniwa(ハニワ)或HW,是日本音樂組織及動畫、漫畫和小說社團。</p><h2>可憐なアイボリー</h2><p>徵選活動的10位合格者,分別為土屋玲実、寺本理绘、高泽百合爱、小坂ねね、永尾梨央、福田阳菜、柴笑あかり、名切翠杏、波左间美晴、ななさ,所屬於TWINPLANET旗下,組成「突破偶像常識」般的偶像團體。由HoneyWorks擔任音樂製作。</p><video src="video/haniwa.mp4" controls width="500px"></video><br><p id="right">信息来源于萌娘百科</p>
</body>
</html>

 


 

六.布局测试

 

            1.css属性:

                背景颜色:background-color: rgb(151, 109, 235);

                内边距:padding: 20px;

                边框:border: 10px solid skyblue;

                外边距:margin: 30px;

            2.布局标签对比:

                div(独占一行,宽度为父内容元素,可以设置宽高)

                span(宽高完全由内容撑开)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HoneyWorks</title><style>.cls{width: 120px;height: 120px;background-color: rgb(151, 109, 235);padding: 20px;border: 20px solid skyblue;margin: 20px;}</style>
</head>
<body><div class="cls">AAAAAAAAAAAAAAAA</div><div class="cls">AAAAAAAAAAAAAAAA</div><span class="cls">AAAAAAAAAAAAAAAA</span><span class="cls">AAAAAAAAAAAAAAAA</span>
</body>
</html>

 

 


 

七.布局居中

            css属性:margin: 0 auto;

                相当于设置值为:0 15% 0 15%;(上右下左)

                设置两个即为同时设置上下和左右,一个则代表四周

                auto代表自动计算(居中)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HoneyWorks</title><style>#center {width: 70%;margin: 0 auto;}</style><link rel="stylesheet" href="css/new.css">
</head>
<body><div id="center"><h1>新歌发布:いつだって戦ってる</h1><hr><span>2023年10月29日 21:50</span><a href="https://www.baidu.com/"> Gom </a><br><br><video src="video/haniwa.mp4" controls width="50%"></video><br><p><b>HoneyWorks</b>(日語:ハニーワークス),簡稱Haniwa(ハニワ)或HW,是日本音樂組織及動畫、漫畫和小說社團。</p><h2>可憐なアイボリー</h2><p>徵選活動的10位合格者,分別為土屋玲実、寺本理绘、高泽百合爱、小坂ねね、永尾梨央、福田阳菜、柴笑あかり、名切翠杏、波左间美晴、ななさ,所屬於TWINPLANET旗下,組成「突破偶像常識」般的偶像團體。由HoneyWorks擔任音樂製作。</p><p id="pLast">信息来源于萌娘百科</p></div>
</body>
</html>

 


 

八.表格

        1.html标签:

            表格标签:table

            表格行标签:tr

            表格第一行单元标签:th(表头单元格,字体加粗与居中)

            表格普通行单元标签:td

        2.table属性:

            表格宽度与表格边框宽度:width,border

            表格单元间隔:cellspacing="0"(默认有间隔,设置为0表示表格之间无间隙)

        3.th/td属性:

            规定占有的行数与列数:colspan="2",rowspan="2"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 100px;}td {text-align: center;}</style>
</head>
<body><table border="1" cellspacing="0" width="500"><tr><th>序号</th><th>LOGO</th><th>品牌名称</th></tr><tr><td>010</td><td><img src="三只松鼠.png" width="60" height="50"></td><td>三只</td></tr><tr><td>009</td><td><img src="优衣库.png" width="60" height="50"></td><td>优衣库</td></tr><tr><td>008</td><td><img src="小米.png" width="60" height="50"></td><td>小米</td></tr></table><br><table border="1" cellspacing="0" width="500"><tr><th colspan="2">LOGO</th><th>品牌名称</th></tr><tr><td>010</td><td><img src="三只松鼠.png" width="60" height="50"></td><td>三只</td></tr><tr><td rowspan="2">009</td><td><img src="优衣库.png" width="60" height="50"></td><td>优衣库</td></tr><tr align="center"><td><img src="小米.png" width="60" height="50"></td><td>小米</td></tr></table>
</body>
</html>

 

 


 

九.表单

        1.表单标签:form(负责输入数据)

            表单属性:

            提交数据方向:action=""(默认提交到当前页面)

            发送表单数据的方式:method="post"

                get(默认值,在url后面新接表单数据)

                post(浏览器检查network,Headers里面显示传输方式,payload显示传输数据)

        2.表单项目标签:input

            决定输入类型:type="submit"(是输入框/选择框/提交按钮/重置按钮)

            指定提交数据的键:name="username"

            在该input标签的按钮标签上显示数据:value="提交"

<!DOCTYPE html>
<html lang="en">
<head><title>Document</title>
</head>
<body><form action="" method="post">用户名:<input type="text" name="username">年龄:<input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>

 

 


 

 

十.表单项

            1.表单项input的type属性的值:

                普通输入框:text

                密码输入框:password

                单选框:radio(input标签中的name需要保持一致 )

                数字|邮箱:number,email

                文件夹 :file

                日期|时间|日期时间:date|time|datetime-local

                隐藏:hidden

                提交|重置|按钮:submit|reset|button

            2.表单中的下拉列表:select标签+option标签

            下拉列表项:select标签中使用option标签

            设置下拉列表的键:

                select标签的属性:name="degree"

            设置下拉列表的列表项的值:

                option标签的属性:value="1"(没有设置value就提交标签中的文字数据数据)

               

            3.表单中的文本域:textarea

            表单项text area标签的属性:

                设置宽高:cols="30" rows="3"

            4.绑定文字与输入选项的标签:label(label包含input标签)

<!DOCTYPE html>
<html lang="en"><head><title>Document</title>
</head>
<!--1.表单项input的type属性的值:普通输入框:text密码输入框:password单选框:radio(input标签中的name需要保持一致 )数字|邮箱:number,email文件夹 :file日期|时间|日期时间:date|time|datetime-local隐藏:hidden提交|重置|按钮:submit|reset|button2.表单中的下拉列表:select标签+option标签下拉列表项:select标签中使用option标签设置下拉列表的键:select标签的属性:name="degree"设置下拉列表的列表项的值:option标签的属性:value="1"(没有设置value就提交标签中的文字数据数据)3.表单中的文本域:textarea表单项text area标签的属性:设置宽高:cols="30" rows="3"4.绑定文字与输入选项的标签:label(label包含input标签)-->
<body><form action="" method="post">姓名:<input type="text" name="username"><br><br>密码:<input type="password" name="password"><br><br>性别:<label><input type="radio" name="gender" value="1"> 男 </label><label><input type="radio" name="gender" value="2"> 女 </label><br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="c++"> c++ </label><label><input type="checkbox" name="hobby" value="python"> python </label><br><br>手机号:<input type="number" name="phoneNumber">邮箱: <input type="email" name="email"><br><br>文件上传:<input type="file" name="image"><br><br>日期: <input type="date" name="date">时间: <input type="time" name="time">日期时间: <input type="datetime-local" name="datetime-local"><br><br>隐藏:<input type="hidden" name="id" value="1"><br><br>学历:<select name="degree"><option value="">请选择</option><option value="1">高中</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select><br><br>自我介绍:<textarea name="textarea" cols="30" rows="3"></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="按钮"></form>
</body>
</html>

 

这篇关于[JavaWeb玩耍日记]HTML与CSS快速使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/761876

相关文章

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Java对异常的认识与异常的处理小结

《Java对异常的认识与异常的处理小结》Java程序在运行时可能出现的错误或非正常情况称为异常,下面给大家介绍Java对异常的认识与异常的处理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参... 目录一、认识异常与异常类型。二、异常的处理三、总结 一、认识异常与异常类型。(1)简单定义-什么是

Python并行处理实战之如何使用ProcessPoolExecutor加速计算

《Python并行处理实战之如何使用ProcessPoolExecutor加速计算》Python提供了多种并行处理的方式,其中concurrent.futures模块的ProcessPoolExecu... 目录简介完整代码示例代码解释1. 导入必要的模块2. 定义处理函数3. 主函数4. 生成数字列表5.

Python中help()和dir()函数的使用

《Python中help()和dir()函数的使用》我们经常需要查看某个对象(如模块、类、函数等)的属性和方法,Python提供了两个内置函数help()和dir(),它们可以帮助我们快速了解代... 目录1. 引言2. help() 函数2.1 作用2.2 使用方法2.3 示例(1) 查看内置函数的帮助(

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》:本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量:定义、赋值自定义变量:引用、修改、删

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.