网页设计:HTML标签

一、格式  dreamwave

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

<head> 网页相关设置 </head> 

例子:

二、 标签 在body内

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

html手册:w3school 在线教程全球最大的中文 Web 技术教程。icon-default.png?t=N7T8https://www.w3school.com.cn/

三、 元素的属性

语法:<标签 属性1=参数1 属性2=参数2>
1)align left,right,center
2) bgcolor ,body的属性设置网页的背景色
<body bgcolor="0xff1234";>

四、文本元素属性

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>,可能部分浏览器不支持。
mark 元素 <mark> </mark> 文字加黄色背景

网页显示: 

 五、超链接

5种形式
1.链接外部网站
<a href="http://www.baidu.com">baidu</a>
2.链接本地文件
<a href="1.html">1111</a>  //去到本网页
3.图片链接
<a href="1.html"><img src="abc.jpg"></a>
4.电子邮件链接打开电子邮件
<a href="mailto:123@13.com">contract me</a>
5.下载文件链接
<a href="abc.jpg">下载</a>

上面的方法在打开新网页时,老的网页会关闭
target 属性
_self :当前位置打开 默认值
_blank 新窗口中打开
<a href="http://www.baidu.com" target="_blank">baidu</a>

六、img单标签

src 图像来源
alt 如果不能正确打开,显示的文字
width, heigh

<img src="abc.jpg" alt="美女" width="100" height="200">
<img src="abc.jpg" alt="美女" width="50%" height="200%">
百分比是相对于网页而言的, 高度百分比无效的

七、列表 

有序列,无序序列
自定义列表
无序列表 前面无数字
<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属性,设置排序使用什么数字
start 开始值,后面的++;

八、表格

表格的构成,
    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,列项合并,整数参数 

 九、html实体

 用于输出一些特殊的字符
有些特殊的字符不能直接在网页中直接显示的

在www.w3school.com查询

十、表单

传递参数,数据
<form></form>

 <!-- 表单中重要的字元素 input button -->
<!-- 属性 action,指定表单发送的地址 -->
<!-- 属性 method 发送的方式 get(获取),post -->//默认不写method,是get方式
<!--get方法 数据会附加到url的后面传递给服务器 默认-->
<!--post,将数据包大包发给服务器,等候服务器来读取 -->

input元素,(输入框)他是表单的一个字属性
    指定表单中的内容项,比如输入内容的文本框
    可以指定表单属性,也可以放在表单的外面。
input元素的属性:
        type:指定输入框的类型,text单行文本password密码submit提交按钮
        reset:重置按键,button按键,普通的按键需要和特定的时间关联。
        image:图片式按键
        hidden:隐藏字段,该内容不显示在页面上,提交其他的一些变量。
        email:是一个邮箱类型,新特性,可能支持有差异
        required:表示内容必须填写,不然不能提交。
        name:名称,输入内容识别名称,传递参数时候的参数名称
        value: 默认值,输入框默认填入的内容。
        maxlength:指定最大长度
        placeholder:设置提示信息的。

 

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

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

相关文章

通过vagrant与VirtualBox 创建虚拟机

1.下载vagrant与VirtualBox【windows版本案例】 1.1 vagrant 下载地址 【按需下载】 https://developer.hashicorp.com/vagrant/install?product_intentvagranthttps://developer.hashicorp.com/vagrant/install?product_intentvagrant 1.2 VirtualBox 下载地址 【按需下载…

【漏洞复现】Rejetto HTTP文件服务器——远程命令执行(CVE-2024-23692)

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 Rejetto HTTP文件服务器是一个轻量级的HTTP服务器软件&#xff…

最新vite脚手架配置ts-node工具

在使用最新的vite脚手架进行vue组件开发时&#xff0c;编写的ts文件工具函数的测试&#xff0c;除了应用到组件中进行页面测试&#xff0c;也可以使用ts-node工具进行单独的测试。 在使用最新版本的vite脚手架&#xff0c;生成的tsconfig配置会分出多个配置&#xff1a;tsconf…

【postgresql】时间函数和操作符

日期/时间操作符 加减操作符&#xff1a; 和 - 可以用于日期、时间、时间戳和时间间隔的加减操作。 SELECT 2024-01-01::date INTERVAL 1 day as "date"; ; -- 结果&#xff1a;2024-01-02SELECT 2024-01-01 12:00:00::timestamp - INTERVAL 2 hours as "…

类和对象的简述(c++篇)

开局之前&#xff0c;先来个小插曲&#xff0c;放松一下&#xff1a; 让我们的熊二来消灭所有bug 各位&#xff0c;在这祝我们&#xff1a; 放松过后&#xff0c;开始步入正轨吧。爱学习的铁子们&#xff1a; 目录&#xff1a; 一类的定义&#xff1a; 1.简述&#xff1a; 2…

leetcode简单题26 N.118 杨辉三角 rust描述

// 动态规划 pub fn generate(num_rows: i32) -> Vec<Vec<i32>> {let mut triangle: Vec<Vec<i32>> vec![];for i in 0..num_rows {let mut row vec![1; (i 1) as usize];for j in 1..i as usize {row[j] triangle[(i - 1) as usize][(j - 1)]…

使用阿里云镜像转存的 Harbor 国内镜像源(不定期更新)

