简单的网页制作

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元素属性

给元素提供更多的属性,大部分的元素属性

3.1语法

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

4文本元素属性
b 元素 内容 加粗
br 换行
如果是p标签中间有间隔
i元素, 字体倾斜
del元素 删除文字
strong 强调一段文字,效果类似 b标签
u元素,下划线
small元素, 超小字体
sub 下标
sup 上标

h20

100m2
ruby,拼音,二姐 (er) (jie),可能部分浏览器不支持。
make 元素 加黄色背景

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

	<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 新窗口中打开
baidu

6 img 单标签
src 图像来源
alt 如果不能正确打开,显示的文字
width, heigh
美女 px
美女
百分比是相对于网页而言的, 高度百分比无效的

7列表
有序列,无需序列
自定义列表
无序列表 前面无数字

  • 列表1
  • 列表2
  • 列表3
  • 列表4
有个type属性 文字最前面的符号 disc 黑色实心圆 circle 白色空心圆 square 黑色方块 有序列,前面有数字
  1. 列表1
  2. 列表2
  3. 列表3
  4. 列表4
其中可以放文字,图片,或链接 有type属性,设置排序使用什么数字

表格的构成,
table,外框
tr 行
td 列





1-11-21-3
2-12-22-3
3-13-23-3

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

10 style 元素,html样式
引入样式的三种方法
1),外部样式 需要css

2)内部样式 样式需要放在之间,这个属于布局。 3).内联样式

单独的设置一个
  1. div布局 需要配合css样式设置
    9.html
    12 通用属性
    每个元素都用
    id属性,指定元素的标识符,唯一性。
    class 指定类型名,归类,统一设置共同的属性
    title 当鼠标移动到元素的时候显示的内容
    dir 用于控制显示输出的方向
    123456
    style 样式设置

12,表单 传递参数,数据

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

HTML网页制作参考手册

https://www.w3school.com.cn/tags/index.asp

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

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

相关文章

鸿蒙开发实现弹幕功能

鸿蒙开发实现弹幕功能如下&#xff1a; 弹幕轮播组件&#xff1a;BannerScroll import type { IDanMuInfoList, IDanMuInfoItem } from ../model/DanMuData //定义组件 Component export default struct BannerScroll {//Watch 用来监视状态数据的变化&#xff0c;包括&#…

Java代码基础算法练习-判断字符串是否为回文-2024.03.16

任务描述&#xff1a; 回文串是指一个正读和反读都一样的字符串&#xff0c;比如“level”或者“noon”等。要求输入 一个字符串&#xff0c;判断此字符串是否为回文。&#xff08;注&#xff1a;设字符串长度小于20&#xff09; 任务要求&#xff1a; package suanfa;import…

Vue:内置组件:KeepAlive(缓存组件实例)

一、作用 <KeepAlive></KeepAlive>能缓存包裹的所有组件&#xff0c;保证组件在切换时维持组件状态。 默认情况下&#xff0c;一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时&#xff0c;会创建一个只带有初…

部署一个本地的ChatGPT(Ollama)

一 下载Ollama Ollama下载地址&#xff1a;https://ollama.com/download 下载完后 二 安装运行 双击下载好的OllamaSetup.exe开发 安装Ollama: 安装完成后&#xff0c;多了一个Ollama的菜单如下图 &#xff1a; Ollama安装好默认是配置开机运行&#xff0c;如果没有运行可以在…

MyBatis plus自动生成代码

1.pom文件配置 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3</version> </dependency> <dependency><groupId>com.baomidou</groupId>…

第五十九回 公孙胜芒砀山降魔 晁天王曾头市中箭-飞桨自然语言处理套件PaddleNLP初探

公孙胜献出八卦阵&#xff0c;宋江用八员大将守阵。项充李衮进入阵里&#xff0c;被抓住了。宋江说久闻大名&#xff0c;来梁山吧。两人说誓当效力到死&#xff0c;希望能先放我们两个回去把樊瑞带来一起。见到樊瑞后把宋江讲义气一说&#xff0c;樊瑞说不可逆天&#xff0c;于…

力扣112、113、101--树

112. 路径总和 题目描述&#xff1a; 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。 判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。 如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c…

轻松搞定找不到vcomp140.dll无法继续执行程序的5种方法

在我们日常使用计算机的过程中&#xff0c;频繁且不可避免地会遭遇到各种类型的错误提示信息&#xff0c;这些错误信息往往会在关键时刻阻碍我们的操作进程。其中&#xff0c;有一个颇为常见的错误提示值得我们关注&#xff0c;那就是“vcomp140.dll丢失”。这个错误提示涉及到…

【计算机视觉】二、图像形成——实验:2D变换编辑(Pygame)

