Web学习日记Day01

最新推荐文章于 2022-11-29 15:06:45 发布
最新推荐文章于 2022-11-29 15:06:45 发布
阅读量139 收藏
点赞数
文章标签： 前端 学习 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43121885/article/details/126489739
版权

课程介绍：

  • Web前端： 学习如何搭建页面

  • 数据库： 学习如何对数据进行增删改查

  • SpringBoot： 学习如何接收客户端请求以及如何对请求做出响应

HTML

  • HyperTextMarkupLanguage： 超文本标记语言

  • 超文本： 不仅仅是纯文本还包括字体效果和多媒体（音频视频图片）

  • 标记语言特点：

<开始标签 属性名="属性值">标签体</结束标签>

  • 作用： 搭建页面结构和内容 ，相当于盖房子（毛坯房）

  • 学习HTML主要学习的就是有哪些标签，以及标签的使用方式。

文本相关标签

  1. 内容标题： h1-h6

独占一行, 自带上下间距, 字体加粗

  1. 换行: br

  2. 段落标签p

独占一行, 自带上下间距

  1. 水平分割线:hr

  2. 加粗b

  3. 斜体i

  4. 下划线u

  5. 删除线s

列表标签

  1. 无序列表: ul和 li 组合

  2. 有序列表: ol和li组合

  3. 列表嵌套: 有序和无序可以任意无限嵌套

图片标签

  • src: 资源路径

    • 相对路径:访问站内资源使用

      • 和页面同级目录: 直接写图片名

      • 在页面的上级目录: ../图片名

      • 在页面的下级目录: 文件夹名/图片名

    • 绝对路径:访问站外资源使用, 称为图片盗链,有找不到图片的风险

  • alt: 当图片不能正常显示时显示的文本

  • title:图片标题 当鼠标悬停时显示的文本

  • width/height:设置宽高, 只设置宽度高度会自动等比例缩放, 两种赋值方式:1.像素 2.百分比

超链接a

  • href: 作用类似图片标签的src

  • a标签包裹文本为文本超链接 , 包裹图片为图片超链接

  • 页面内部跳转, 在目的地元素里面添加id属性, 然后在超链接的href属性中写#id 这样点击时就可以跳转到目的地元素的位置

表格标签table

  • 相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题

  • 相关属性:border 边框 colspan跨列 rowspan跨行

表单form

  • 作用: 获取用户输入的内容并提交给服务器

  • 学习表单主要学习的就是表单中有哪些控件, 包括:文本框,密码框,单选,多选,下拉选,日期,文件等

  • 相关代码:

<form action="http://www.baidu.com">
    <!--placeholder占位文本
    maxlength最大字符长度
    value设置控件的值
    readonly只读-->
    用户名:<input type="text" name="username" maxlength="5" value="tom"
               readonly placeholder="请输入用户名"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    <!--value设置提交的值,如果不设置则提交on checked设置默认选中-->
    性别:<input type="radio" name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w" id="r2">
    <label for="r2">女</label><br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <select name="city">
        <!--value设置提交的内容,如果不写则提交标签体的内容
        selected设置默认选中-->
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
    </select><br>
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset" value="重置按钮">
    <!--自定义按钮-->
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">注册</button>
    <button type="reset">重置按钮</button>
    <button type="button">自定义按钮</button>
</form>

分区标签

  • 作用: 可以理解为一个容器, 对多个有相关性的标签进行统一管理

  • 常见的分区标签包括:

    • div: 独占一行

    • span: 共占一行

  • HTML5标准中新增的专门用于做页面布局的分区标签作用和div一样都是独占一行的:

    • header 头

    • main 主体

    • footer 脚

    • section 区域

    • nav 导航

CSS层叠样式表

  • Cascading Style Sheet, 作用: 美化页面, 相当于装修

如何在HTML页面中添加CSS样式代码

  • 三种引入方式:

    • 内联: 在标签的style属性中添加样式代码, 弊端:不能复用

    • 内部: 在head标签里面添加style标签,在标签体内通过选择器找到需要添加样式的元素,然后再添加样式代码, 这种用法可以复用,但是只能当前页面复用,不能多页面复用

    • 外部: 在单独的css样式文件中写样式代码,在HTML页面中通过link标签引入, 可以实现多页面复用

