网页的制作

1.格式


<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8"> 
        <title>中文测试。。。。</title>
    </head>
    <body>
        这里是测试body测试内容。。。
    </body>
</html>

2.标签 在body内


<h1></h1>双标签 标题 ,加粗,换行  1-6 ---》小
<p></p> 双标签  段落,有换行功效
<hr> 单标签  左到右分割符
<!--    -->注释


3,元素的属性


给元素提供更多的属性,大部分的元素属性
语法:<标签 属性1=参数1>
1)align left,right,center
2) bgcolor ,body的属性设置网页的背景色
<body bgcolor="0x00ff1234">


4,文本元素属性


b 元素 <b>内容</b> 加粗
br 换行<br> 如果是p标签中间有间隔
i元素, 字体倾斜<i></i>
del元素 删除文字<del></del>
strong  强调一段文字,效果类似 b标签
u元素,下划线<u></u>
small元素, 超小字体<small></small>
sub 下标<sub></sub>
sup  上标<sup></sup>
<br>h<sub>2</sub>0
        <br>100m<sup>2</sup>
ruby,拼音,<ruby>二姐 <rt>(er) (jie)<rt></ruby>,可能部分浏览器不支持。
make 元素 <mark> </mark> 加黄色背景

5超链接
5种形式


1,链接外部网站
2,链接本地文件
3,图片链接
4,电子邮件链接打开电子邮件
5,下载文件链接

        <a href="http://www.baidu.com">baidu</a>
        <br><a href="1.html">1111</a>
        <br><a href="1.html"><img src="abc.jpg"></a>
        <br><a href="mailto:123@13.com">contract me</a>
        <br><a href="abc.jpg">下载</a>
上面的方法在打开新网页时,老的网页会关闭
target 属性
_self :当前位置打开 默认值
_blank 新窗口中打开
<a href="http://www.baidu.com" target="_blank">baidu</a>

6 img 单标签
src 图像来源
alt 如果不能正确打开,显示的文字
width, heigh
<img src="abc.jpg" alt="美女" width="100" height="200"> px
<img src="abc.jpg" alt="美女" width="50%" height="200%">
百分比是相对于网页而言的, 高度百分比无效的
    
7列表
有序列,无需序列
自定义列表
无序列表 前面无数字
<ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
</ul>
有个type属性 文字最前面的符号
disc 黑色实心圆
circle 白色空心圆
square 黑色方块
有序列,前面有数字

<ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
</ol>
其中可以放文字,图片,或链接
有type属性,设置排序使用什么数字

表格的构成,
    table,外框
    tr 行
    td 列
    <table>
        <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
        <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
        <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        3行 3列
表格的属性
 border 边框粗细
 th,是tr的属性,列标题,自动居中,加粗
 colspan,横向合并单元格,需要 整形参数
    <tr><th colspan="3">name</th></tr> 
表格的合并
rowspan ,列项合并,整数参数
caption 给表格加标题 子属性
表格还有3个字属性
thead 都是双标签
tbody
tfoot
这些属性,后期主要和css,js配合使用
9 html 实体
用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的

10 style 元素,html样式
引入样式的三种方法
1),外部样式 需要css
<link rel="stylesheet" type="text/css" href="">
2)内部样式 <style type="text/css" ></style>
样式需要放在<head></head>之间,这个属于布局。
3).内联样式<p style="color:red"></p> 单独的设置一个


11. div布局 需要配合css样式设置
9.html
12 通用属性
每个元素都用
    id属性,指定元素的标识符,唯一性。
    class 指定类型名,归类,统一设置共同的属性
    title 当鼠标移动到元素的时候显示的内容
    dir 用于控制显示输出的方向
    <bdo dir="rtl">123456</bdo>
    style 样式设置
    
12,表单    传递参数,数据
<form>
</form>
    <!-- 表单中重要的字元素 input button -->
