前端(HTML)

news2024/11/26 4:48:37

网络传输三大基石:URL,HTTP,HTML

前端使用URL利用HTTP协议去向服务器端发送请求某个资源,服务器端响应浏览器一个HTML页面,浏览器对HTML页面解析

HTML的标准结构:

【1】先用普通文本文档新建一个文本,将文本的后缀改为.html  或者 .htm

我们也可以使用VS code去设计 https://code.visualstudio.com 下载VS code

【2】编辑

<html>

        <head></head>

        <body>

               this is my second html... ...

        </body>

</html>

(如果使用VS code可以使用!+tab键快速出现HTML框架)

head标签对是对网页的配置,body标签对里面放的就是页面上展示出来的内容

<title>、<meta>、<link>、<style>、 <script>、 <base>用在head部分

title标签:设置网页的标题

meta标签:设置网页关键词和描述

超级链接标签

<a href="https://www.baidu.com/">百度一下</a>

超链接的href属性为超文本引用,即跳到某个页面,'百度一下'为跳转到另一个页面的点击处(按钮)

title属性是鼠标悬浮的显示内容

设置锚点:

当一个页面太长的时候,就需要设置锚点,可以在同一个页面的不同位置之间进行跳转。 

就像坐电梯我们可以去任意楼层

Eg: 前面写一个<a name='3F'></a>               (设置锚点,设置一个位置!)

        后边可以写一个<a href='#3f'>手机</a>    (访问锚点,按钮就为'手机')

        上面为同一页面的跳转,下面是不同页面的跳转:

        <a href='设置锚点.html#3F'>超链接</a>

        在链接后加上#3F就是直接跳到另一个文件的三层

列表标签:

1.<!DOCTYPE html>
2.<html>
3.        <head>
4.                <meta charset="UTF-8">
5.                <title></title>
6.        </head>
7.        <body>
8.                <!--无序列表:
9.                        type:可以设置列表前图标的样式   type="square"
10.                        如果想要更换图标样式,需要借助css技术: style="list-style:url(img/act.jpg) ;"
11.                -->
12.                <h1>起床后需要做的事</h1>
13.                <ul type="square">
14.                        <li>睁眼</li>
15.                        <li>穿衣服</li>
16.                        <li>上厕所</li>
17.                        <li>吃早饭</li>
18.                        <li>洗漱</li>
19.                        <li>出门</li>
20.                </ul>
21.                <!--有序列表:
22.                        type:可以设置列表的标号:1,a,A,i,I
23.                        start:设置起始标号
24.                -->
25.                <h1>学习java的顺序</h1>
26.                <ol type="A" start="3">
27.                        <li>JAVASE</li>
                           28.<li>ORACLE</li>
29.                        <li>MYSQL</li>
30.                        <li>HTML</li>
31.                        <li>CSS</li>
32.                        <li>JS</li>
33.                </ol>
34.                
35.        </body>
36.</html>
37.

表格标签:<table>

1.<!DOCTYPE html>
2.<html>
3.        <head>
4.                <meta charset="UTF-8">
5.                <title></title>
6.        </head>
7.        <body>
8.                <!--表格:4行4列
9.                        table:表格
10.                        tr:行
11.                        td:单元格
12.                        th:特殊单元格:表头效果:加粗,居中
13.                        默认情况下表格是没有边框的,通过属性来增加表框:
14.                        border:设置边框大小
15.                        cellspacing:设置单元格和边框之间的空隙
16.                        align="center"  设置居中
17.                        background 设置背景图片 background="img/ss.jpg"
18.                        bgcolor :设置背景颜色
19.                        rowspan:行合并
20.                        colspan:列合并
21.                -->
22.                <table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
23.                        <tr bgcolor="bisque">
24.                                <th>学号</th>
25.                                <th>姓名</th>
26.                                <th>年纪</th>
27.                                <th>成绩</th>
28.                        </tr>
29.                        <tr>
30.                                <td align="center">1001</td>
31.                                <td>丽丽</td>
32.                                <td>19</td>
33.                                <td rowspan="3">90.5</td>
34.                        </tr>
35.                        <tr>
36.                                <td colspan="2" align="center">2006</td>
37.                                <td>30</td>
38.                        </tr>
39.                        <tr>
40.                                <td>3007</td>
41.                                <td>小明</td>
42.                                <td>18</td>
43.                        </tr>
44.                </table>
45.        </body>
46.</html>

