【JavaWeb】day01-HTML&CSS

这篇具有很好参考价值的文章主要介绍了【JavaWeb】day01-HTML&CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

day01-HTML&CSS

HTML

  • 图片标签:<img>

    • src:指定图像URL(绝对路径/相对路径)
    • width:图像宽度(像素/相对于父元素的百分比)
    • height:图像高度(像素/相对于父元素的百分比)
  • 标题标签:<h1> - <h6>

  • 水平线标签:<hr>

<body>
    <!-- 
    img标签:
        src:图片资源路径
        width:宽度(px:像素; %:相对于父元素的百分比)
        height:高度(px:像素; %:相对于父元素的百分比)

    路径书写方式:
        绝对路径:
            1.绝对磁盘路径:D:\Desktop\JavaWeb学习\HTML\img\news_logo.png
                           <img src="D:\Desktop\JavaWeb学习\HTML\img\news_logo.png">
            2.绝对网络路径:https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
        相对路径:
            ./  当前目录
            ../ 上一级目录    
       -->  
    <img src="img/news_logo.png"> 新浪政务 > 正文
    
    <h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1>

    <hr>
    2023年03月02日 21:50 央视网
    <hr>
    
</body>

【JavaWeb】day01-HTML&CSS,JavaWeb,html,css,前端

  • 超链接:<a>
    • href:指定资源访问的url
    • target:指定在何处打开资源链接
      • _self:默认值,在当前页面打开
      • _blank:在空白页面打开
<a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>

<style>
    a:hover {
        color: #FF6600; 
        /* 鼠标悬停时改变颜色 */
    }

    a {
        color: black;
        text-decoration: none;
        /* 去除下划线 */
    }
</style>
  • 视频标签:<video>

    • src:规定视频url
    • controls:显示播放控件
    • width:播放器宽度
    • height:播放器高度
  • 音频标签:<audio>

    • src:规定音频url
    • controls:显示播放控件
  • 段落标签:<p>

  • 文本加粗标签:<b>/<strong>

<!-- 视频 -->
<video src="video/1.mp4" controls width="950px"></video>
<!-- 音频 -->
<audio src="audio/1.mp3" controls></audio>
<style>
    p {
        text-indent: 2em;
        /* 设置段落首行缩进两个字符 */
        line-height: 40px;
        /* 设置行高为40px */
    }
</style>
  • 表格标签

【JavaWeb】day01-HTML&CSS,JavaWeb,html,css,前端

<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>

【JavaWeb】day01-HTML&CSS,JavaWeb,html,css,前端

  • 表单标签

    • <input>:定义表单项,通过type属性控制输入形式

    • <select>:定义下拉列表

    • <textarea>:定义文本域

    • action:规定当提交表单时向何处发送表单数据,URL

    • method:规定用于发送表单数据的方式。GET、POST

<body>

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"><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="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <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="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>

【JavaWeb】day01-HTML&CSS,JavaWeb,html,css,前端

CSS

引入方式

  • 行内样式
  • 内嵌样式
  • 外联样式
<head>
    <title>焦点访谈</title>
    <!-- 方案二:内嵌样式 -->
    <style>
        h1 {
            color: #4D4F53;
        }
    </style> 

    <!-- 方案三:外联样式 -->
    <link rel="stylesheet" href="css/news.css">
</head>
<body>  
    <!-- 方案一:行内样式 -->
    <h1 style="color: red;">焦点访谈:中国底气 新思想夯实大国粮仓</h1>
</body>

颜色表示

  • 关键字:red、green
  • rgb:rgb(255,0,0)、rgb(111,222,233)
  • 十六进制:#ff0000、#cccccc、#ccc
h1 {
            /* color: red; */
            /* color: rgb(0, 0, 255); */
            color: #4D4F53;
}

CSS选择器

  • 元素选择器

【JavaWeb】day01-HTML&CSS,JavaWeb,html,css,前端

  • id选择器

【JavaWeb】day01-HTML&CSS,JavaWeb,html,css,前端

  • 类选择器

【JavaWeb】day01-HTML&CSS,JavaWeb,html,css,前端

  • 优先级:id > 类 >元素

盒子模型

组成: 内容(content)、内边距(padding)、边框(border)、外边距(margin)

【JavaWeb】day01-HTML&CSS,JavaWeb,html,css,前端

属性:

  • width:设置宽度
  • height:设置高度
  • border:设置边框的属性,如:1px solid #000;
  • padding:内边距
  • margin:外边距
  • 注意:如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上 –位置,如:padding-top、padding-left、padding-right …

布局标签

div标签:

  • 一行只显示一个(独占一行)
  • 宽度默认是父元素的宽度,高度默认由内容撑开
  • 可以设置宽高(width、height)