<!-- 属性 action,指定表单发送的地址 -->
<!-- 属性 method 发送的方式 get,post -->
<!--get方法 数据会附加到url的后面传递给服务器 默认-->
<!--post,将数据包大包发给服务器,等候服务器来读取 -->
13,input元素,(输入框)他是表单的一个字属性
    指定表单中的内容项,比如输入内容的文本框
    可以指定表单属性,也可以放在表单的外面。
    input元素的属性:
        type,指定输入框的类型,text单行文本,password密码,submit提交按钮,
        reset,重置按键,button按键,普通的按键需要和特定的时间关联。
        image:图片式按键
        hidden:隐藏字段,该内容不显示在页面上,提交其他的一些变量。
        email: 是一个邮箱类型,新特性,可能支持有差异
        required:表示内容必须填写,不然不能提交。
    name:名称,输入内容识别名称,传递参数时候的参数名称
    value: 默认值,输入框默认填入的内容,
    maxlength,指定最大长度
    placeholder,设置提示信息的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux 建立链接(ln)

目录 1、ln命令 创建软链接&#xff1a; 创建硬链接&#xff1a; 2、输出重定向&#xff08;>/>>&#xff09; 3、管道&#xff08;|&#xff09; 1、ln命令 &#xff08;英文全拼&#xff1a;link files&#xff09;为某一个文件在另外一个位置建立一个同步的…

数据结构奇妙旅程之红黑树

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …

SpringBoot集成Jasypt实现敏感信息加密

项目场景&#xff1a; 在服务中不可避免的需要使用到一些秘钥&#xff08;数据库、redis等&#xff09;开发和测试环境还好&#xff0c;但生产如果采用明文配置将会有安全问题&#xff0c;jasypt是一个通用的加解密库&#xff0c;可以使用它。 在Spring Boot中使用Jasypt加密和…

nfs介绍与配置

NFS 1. nfs简介 nfs特点 NFS&#xff08;Network File System&#xff09;即网络文件系统&#xff0c;是FreeBSD支持的文件系统中的一种&#xff0c;它允许网络中的计算机之间通过TCP/IP网络共享资源在NFS的应用中&#xff0c;本地NFS的客户端应用可以透明地读写位于远端NFS服…

CTF题型 SSTI(2) Flask-SSTI典型题巩固

CTF题型 SSTI(2) Flask-SSTI典型题巩固 文章目录 CTF题型 SSTI(2) Flask-SSTI典型题巩固前记1.klf__sstiSSTI_Fuzz字典&#xff08;网上收集自己补充&#xff09; 2.klf_2数字问题如何解决了&#xff1f;|count |length都被禁&#xff1f; 3.klf_3 前记 从基础到自己构造paylo…

【代码】YOLOv8标注信息验证

此代码的功能是标注信息验证&#xff0c;将原图和YOLOv8标注文件&#xff08;txt&#xff09;放在同一个文件夹中&#xff0c;作为输入文件夹 程序将标注的信息还原到原图中&#xff0c;并将原图和标注后的图像一同保存&#xff0c;以便查看 两个draw_labels函数&#xff0c;分…

Flutter 事件传递简单概述、事件冒泡、事件穿透

前言 当前案例 Flutter SDK版本&#xff1a;3.13.2 本文主要讲解&#xff0c;事件传递过程中可能遇到的问题解决&#xff0c;比如 事件冒泡、事件穿透&#xff1b; 事件穿透应用场景&#xff1a;在叠加布局中&#xff0c;两个组件是位置相同&#xff0c;相互覆盖&#xff0c…

第十三届蓝桥杯(C/C++ 大学B组)

目录 试题 A: 九进制转十进制 试题 B: 顺子日期 试题 C: 刷题统计 试题 D: 修剪灌木 试题 E: X 进制减法 试题 F: 统计子矩阵 试题 G: 积木画 试题 H: 扫雷 试题 I: 李白打酒加强版 试题 J: 砍竹子 试题 A: 九进制转十进制 九进制正整数 ( 2022 )转换成十进制等于多…

easyexcel读和写excel

请直接看原文: JAVA使用easyexcel操作Excel-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 之前写过一篇《JAVA操作Excel》&#xff0c;介绍了jxl和poi读写Excel的实现&am…

gitlab仓库使用流程(开发)

1.1.GitLab代码提交流程&#xff1a; 1.1.1准备阶段&#xff1a; 确保已经安装了Git&#xff0c;并且配置了正确的用户名和邮箱地址。 在本地创建一个新的文件夹&#xff0c;用于存放即将开发的代码。 1.1.2.拉取代码&#xff1a; 使用git clone命令从GitLab上拉取项目代码…