<div></div>标签对用来将相关内容组合到一起,将内容形成一部分一部分的内容

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

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

相关文章

chatgpt赋能Python-mac版的python怎么用

Mac版Python的使用指南 Python是一种高级编程语言&#xff0c;常用于Web开发、数据分析、机器学习等领域。在Mac系统上&#xff0c;Python的安装和使用非常方便。本文将介绍如何在Mac上安装和使用Python并演示几个常见的Python用例。 Python在Mac上的安装 Mac电脑自带Python…

springboot+jsp+javaweb学生信息管理系统 05hs

springboot是基于spring的快速开发框架, 相比于原生的spring而言, 它通过大量的java config来避免了大量的xml文件, 只需要简单的生成器便能生成一个可以运行的javaweb项目, 是目前最火热的java开发框架 &#xff08;1&#xff09;管理员模块&#xff1a;系统中的核心用户是管…

蓝牙耳机什么牌子的好用?发烧友实测2023年蓝牙耳机排名

从AirPods入坑蓝牙耳机开始&#xff0c;断断续续已经买过二十多款蓝牙耳机了&#xff0c;我每天都会逛逛数码板块&#xff0c;最近看到了2023年蓝牙耳机排名&#xff0c;为检验是否名副其实&#xff0c;我购入了排名前五的品牌进行了一个月的测试&#xff0c;接下来我就来分享一…

k8s系列(四)——资源对象

k8s系列四——资源对象 pod概念 思考&#xff1a;为什么k8s会引出pod这个概念&#xff0c;容器不能解决么&#xff1f; 我的理解&#xff1a;一组密切相关的服务使用容器的话&#xff0c;如果他们的镜像不在一个容器里的话&#xff0c;那么就需要配置反向代理进行通信&#xf…

Packet Tracer – 配置中继

Packet Tracer – 配置中继 地址分配表 设备 接口 IP 地址 子网掩码 交换机端口 VLAN PC1 NIC 172.17.10.21 255.255.255.0 S2 F0/11 10 PC2 NIC 172.17.20.22 255.255.255.0 S2 F0/18 20 PC3 NIC 172.17.30.23 255.255.255.0 S2 F0/6 30 PC4 NIC 1…

java 根据指定字段排序(mysql)

需求&#xff1a; 查询数据的时候&#xff0c;由前端指定字段和排序方式进行排序。 这时候要怎么做呢&#xff1f; 要定义一个相应的类&#xff0c;排序的时候&#xff0c;是动态拼接的。 要考虑多个字段&#xff0c;不同排序方式的情况。 处理 OrderField import io.swagge…

基于matlab的ADC输入动态范围测量代码

如图&#xff0c;本文主要分享基于matlab的ADC输入数据有效位分析的代码。 fidfopen(C:\Users\Administrator\Desktop\Test.txt,r); % numptinput(Data Record Size (Number of Points)? );% fclkinput(Sampling Frequency (MHz)? ); numpt16384; fclk50; numbit14; [v1]fs…

SDK案例记录

目前的极简配置 注意事项 默认的属性配置中&#xff0c;大多采用环境变量的形式&#xff0c;方便不同设备通用 比如“常规”->“输出目录”为 $(SolutionDir)..\bin\win_msvc2017$(Platform)\$(Configuration)\案例运行前的配置&#xff08;除MwBatchSimPlugin&#xff0…

华丽家族股东大会21项议案全被否

5月17日晚间&#xff0c;A股上市公司华丽家族发布关于收到上海证券交易所监管工作函的公告&#xff0c;交易所对相关事项提出监管要求。 在此之前&#xff0c;华丽家族当天召开股东大会&#xff0c;21项股东大会议案全部未通过。历史上&#xff0c;股东大会议案全部被否的情形…

『python爬虫』24. selenium之无头浏览器-后台静默运行(保姆级图文)

目录 1. 无头浏览器2. 分析被爬取数据的网页结构3. 完整代码总结 欢迎关注 『python爬虫』 专栏&#xff0c;持续更新中 欢迎关注 『python爬虫』 专栏&#xff0c;持续更新中 1. 无头浏览器 一般性的selenium会打开浏览器页面&#xff0c;展示图形化页面给我们看&#xff0c;我…

