网页的制作

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.mzph.cn/news/755817.shtml

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

相关文章

爱恩斯坦棋小游戏使用C语言+ege/easyx实现

目录 1、游戏介绍和规则 2、需要用到的头文件 3、这里我也配上一个ege和easyx的下载链接吧&#xff0c;应该下一个就可以 4、运行结果部分展示 5、需要用到的图片要放在代码同一文件夹下 6、代码地址&#xff08;里面有需要用到的图片&#xff09; 1、游戏介绍和规则 规则如…

leetcode 647 回文子串

1. 暴力解法 class Solution:def countSubstrings(self, s: str) -> int:res 0for i in range(len(s)):for j in range(i1,len(s)1):seq s[i:j]rev seq[::-1]if seq rev:res res 1return res 2. 动态规划 class Solution:def countSubstrings(self, s: str) -> i…

简单介绍注册波兰公司的基本条件

波兰&#xff0c;一个位于中欧的国家&#xff0c;具有丰富的历史文化和资源&#xff0c;同时也拥有稳定的政治和经济环境。在这里&#xff0c;注册公司不仅有助于您拓展业务&#xff0c;还能享受到优惠的税收政策和良好的投资环境。下面&#xff0c;我们将详细介绍注册波兰公司…

代码随想录算法训练营第五十一天 | 力扣 309. 买卖股票的最佳时机含冷冻期,714. 买卖股票的最佳时机含手续费

题目链接&#xff1a;309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int maxProfit(vector<int>& prices) {int n prices.size();if (n 0) return 0;vector<vector<int>> dp(n, vector<int>…

Footprint Analytics 强势入局 AI 推出全新投研工具

作者&#xff1a;lesleyfootprint.network 3 月 15 日&#xff0c;链上数据平台 Footprint Analytics 宣布入局 AI&#xff0c;推出了旗下首款 AI 投研工具—— Pea.AI。 作为专门服务于区块链行业的 AI 平台&#xff0c;Pea.AI 旨在提升加密资产投资领域的数据流动性和知识…

镭速,企业传输大文件都在用的udp文件传输工具

在当今快速变化的数字世界中&#xff0c;文件传输工具已成为企业运营不可或缺的一部分。尤其是面对大文件传输的需求&#xff0c;传统的TCP协议由于其设计上的局限性&#xff0c;往往无法满足企业对高速、稳定传输的需求。这时&#xff0c;UDP文件传输工具以其独特的优势走进了…

你知道吗?腾讯云服务器61元一年,2024又降价了

腾讯云服务器多少钱一年&#xff1f;61元一年起。2024年最新腾讯云服务器优惠价格表&#xff0c;腾讯云轻量2核2G3M服务器61元一年、2核2G4M服务器99元一年可买三年、2核4G5M服务器165元一年、3年756元、轻量4核8M12M服务器646元15个月、4核16G10M配置32元1个月、312元一年、8核…

自注意力机制的理解

一、自注意力要解决什么问题 循环神经网络由于信息传递的容量以及梯度消失问题&#xff0c;只能建立短距离依赖关系。为了建立长距离的依赖关系&#xff0c;可以增加网络的层数或者使用全连接网络。但是全连接网络无法处理变长的输入序列&#xff0c;另外&#xff0c;不同的输…

数字签名的理解和使用方法java

数字签名是一种加密算法&#xff0c;用于确保电子文档或信息的完整性、认证和不可抵赖性。它使用公钥密码学的原理&#xff0c;在发送方使用私钥对文件进行加密生成签名&#xff0c;接收方使用对应的公钥对签名进行解密验证。如果签名验证成功&#xff0c;就可以确认文件未被篡…

MySQL最实用面试题(2024-3-14持续更新中)

MySQL篇面试题 一、介绍 ​ 这是由小龙同学自己总结领悟的mysql面试题的解析&#xff0c;也是面试宝典 二、题目 1.数据库三大范式&#xff1a; –作用&#xff1a; ​ 使表结构清晰&#xff0c;减少数据冗余&#xff08;简单讲就是重复&#xff09;&#xff0c;提高查询…

pandas无法读取/保存xls格式的excel的解决办法

文章目录 一、读取报错* 问题1* 解决办法1二、保存报错* 问题1* 解决办法1* 问题2* 解决办法2一、读取报错 * 问题1 使用 pandas 读取 .xls 后缀的 excel 报错: Traceback (most recent call last):File "D:\PycharmProjects\tools\my_project\start.py", line 1…

朋友圈运营小秘诀,让你事半功倍!

朋友圈已成为了现代社交的重要平台&#xff0c;如何在朋友圈中进行有效的运营&#xff0c;吸引更多的关注和互动&#xff0c;成为了许多人关注的焦点。 今天&#xff0c;我将分享一些朋友圈运营的小秘诀&#xff0c;帮助你事半功倍&#xff0c;让你的朋友圈更具吸引力&#xf…

Qt学习--多态(虚函数)

这次来分享多态的概念&#xff0c;这是比较重要的知识点 面向对象的三大特征&#xff1a;封装、继承、多态 首先&#xff1a;来点官方术语&#xff1a; 多态&#xff0c;通俗来讲就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出…

汇报会的意义

目录 背景: 过程: 一.沟通与信息共享 三.问题解决与风向的管理 四:团队建设与文化建设 五持续改进和发展 总结&#xff1a; 背景: 在快节奏、高效率的现代工作环境中&#xff0c;每天的汇报会在工作环境中扮演着重要的沟通和写作的角色&#xff0c;汇报会作为一种非常重…

【鸿蒙系统】 ---Harmony 鸿蒙编译构建指导(一)

&#x1f48c; 所属专栏&#xff1a;【鸿蒙系统】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢…

实践致知第10享:将微信中的Excel保存到本地并编辑、修改

一、背景需求 小姑打电话问&#xff1a;学校在微信上发来的Excel表格&#xff0c;要求家长填报相关信息&#xff0c;不知道该怎么处理&#xff0c;于是我写了下面的操作步骤。 二、解决方案 1、在电脑上打开微信&#xff0c;选中Excel表格&#xff0c;右键选择“另存为”功能…

jQuery 常用API

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

魔搭×函数计算:一键部署,缩短大模型选型到生产的距离

引言 面对魔搭 ModelScope 社区提供的海量模型&#xff0c;用户希望快速进行选型并生产使用起来&#xff0c;但在此之前&#xff0c;却一定会面临算力管理难、模型部署难等一系列问题&#xff0c;那么能否实现快速把选定的模型部署在云端功能强大的 GPU 上&#xff0c;由云端负…

详析中间人问题

详析中间人问题 正常情况 中间人 如何解决呢&#xff1f; 加证书 证书也有公钥和私钥 具体步骤如下&#xff1a; 1.服务器生成非对称密钥对 私钥和公钥的生成&#xff1a;服务器使用非对称加密算法&#xff08;如RSA、ECDSA&#xff09;生成一对密钥&#xff0c;包括一个私钥…

最新Java面试题2【2024初级】

下载链接&#xff1a;博主已将以上这些面试题整理成了一个面试手册&#xff0c;是PDF版的 互联网大厂面试题 1&#xff1a;阿里巴巴Java面试题 2&#xff1a;阿里云Java面试题-实习生岗 3&#xff1a;腾讯Java面试题-高级 4&#xff1a;字节跳动Java面试题 5&#xff1a;字…