jQuery 常用API

一、jQuery 选择器 1.1 jQuery 基础选择器 原生 JS 获取元素方式很多&#xff0c;很杂&#xff0c;而且兼容性情况不一致&#xff0c;因此 jQuery 给我们做了封装&#xff0c;使获取元素统一标准。 1.2 jQuery 层级选择器 jQuery 设置样式 1.3 隐式迭代&#xff08;重要&…

【图解物联网】第2章 物联网的架构

2.1 物联网的整体结构 实现物联网时&#xff0c;物联网服务大体上发挥着两个作用。 第一是把从设备收到的数据保存到数据库&#xff0c;并对采集的数据进行分析。 第二是向设备发送指令和信息。 本章将会为大家介绍如何构建物联网服务&#xff0c;以…

AMRT 3D 数字孪生引擎(轻量化图形引擎、GIS/BIM/3D融合引擎):智慧城市、智慧工厂、智慧建筑、智慧校园。。。

AMRT3D 一、概述 1、提供强大完整的工具链 AMRT3D包含开发引擎、资源管理、场景编辑、UI搭建、项目预览和发布等项目开发所需的全套功能&#xff0c;并整合了动画路径、精准测量、动态天气、视角切换和动画特效等工具。 2、轻量化技术应用与个性化定制 AMRT3D适用于快速开…

电子科技大学链时代工作室招新题C语言部分---题号G

1. 题目 问题的第一段也是非常逆天&#xff0c;说实话&#xff0c;你编不出问题背景可以不编。 这道题的大概意思就是&#xff0c; Pia要去坐飞机&#xff0c;那么行李就有限重。这时Pia想到自己带了个硬盘&#xff0c;众所周知&#xff0c;硬盘上存储的数据就是0和1的二进制序…

精密星历解析

总结一下用到的精密星历&#xff0c;区分一下&#xff1a; 精密星历与广播星历比较 1、精密星历比广播星历精度高&#xff0c;这一点大家都知道&#xff1b; 2、精密星历中给出的卫星的位置&#xff0c;是卫星质心&#xff0c;广播星历解算的是卫星的天线相位中心。 精密星历…

CTF题型 php反序列化进阶(1) php原生类 例题和总结

CTF题型 php反序列化进阶(1) php原生文件操作类 例题和总结 文章目录 CTF题型 php反序列化进阶(1) php原生文件操作类 例题和总结特征原理 我们可以通过PHP自身本来就有的类来进行文件操作扫描目录的三个类DirectoryIterator(支持glob://协议)FilesystemIterator&#xff08;继…

接口测试基础+requests库

接口测试基础requests库 接口测试基础URL格式协议IP地址端⼝号资源路径查询参数 练习HTTP请求请求行请求头请求体浏览者开发工具 Requests库Requests库安装和简介设置http请求语法应用案例py02_tpshop_search.pypy03_tpshop_login.pypy04_ihrm_login.py 接口测试基础 URL格式 …

【JAVA快速编写UI】 Java 编写一个编码转换和加解密工具,可以创建一个简单的 GUI 应用程序(例子)

EncodingDecodingTool/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com/ │ │ │ └── rockmelodies/ │ │ │ └── encodingdecodingtool/ │ │ │ ├── MainApp.java │ │ │ …

力扣大厂热门面试算法题 43-45

43. 字符串相乘&#xff0c;44. 通配符匹配&#xff0c;45. 跳跃游戏 II&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.18 可通过leetcode所有测试用例。 目录 43. 字符串相乘 解题思路 完整代码 Python Java 44. 通配符…

企企通:AI技术赋能供应链智能化升级,打造数字产业集群

2024年全国两会期间&#xff0c;政府工作报告中首次提出开展“人工智能”行动&#xff0c;深化大数据、人工智能等技术的研发应用&#xff0c;打造具有国际竞争力的数字产业集群。 图源&#xff1a;中国政府网 近年来&#xff0c;人工智能发展呈现加速态势&#xff0c;技术迭代…
最新文章