文章目录 一、向量和矩阵的基本运算二、几何基元和变换1、几何基元(Geometric Primitives)2、几何变换(Geometric Transformations)2D变换编辑器0. 程序简介环境说明程序流程 1. 各种变换平移变换旋转变换等比缩放变换缩放变换镜像变换剪切变换 2. 按钮按钮类创建按钮 3. Pygam…

更安全的C gets()和str* 以及fgets和strcspn的用法

#include <stdio.h>int main() {char *str;gets(str);puts(str);return(0); }可以说全是错误 首先char *str没有指向一个分配好的地址&#xff0c;就直接读入&#xff0c;危险 ps: 怎么理解char *str "Hello World" 是将一个存储在一个只读的数据段中字符串常…

AI预测-一文解析AI预测数据工程

AI预测相关目录 AI预测流程&#xff0c;包括ETL、算法策略、算法模型、模型评估、可视化等相关内容 最好有基础的python算法预测经验 EEMD策略及踩坑VMD-CNN-LSTM时序预测对双向LSTM等模型添加自注意力机制K折叠交叉验证optuna超参数优化框架多任务学习-模型融合策略Transform…

《操作系统实践-基于Linux应用与内核编程》第10章-Linux综合应用

前言: 内容参考《操作系统实践-基于Linux应用与内核编程》一书的示例代码和教材内容&#xff0c;所做的读书笔记。本文记录再这里按照书中示例做一遍代码编程实践加深对操作系统的理解。 引用: 《操作系统实践-基于Linux应用与内核编程》 作者&#xff1a;房胜、李旭健、黄…

复现文件上传漏洞

一、搭建upload-labs环境 将下载好的upload-labs的压缩包&#xff0c;将此压缩包解压到WWW中&#xff0c;并将名称修改为upload&#xff0c;同时也要在upload文件中建立一个upload的文件。 然后在浏览器网址栏输入&#xff1a;127.0.0.1/upload进入靶场。 第一关 选择上传文件…

数字孪生-使用Unity构建能实时显示应力应变的孪生模型

Motivation - 采用Unity作为孪生技术栈的经历? 最开始想要利用Ansys的Twin Builder模块来进行数字孪生的开发&#xff0c;但是Ansys 的Twin Builder在部署的时候&#xff0c;需要license&#xff0c;要获得license所要花费的价格是难以接受的。 后来想要利用QTVTK的方式来进行…

MATLAB:拟合与插值

一、关于多项式的基本操作 若要求非线性方程的根&#xff0c;则采用fzero, fminbnd函数 二、多项式拟合 clc, clear x0:0.2:10; y0.25*x20*sin(x); plot(x,y,k.,MarkerSize,15) grid on; hold on [p1,s1,mu1]polyfit(x,y,3); %3阶多项式拟合 y1polyval(p1,x,s1,mu1); [p2,s…

2024.3.17 机器学习周报

引言 Abstract 文献阅读 1、题目 R-TRANSFORMER: RECURRENT NEURAL NETWORK ENHANCED TRANSFORMER 2、引言 递归神经网络长期以来一直是序列建模的主要选择。然而&#xff0c;它严重遭受两个问题&#xff1a;在捕获非常长期的依赖性和无法并行化的顺序计算过程中无能为力…

云服务器2核4G能支持多少人同时访问?拿本记上!

腾讯云轻量2核4G5M带宽服务器支持多少人在线访问&#xff1f;5M带宽下载速度峰值可达640KB/秒&#xff0c;阿腾云以搭建网站为例&#xff0c;假设优化后平均大小为60KB&#xff0c;则5M带宽可支撑10个用户同时在1秒内打开网站&#xff0c;并发数为10&#xff0c;经阿腾云测试&a…

[蓝桥杯练习题]确定字符串是否包含唯一字符/确定字符串是否是另一个的排列

确定字符串是否包含唯一字符 #include<bits/stdc.h> using namespace std; int main(){ios::sync_with_stdio(0);cin.tie(nullptr);cout.tie(nullptr);map<char,int>m;string s;cin>>s;for(int i0;i<s.size();i){if(isalpha(s[i]))s[i]tolower(s[i]);if(…

如何使用“Docker registry创建本地仓库,在服务器之间进行文件push和pull”?

1.1、在服务器1&#xff0c;运行registry docker run -d -p 5000:5000 -v ${PWD}/registry:/var/lib/registry --restart always --name registry registry:2.7.11.2、编辑/etc/docker/daemon.json 文件&#xff0c; 192.168.xxx.xxx 换成你自己 registry 服务的地址 sudo na…

印度交易所股票行情数据API接口

1. 历史日线 # Restful API https://tsanghi.com/api/fin/stock/XNSE/daily?token{token}&ticker{ticker}默认返回全部历史数据&#xff0c;也可以使用参数start_date和end_date选择特定时间段。 更新时间&#xff1a;收盘后3~4小时。 更新周期&#xff1a;每天。 请求方式…