选择器

  • 作用: 用来查找元素的, 找到之后才能添加样式

  1. 标签名选择器: 通过标签的名称选择页面中所有同名元素

  • 格式: 标签名{样式代码}

  1. id选择器: 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复

  • 格式: #id{样式代码}

  1. 类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择

  • 格式: .class{样式代码}

  1. 分组选择器: 将多个选择器合并成一个选择器

  • 格式: div,#id,.class{样式代码}

  1. 属性选择器: 通过元素的属性选择元素

  • 格式: 标签名[属性名='值']{样式代码}

  1. 任意元素选择器: 选取页面中所有标签

  • 格式: *{样式代码}

代码案例：

1.文本相关标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>内容<br>标题1</h1>
<h2 align="center">内容标题2</h2>
<h3 align="right">内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容标题6</h6>
<hr>
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>

<h1>列表标签</h1>
<h2>无序列表</h2>
<ul><!--unordered  list-->
    <li>刘备</li><!--list item-->
    <li>诸葛亮</li><li>孙尚香</li><li>刘禅</li><li>关羽</li>
</ul>
<h2>有序列表</h2>
<ol>
    <li>Java基础</li>
    <li>Java API</li>
    <li>Web前端</li>
</ol>
<h2>列表嵌套</h2>
<ol>
    <li>凉菜
        <ul>
            <li>拍黄瓜</li><li>花毛一体</li>
        </ul>
    </li>
    <li>炒菜
        <ul>
            <li>宫保鸡丁</li><li>木须肉</li>
        </ul>
    </li>
</ol>
</body>
</html>

2.图片标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--src资源路径:
    相对路径: 访问站内资源时使用
        1. 资源和页面在同一目录:直接写图片名
        2. 资源在页面的上级目录: ../图片名
        3. 资源在页面的下级目录:文件夹名/图片名
    绝对路径:访问站外资源时使用, 也称为图片盗链,有找不到图片的风险
    alt:当图片不能正常显示时显示的文本
    title:图片标题 悬停在图片上显示的内容
    width/height:设置宽高
        1. 像素
        2. 百分比
        如果只设置宽度高度会等比例缩放
    -->
<img src="aa.png" alt="传奇哥的靓照">
<img src="../b.jpg" title="你看我美吗?" width="50%">
<img src="abc/c.jpg" width="300" height="300">
<img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg">
</body>
</html>

3.超链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--href资源路径 类似图片标签的src属性-->
<a  href="http://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.png">超链接3</a>
<a href="http://www.tmooc.cn">
    <img src="a.png" alt="">
</a>
<img src="../imgs/a.jpg" alt="">
<img id="top" src="../imgs/b.jpg" alt="">
<img src="../imgs/c.jpg" alt="">
<img src="../imgs/d.jpg" alt="">
<img src="../imgs/e.jpg" alt="">
<img src="../imgs/f.jpg" alt="">
<a href="#top">回到顶部</a>
</body>
</html>

4.表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1"><!---->
  <tr><!--table row 表示行-->
    <!--colspan跨列-->
    <td colspan="2" align="center">1-1</td><!--table data表格数据 表示列-->
    <!--rowspan跨行-->
    <td rowspan="2">1-3</td><td rowspan="3">1-4</td>
  </tr>
  <tr>
    <td>2-1</td><td>2-2</td>
  </tr>
  <tr>
    <td align="center" colspan="3">3-1</td>
  </tr>
</table>
<table border="1">
  <caption>购物车</caption>
  <tr><!--table head 表头  加粗并居中-->
    <th>编号</th><th>名称</th><th>价格</th>
  </tr>
  <tr>
    <td>1</td><td>康师傅冰红茶</td><td>3元</td>
  </tr>
  <tr>
    <td>2</td><td>小茗同学</td><td>6元</td>
  </tr>
</table>
</body>
</html>