Spring Boot注入Servlet、Filter、Listener 注解方式和使用RegistrationBean二种方式 加源码分析

目录 Spring Boot 注入Servlet、Filter、Listener 官方文档 基本介绍 应用实例1-使用注解方式注入 创建/Servlet_.java 修改Application.java , 加入ServletComponentScan 完成测试 创建Filter_.java 创建static/css/t.css, 作为测试文件 完成测试, 注意观察后台 注…

【数据结构】--- 博主拍了拍你并向你扔了一“棵”二叉树(概念+结构)

文章目录 前言&#x1f31f;一、树概念及结构&#xff1a;&#x1f30f;1.1树的概念&#xff1a;&#x1f30f;1.2树的相关概念&#xff1a;&#x1f30f;1.3树的表示&#xff1a;&#x1f4ab;1.3.1左孩子右兄弟表示法&#xff1a;&#x1f4ab;1.3.2双亲表示法&#xff1a; &…

Golang每日一练(leetDay0069) 数字范围按位与、快乐数

目录 201. 数字范围按位与 Bitwise-and-of-numbers-range &#x1f31f;&#x1f31f; 202. 快乐数 Happy Number &#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每…

美团前高级测试工程师教你如何使用web自动化测试

一、自动化测试基本介绍 1 自动化测试概述&#xff1a; 什么是自动化测试&#xff1f;一般说来所有能替代人工测试的方式都属于自动化测试&#xff0c;即通过工具和脚本来模拟人执行用例的过程。 2 自动化测试的作用 减少软件测试时间与成本改进软件质量 通过扩大测试覆盖率…

python随机生成数据并用双y轴绘制两条带误差棒的折线图

python绘图系列文章目录 往期python绘图合集: python绘制简单的折线图 python读取excel中数据并绘制多子图多组图在一张画布上 python绘制带误差棒的柱状图 python绘制多子图并单独显示 python读取excel数据并绘制多y轴图像 python绘制柱状图并美化|不同颜色填充柱子 Python绘制…

IC验证学习笔记(AHB-RAM)08addr、bsize都随机,主要做地址偏移操作

rkv_ahbram_haddr_word_unaligned_virt_seq: 对addr和bsize都随机化操作 ifndef RKV_AHBRAM_HADDR_WORD_UNALIGNED_VIRT_SEQ_SV define RKV_AHBRAM_HADDR_WORD_UNALIGNED_VIRT_SEQ_SVclass rkv_ahbram_haddr_word_unaligned_virt_seq extends rkv_ahbram_base_virtual_sequenc…

深入探讨桥梁建筑中地质工程与仪器仪表应用

近期&#xff0c;随着桥梁建筑行业的不断发展&#xff0c;地质工程与仪器仪表应用成为了热议的话题。在桥梁、建筑、水利工程等领域&#xff0c;渗压计、MCU自动化测量单元、应变计、测缝计、固定测斜仪等各种先进的仪器仪表技术正在广泛应用&#xff0c;为工程施工和监测提供了…

什么是pytest自动化测试框架?如何安装和使用呢?赶快收藏起来

一、pytest是什么&#xff1f; pytest是一款强大的Python测试工具&#xff0c;可以胜任各种类型或级别的软件测试工作。实际上&#xff0c;越来越多的项目在使用pytest。因为pytest会提供更丰富的功能&#xff0c;包括assert重写、第三方插件&#xff0c;以及其他测试工具无法比…

116.【SpringBoot和Vue结合-图书馆管理系统】

前后端分离 (一)、SpringBootVue概述1.基本概述2.实现技术 (二)、Vue3.x搭建 (SpringBootVue)1.搭建Vue基本环境(1).搭建Vue项目框架(2).介绍Vue项目内容 2.搭建SpringBoot基本环境(1).创建SpringBootTest项目(2).初始化项目(3).测试SpringBoot的控制层 3.通过路由跳转访问组件…

Python+selenium自动化元素定位防踩坑

在自动化UI测试过程中常常会在元素定位阶段就踩坑&#xff0c;碰到困扰已久的问题。 以下是个人整理元素定位报错原因和解决方法。 踩坑一&#xff1a;StaleElementReferenceException selenium.common.exceptions.StaleElementReferenceException: Message: stale element re…