span标签:文章来源地址https://www.toymoban.com/news/detail-764176.html

  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高(width、height)
    外边距

布局标签

div标签:

  • 一行只显示一个(独占一行)
  • 宽度默认是父元素的宽度,高度默认由内容撑开
  • 可以设置宽高(width、height)

span标签:

  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高(width、height)

到了这里,关于【JavaWeb】day01-HTML&CSS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Javaweb之HTML,CSS的详细解析

    场景: 在网页中以表格(行、列)形式整齐展示数据,我们在一些管理类的系统中,会看到数据通常都是以表格的形式呈现出来的,比如:班级表、学生表、课程表、成绩表等等。 标签: table : 用于定义整个表格, 可以包裹多个 tr, 常用属性如下: border:规定表格边框的宽

    2024年02月05日
    浏览(37)
  • JavaWeb(4)——HTML、CSS、JS 快速入门

     数组筛选(查找,将原来数组中的某些数据去除) 数组筛选(查找,数组中的最大和最小值) 数组修改(数组中每个元素末尾都加新元素)  数组修改(数组中每个元素开头都加新元素)  数组删除指定元素 冒泡排序 这段代码实现了一种冒泡排序算法: 首先,定义了一个

    2024年02月17日
    浏览(37)
  • JavaWeb(5)——HTML、CSS、JS 快速入门

    目录 一、JavaScript 对象  二、JavaScriptBOM对象和DOM对象  三、JavaScript 事件监听 事件绑定 常见事件 案例练习  四、JavaScript 内存分配机制 五、JavaScript 函数作用域  六、JavaScript 函数构造器            所以说对象的赋值(也可以用这种方式查询)有两种方式,一个是 .

    2024年02月16日
    浏览(36)
  • JavaWeb(3)——HTML、CSS、JS 快速入门

    • 赋值运算符( = ) • 一元运算符 (自增和自减,并明白区别) 众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符。而一元、二元和三元运算符是根据操作数(表达式)的个数来进行分类的。 一元运算符只需要一个操作数。

    2024年02月16日
    浏览(34)
  • JavaWeb(1)——HTML、CSS、JS 快速入门

            JavaWeb 是使用 Java 技术来构建 Web 应用程序的一种方法。         HTML(超文本标记语言,负责网页的结构)是一种用于创建网页结构和内容的标记语言。它由一系列标签组成,每个标签都有特定的功能。开发人员可以使用 HTML 来定义页面的结构、文本、图像、

    2024年02月15日
    浏览(37)
  • JavaWeb(2)——HTML、CSS、JS 快速入门

    目录 一、JavaScript 结构 💬 什么是BOM,什么是DOM?👭 BOM(浏览器对象模型 👨‍💻): DOM(文档对象模型 🏡): 总结下来就是 🌱  : 二、JavaScript 书写位置 🐟 三、JavaScript 注释 🔥 四、JavaScript 输入输出语法 🤖  五、JavaScript 变量 💎  六、JavaScript 变量命名 ✨

    2024年02月15日
    浏览(51)
  • javaweb个人主页设计(html+css+js)

    目录 1 前言和要求 1.1 前言 1.2 设计要求 2 预览 2.1 主页页面 2.2 个人简介 2.3 个人爱好 2.4 个人成绩有代码,但是图片已省略,可以根据自己情况添加 2.5 收藏夹 3 代码实现  3.1 主页 3.2 个人简介 3.3 个人爱好 3.4 个人成绩(根据自己的情况添加) 3.5 收藏夹 4 可能要用的图片,

    2024年02月09日
    浏览(84)
  • [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript

    目录 一 特色  二  收获​编辑  三 什么是web? 四 网站的工作流程  五 web网站的开发模式​编辑  六 web开发课程学习安排  七、初始web前端  八 HTML、CSS 8.1 什么是HTNLCSS(w3cschool) 8.2 HTML快速入门 8.3 VS Code开发工具 8.3.1  插件  8.3.2 主题(改变颜色) 8.3.3 设置 8.4 基础标签样

    2024年02月12日
    浏览(42)
  • 【01】html&css&git&网络基础知识

    一图胜千言 使用 border-box 控制尺寸更加直观,因此,很多网站都会加入下面的代码 颜色的 alpha 通道标识了色彩的透明度,它是一个 0~1 之间的取值,0 标识完全透明,1 标识完全不透明 在 css 中使用 rgba 可以为颜色添加 alpha 通道 rgba 还可以有多种书写方式,例如 rgba(0, 0, 0,

    2024年03月21日
    浏览(31)
  • 前端基础HTML、CSS--6(CSS-3)

    1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级。 1.1层叠性 相同选择器给设置相同的样式 ,此时一个样式就会 覆盖(层叠) 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则: ·样式冲突,遵循的是 就近原则 ,哪个样式离结构近

    2023年04月08日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包