目录 Harbor Chart 1.15.0Harbor Chart 1.14.3Harbor Chart 1.13.4 【注】主要用于 helm Charts 安装 Harbor 时自定义镜像地址。 Charts 库&#xff1a;https://artifacthub.io/packages/helm/harbor/harbor Docker 镜像库&#xff1a;https://hub.docker.com/u/goharbor 如果…

十、Java集合 ★ ✔(模块18-20)【泛型、通配符、List、Set、TreeSet、自然排序和比较器排序、Collections、可变参数、Map】

day05 泛型,数据结构,List,Set 今日目标 泛型使用 数据结构 List Set 1 泛型 1.1 泛型的介绍 ★ 泛型是一种类型参数&#xff0c;专门用来保存类型用的 最早接触泛型是在ArrayList&#xff0c;这个E就是所谓的泛型了。使用ArrayList时&#xff0c;只要给E指定某一个类型…

linux的学习(七):读取,函数,正则表达式,文本处理工具cut和awk

##简介 shell编程中的读取&#xff0c;函数&#xff0c;正则表达式&#xff0c;文本处理工具的简单使用 read read&#xff1a;读取控制台的输入 参数&#xff1a; -p&#xff1a;指定读取时的提示符-t&#xff1a;等待读取的时间 脚本例子 编写i.sh脚本&#xff0c;enter…

Android Studio引入ndk编译的so库, 通过jni给Java程序使用

前言 工作要求将一个C老项目的函数用ndk打包成库给安卓同事的java程序调用。 这个任务我debuff拉满&#xff1a; 自己之前从来没接触过安卓开发&#xff0c;问了老板为什么不让安卓开发来干&#xff0c;老板说安卓开发不懂c&#xff0c;公司就我一个是懂c的。。。项目开发年…

自定义短语 - 那些年狠狠惊艳了我们的输入法使用技巧

你是不是每次注册或者登录的时候还在吭哧吭哧地输入你的电话号、邮箱或者昵称&#xff1f; 你是不是在填写各种信息的时候还在一次又一次地输入自己的身份证号、银行卡号或者车牌号&#xff1f; 而我只要输入“mail”&#xff0c;我的候选框里就有6个email号待我挑选&#xf…

css实现前端水印

单处水印 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Watermark Example</title>&l…

单片机设计_自行车码表(AT89C51, LCD1602, DS1302,霍尔传感器)

想要更多项目私wo!!! 一、电路设计 系统采用51单片机LCD1602液晶DS1302时钟模块霍尔传感器电机按键模块蜂鸣器报警模块设计而成。 产品自带单片机上电复位电路、手动复位电路&#xff08;复位按键&#xff09;、晶振电路&#xff08;给单片机提供时钟周期&#xff09;。 …

Java面试题--JVM大厂篇之深入解析JVM中的Serial GC:工作原理与代际区别

目录 引言&#xff1a; 正文&#xff1a; 一、Serial GC工作原理 年轻代垃圾回收&#xff08;Minor GC&#xff09;&#xff1a; 老年代垃圾回收&#xff08;Major GC或Full GC&#xff09;&#xff1a; 二、年轻代和老年代的区别 年轻代&#xff08;Young Generation&a…

数据库基础-进阶

数据库管理&#xff1a; *sql语句 数据库用来增删改查的语句 *** 备份 数据库的数据进行备份 * 主从复制&#xff0c;读写分离&#xff0c;高可用 原理 数据库的概念和相关的语法和规范&#xff1a; 数据库&#xff1a;组织&#xff0c;存储&#xff0c;管理数据的仓库。 数据…

Python用Pyqt5制作音乐播放器

具体效果如下 需要实现的功能主要的几个有&#xff1a; 1、搜索结果更新至当前音乐的列表&#xff0c;这样播放下一首是搜素结果的下一首 2、自动播放 3、滚动音乐文本 4、音乐进度条 5、根据实际情况生成音乐列表。我这里的是下面的情况&#xff0c;音乐文件的格式是 歌…

Calibration相机内参数标定

1.环境依赖 本算法采用张正友相机标定法进行实现&#xff0c;内部对其进行了封装。 环境依赖为 ubuntu20.04 opencv4.2.0 yaml-cpp yaml-cpp安装方式&#xff1a; &#xff08;1&#xff09;git clone https://github.com/jbeder/yaml-cpp.git #将yaml-cpp下载至本地 &a…

Fastjson解析JSON时key对应的value存在多个英文双引号解决

情景 如上图所示&#xff0c;经常在解析json时会出现因双引号报错的问题。 fastjson解决方案 JSONObject jsonfile JSONObject.parseObject(json, Feature.OrderedField);JSONArray jsonArray jsonfile.getJSONObject("result").getJSONArray("items");…

Linux网络编程-socket套接字使用详解

1.概念 在Linux中&#xff0c;套接字&#xff08;socket&#xff09;是一种通信机制&#xff0c;用于实现不同进程之间或同一主机上的不同线程之间的数据交换。它是网络编程的基础&#xff0c;允许应用程序通过网络进行通信&#xff0c;也可以在同一台机器上的不同进程间进行通…

ajax实时监控input搜索框并给提示词的事实举例的超全版本(上-不用字典树)

前言 感觉前面直接放概念和字典树还是差了点&#xff0c;有的看了概念还是没有思路的&#xff0c;于是写这篇文章来举例子&#xff0c;首先这不不包含字典树的版本&#xff0c;用字典树的版本等下会发。 需要的技术 jsp和ajax简单的理解&#xff0c;做示例的后端框架是sprin…