5.form表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--action设置提交地址-->
<form action="http://www.baidu.com">
    <!--placeholder占位文本
    maxlength最大字符长度
    value设置控件的值
    readonly只读-->
    用户名:<input type="text" name="username" maxlength="5" value="tom"
               readonly placeholder="请输入用户名"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    <!--value设置提交的值,如果不设置则提交on checked设置默认选中-->
    性别:<input type="radio" name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w" id="r2">
    <label for="r2">女</label><br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <select name="city">
        <!--value设置提交的内容,如果不写则提交标签体的内容
        selected设置默认选中-->
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
    </select><br>
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset" value="重置按钮">
    <!--自定义按钮-->
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">注册</button>
    <button type="reset">重置按钮</button>
    <button type="button">自定义按钮</button>
</form>
</body>
</html>

6.分区标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--每个div独占一行，所有span共占一行-->
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

7.CSS引入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*先通过选择器找到页面中的元素,然后再添加样式*/
        h2{
            color: blue;
        }
    </style>
    <!--rel关系 引入的文件和页面之间的关系-->
    <link rel="stylesheet" href="my.css">
</head>
<body>
<!--内联样式, 弊端不能复用-->
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>

8.选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        #p1{color: red}
        /*类选择器*/
        .c1{color: blue}
        /*分组选择器*/
        h3,#p1,.c1{background-color: yellow}
        /*属性选择器*/
        input[type='text']{background-color: red}
        input[type='password']{color: green}
        /*任意元素选择器*/
        *{
            /*边框:粗细  样式   颜色*/
            border: 1px solid red;
        }
    </style>
</head>
<body><!---->
    <input type="text">
    <input type="password">
    <h3>我是h3</h3>
    <p id="p1">苹果</p><p class="c1">香蕉</p><p>橘子</p>
    <div>冰箱</div>
    <div class="c1">洗衣机</div>
    <div>电视</div>
</body>
</html>
专注摸鱼的汪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
黑马机器学习day01
08-08
黑马机器学习day01
Java的网页页面的设计工具1
xiugouspring的博客
08-23 349
内部: 在head标签里面添加style标签,在标签体内通过选择器找到需要添加样式的元素,然后再添加样式代码, 这种用法可以复用,但是只能当前页面复用,不能多页面复用。类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择。外部: 在单独的css样式文件中写样式代码,在HTML页面中通过link标签引入, 可以实现多页面复用。学习表单主要学习的就是表单中有哪些控件, 包括:文本框,密码框,单选,多选,下拉选,日期,文件等。
包含html语言的超链接标记的网页_HTML入门
weixin_39838231的博客
12-13 333
点击触发一什么是HTML文件？HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术(如：脚本语言、公共网关接口、组件等)，可以创造出功能强大的网页。因而，超级文本标记语言是万维网(Web)编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，...
怎么做成html网页链接,HTML网页超链接标记
weixin_29602351的博客
05-30 318
HTML网页超链接标记互联网 发布时间：2008-10-17 18:57:21 作者：佚名 我要评论HTML网页超链接标记学习教程链接标记的属性链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址，在英文中被称作url(Uniform Resource Locator：通用资源标示符)HTML...
《HTML CSS JavaScript网页制作》第四章-用HTML创建超链接和表单
编程小鹏的博客
04-22 2045
《HTML CSS JavaScript网页制作》第四章-用HTML创建超链接和表单 学习笔记
html打开网页过场动画_HTML是什么？
weixin_39948442的博客
11-14 169
说起网页技术,今天给大家介绍一个网页开发中的主要技术——HTML。HTML是什么呢？HTML官方定义为超文本标记语言，全称为Hypertext Markup Language。HTML是Web的核心语言，它是使用标记来描述网页的一种语言，它的语法简单、结构清晰。所谓HTML页面就是我们常说的网页，也会称之为HTML文档。HTML文档中包含HTML标签和文本内容，浏览器会读取HTML文档，并将它们以...
Web前端基础day01.zip
08-09
CSS 学习如何美化页面 (装修) JavaScript 学习如何给页面添加动态效果 jQuery JS语言框架,简化原生JS开发 Bootstrap 前端框架对html/css/JavaScript/jQuery进行封装,目的是提高前端页面的开发效率
WebAPI-day-01.md
10-23
自给学习整理的笔记，即可以为自给提供复习，也可以为大家提供帮助。喜欢请关注
day01-SpringCloud01
12-13
day01-SpringCloud01
学习JavaEE的day01
最新发布
02-28
JDK安装包、md编译工具、Java安装手册、代码、理解图
包含html语言的超链接标记的网页_html的发展史
weixin_39725873的博客
12-13 199
HTML发展史1. HTML简介HTML(Hyper Text Markup Language)中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML不是一种编程语言，而是一种标记语言，它提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。HTML之所以称为超文本标记语言，不仅是因为他通...
html超链接怎么新建窗口打开,html超链接新窗口打开怎么写
weixin_29094775的博客
06-04 4034
扩展回答谁知道超链接新窗口打开的技巧有哪些打开网页文件,在a里添加="new"。 2.在IE里测试效果。 3.点击链接,新打开窗口加载网页内容览器总在一个新打开、未命名的窗口中载入目标文档。 _sel 这个目标的值对没有指定目标的 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的哪位亲晓得ie怎么打开新窗口1丶打开IE按ALT X,选择下面Inte...
HTML页面制作标签学习
jerry_wzj_的博客
06-22 1122
HTML 1.快速入门： 语法 html文档后缀名.heml或者.htm 标签分为 围堵标签：有开始标签和结束标签。如< html>< /html> 自闭和标签：开始标签和结束标签在一起。如< br/> 标签可以嵌套： 需要正确嵌套，不能你中有我，我中有你 错误：< a>< b>< /a>< /b> 正确：< a>< b>< /b>< /a> 在开始标签中可
web HTML 列表 表单
qq_45858803的博客
03-14 219
图示概念 有序列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表
HTML列表制作讲解—零基础自学网页制作
web前端入门基础进阶教程-htmlcssjs
05-25 393
有序列表 经过之前关于表格、表单的学习后，再来学习列表，就显得非常的简单和容易理解了。 学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零基础的初学者，第一次看我的教程，如果时间允许的话，请务必从目录中找寻第一篇，循序渐进的学习。 列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。 首先介绍有序列表 要用<ol></ol>标签告诉浏览器这里是列表。 然后在里面添加<li></li
web初探-css-设置超链接样式
大碗宽面的博客
08-04 1544
使用 CSS 伪类别来设置超链接样式 链接的四种状态： a:link：普通的、未被访问的链接 a:visited：用户已访问的链接 a:hover：鼠标指针位于链接的上方 a:active：链接被点击的时刻 可以： a:link{ ... } 这样，设置属性，它也是一种选择器 创建按钮式超链接 就是对颜色边框等设置，模拟出来的按钮效果 代码： <style type = "text/css...
第3章 建立超链接（html）
m0_72647241的博客
11-29 7212
无
教你如何用原生css和html搭建一个好看的Table表格
抗争小青年的博客
11-27 7790
大家在学习标签的时候，可能还没有接触css，所以你做出来的表格可能是这样的：或者是这样的：大家有想过自己做一个漂亮的表格吗？我知道大家在做项目的时候大概率会去当下流行的UI框架中找已经封装好的表格来使用，就像layui的表格：但大家真的考虑过如何写一个好看的表格吗？表格背景色的交替变化大家有考虑过吗？大家亲手实现过吗这可是博主面试字节跳动时候的面试题啊！(虽然失败告终，还是自己太菜)。这些都是非常重要的基础，这篇博文，跟着博主一起做一个好看的表格，拒绝使用框架。
WEB入门二 表格和表单
张晨光老师的播客
02-14 7794
学习内容Ø表格的作用和制作Ø表单的制作能力目标Ø掌握表格的创建Ø掌握设置表格的常用属性；Ø理解表单的作用Ø熟练掌握表单常用元素本章简介表格对于网页制作而言极其重要，其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且，表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量
Error reading file D:/javaEE-web-pro/day01moudle/pom.xml maevn
05-20
这错误提示是说在读取 `D:/javaEE-web-pro/day01moudle/pom.xml` 文件时出现了问题，可能是该文件不存在或者无法被访问。 首先，你需要确认文件路径的正确性。检查该文件是否位于指定路径下，并且确保路径中不包含...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

专注摸鱼的汪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值