Web之HTML笔记

Web之HTML、CSS、JS

  • Web标准
    • 一、HTML(超文本标记语言)
      • HTML 基本结构标签
      • 常用标签
        • 1.font标签
        • 2.p标签
        • 3.注释
        • 4.h系列标题
        • 5.img
        • 6.超链接a
        • 7.列表
        • 8.表格
        • 9.表单

Web之CSS笔记
Web之JavaScript(jQuery)笔记

Web标准

  • 结构标准用于对网页元素进行整理和分类(HTML)
  • 表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)
  • 行为标准用于对网页模型的定义及交互的编写(JavaScript)

一、HTML(超文本标记语言)

HTML 基本结构标签

标签名含义说明
<html></html>HTML标签页面中的最大的标签,称为跟标签
<head></head>文档的头部注意在head标签中必须要设置的标签是title
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体元素包含文档的所有内容,页面内容基本都是放到body里面的

常用标签

1.font标签

部分常用属性(html5不支持该标签,建议使用CSS):

color属性:修改颜色
face属性:修改字体(类型)
size属性:修改文本大小(1-7)
<font color="red" face="黑体" size="3">font字体标签</font>

font字体标签

2.p标签

全称paragraph,用来表示段落,它是一个行内元素,一个标签独占一行。

<p>......</p>

......

<br>:全称barter rabbet,换行标签,用于插入一个换行符。

3.注释
<!-- 需求: 在网页上显示 font字体标签 , 并修改字体为 黑体, 颜色为红色。-->
4.h系列标题

<h1><h6>:标题标签,用于定义标题的级别,<h1>是最高级别的标题,依次递减。

<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
<h6>标题标签6</h6>

标题标签1

标题标签2

标题标签3

标题标签4
标题标签5
标题标签6
5.img

<img>: 图像标签,用于插入图像;通过src属性指定图像的URL,可以是相对路径或绝对路径。

<img src="test.jpg" alt="风景" title="夜景" height="100" />
风景

常用属性

 alt属性:alt属性用于指定图像的替代文本。当图像无法加载时,替代文本会显示在图像的位置。width和height属性:width和height属性用于指定图像的宽度和高度。可以使用像素(px)、百分比(%)或其他单位来指定。title:提示文本,鼠标放到图片上,就会有提示
6.超链接a

用于从一个页面链接到另一个页面。

<a href="https://bilibili.com">网址直接跳转</a> 
<a href="images/1.webp">相对路径跳转</a>
<a href="hello.exe">如果是打不开的文件,则下载之</a>
<a href="">空链接是刷新</a>
<a href="#">#是回到顶部</a>
<a href="javascript:;">禁止链接跳转</a>

网址直接跳转
相对路径跳转
如果是打不开的文件,则下载之
空链接是刷新
#是回到顶部
禁止链接跳转

常用属性

target:打开方式,默认是_self.如果是_blank则用新的标签页打开

锚点

href里面为#id变为锚点功能,点击跳转到id对应的块。

1.快速定位到页面中的某个位置。

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">第一集剧情 <br>第一集剧情 <br>...
</p>
<p id="two">第二集剧情 <br>第二集剧情 <br>...
</p>
<p id="three">第三集剧情 <br>第三集剧情 <br>...
</p>

第一集
第二集
第三集

第一集剧情
第一集剧情
...

第二集剧情
第二集剧情
...

第三集剧情
第三集剧情
...

2.跳转到不同页面的不同位置

<a href=”demo.html#锚点名称”>demo.html页面 xxx元素位置</a><a href=”demo.html#box”>demo.html页面box元素位置</a>

demo.html页面 xxx元素位置

demo.html页面box元素位置

7.列表

ul ——无序列表

 <ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li><li>无序列表4</li></ul>
  • 无序列表1
  • 无序列表2
  • 无序列表3
  • 无序列表4

ol ——有序列表

  <ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li></ol>
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
  4. 有序列表4
8.表格

一种用于展示结构化数据的标记语言元素。
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

caption标签:表格的标题
thead标签:表格的页眉
tbody标签:表格的主体
tfoot标签:表格的页脚
th标签:行/列的标题,文字加粗显示
<table border="1px" bgcolor="green" bordercolor="yellow" width="300px"height="175px"><caption>鲜鱼价目表</caption><thead><!-- 表头部分 --><tr><th>序号</th><th>鱼的种类</th><th>价格</th></tr></thead><tbody> <!--表主体部分--><tr align="center"><td>1</td><td>草鱼</td><td>18.6</td></tr><tr valign="top"><td>2</td><td>鲤鱼</td><td>28.9</td></tr><tr><td>3</td><td>食人鱼</td><td>1000</td></tr></tbody></table>
鲜鱼价目表
序号鱼的种类价格
1草鱼18.6
2鲤鱼28.9
3食人鱼1000

table标签的属性

  • border=“1px” 设置边框
  • bgcolor=“green” 设置背景颜色
  • bordercolor=“yellow” 设置边框颜色
  • width=“300px” 设置表格的宽度
  • height=“175px” 设置表格的高度
  • table表格里的边框是带有间距的 解决方案就是给table标签加: style="border-collapse: collapse;" 去掉边框间的间距
  • align=“center” 设置表格本身的水平对齐方式,注意不是文字居中,而是整张表格在页面居中显示

tr标签的属性

  • align=“” 设置内容的水平对齐方式 left靠左/center居中/right靠右
  • valign=“” 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下

td标签的属性

  • colspan=“n” 跨列,从当前单元格开始,向右合并n个单元格(n也包含当前单元格)
  • rowspan=“n” 跨行,从当前单元格开始,向下合并n个单元格(n也包含当前单元格)
<!-- table>tr*3>td*4 在数字后按Tab补全--><table border="1px" width="300px" height="200px"><tr><td colspan="2">1-1</td><!-- 被合并的单元格一定得删掉 --><!-- <td>1-2</td> --><td>1-3</td><td>1-4</td></tr><tr><td>2-1</td><td rowspan="2">2-2</td><td>2-3</td><td>2-4</td></tr><tr><td>3-1</td><!-- 被合并的单元格一定要删掉! --><!-- <td>3-2</td> --><td>3-3</td><td>3-4</td></tr></table><hr> <!-- 创建一条水平线 -->
1-11-31-4
2-12-22-32-4
3-13-33-4

9.表单

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。

<form>表单标签  <!-- 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等 --><input type="text">表单域 <button type="submit">提交按钮</button >
</form>

input属性

  • type
type值表单类型
text单行文本框
passworld密码文本框
button按钮
reset重置按钮
image图像形式的提交按钮
radio单选按钮
checkbox复选框
hidden隐藏字段
file文件上传
  • name属性:给出当前input表单的名字。
  • value属性:表示该input表单的默认值。
    1)当input type=“text”、“password”、"hidden"时,value中的值会成为其输入框的初始值;
    2)当input type=“button”、“reset”、"submit"时,定义按钮上的显示的文本;
    3)当input type=“checkbox”、“radio”、"image"时,定义与输入相关联的值;
    注意:input type="checkbox"和input type="radio"中必须设置
  • value属性;value属性无法与input type="file"一通使用。
  • style属性:为input元素设置简单的CSS样式。
  • width属性:当input type="image"时,通过width属性控制元素的宽度;
  • height属性:当input type="image"时,通过height属性控制元素的高度;
  • maxlength属性:定义input元素中可输入的最长字符数。

select和option创建下拉式表单

<select>      <option value="1" selected="selected">qq.com</option><option value="2">163.com</option><option value="3">tongji.edu.cn</option>
</select>

selected标注默认选中的内容。

textarea标签创立多行文本框

<textarea name="introduction" id="introduction" cols="30" rows="10"></textarea>

表单示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><form action="" method=""><label>请输入姓名:</label><input type="text" name="" id=""><br><label>请输入密码:</label><input type="password" name="" id=""><br><label>再次输入密码:</label><input type="password" name="" id=""><br><lebel>性别:</lebel><input type="radio" name="xb" id="" value="1"><input type="radio" name="xb" id="" value="0"><br><label>兴趣爱好</label><input type="checkbox" name="" id="" value="1">游泳<input type="checkbox" name="" id="" value="2">看书<input type="checkbox" name="" id="" value="3">爬山<input type="checkbox" name="" id="" value="4">思考<br><label>生日:</label><select><option value="1995">1995</option><option value="1996">1996</option><option value="1997" selected="selected">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option></select><select><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">4</option><option value="5">5</option></select><select><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">4</option><option value="5">5</option></select><br>头像<img src="image/headLogo/13.gif"><select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select><br><input type="button" value="普通按钮"><input type="submit" value="提交按钮"></form><textarea rows="10" cols="100" name="" id="">请输入</textarea><input type="file"><input type="button" value="上传"><br>000<input type="hidden" name="" id="">000<select size="4" multiple="true"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="4">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option></select><select size="4" multiple="true"></select>
</body>
</html>

在这里插入图片描述

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

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

相关文章

Git-概念与架构

GIT-概念与架构 一、背景和起源二、版本控制系统1.版本控制分类1.1 集中式版本控制1.2 分布式版本控制 2.Git和SVN对比2.1 SVN2.2 GIT 三、GIT框架1.工作区&#xff08;working directory&#xff09;2.暂存区&#xff08;staging area&#xff09;3.本地仓库&#xff08;local…

在vmware中给linux添加硬盘

1.必须在断开linux电源的情况下&#xff0c;才能添加硬盘成功。注&#xff1a;自己好几次在开机状态下添加硬盘都失败了&#xff0c;然后关机后&#xff0c;又试了下&#xff0c;居然成功了。

鸿蒙APP外包开发需要注意的问题

在进行鸿蒙&#xff08;HarmonyOS&#xff09;应用开发时&#xff0c;开发者需要注意一些重要的问题&#xff0c;以确保应用的质量、性能和用户体验。以下是一些鸿蒙APP开发中需要特别关注的问题&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软…

Python学习(一)基础语法

文章目录 1. 入门1.1 解释器的作用1.2 下载1.3 基础语法输入输出语法与引号注释&#xff1a;变量&#xff1a; 数据类型与四则运算数据类型四则运算数据类型的查看type()数据类型的转换int()、int()、float() 流程控制格式化输出循环与遍历逻辑运算符list遍历字典dict遍历 跳出…

Java Web——JavaScript基础

1. 引入方式 JavaScript程序不能独立运行&#xff0c;它需要被嵌入HTML中&#xff0c;然后浏览器才能执行 JavaScript 代码。 通过 script 标签将 JavaScript 代码引入到 HTML 中&#xff0c;有3种方式&#xff1a; 1.1. 内嵌式(嵌入式) 直接写在html文件里&#xff0c;用s…

[C/C++]数据结构 链表OJ题:随机链表的复制

题目描述: 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新…

从零开始 通义千问大模型本地化到阿里云通义千问API调用

从零开始 通义千问大模型本地化到阿里云通义千问API调用 一、通义千问大模型介绍 何为“通义千问”&#xff1f; “通义千问大模型”是阿里云推出的一个超大规模的语言模型&#xff0c;具有强大的归纳和理解能力&#xff0c;可以处理各种自然语言处理任务&#xff0c;包括但…

Oracle主备切换,ogg恢复方法(集成模式)

前言: 文章主要介绍Oracle数据库物理ADG主备在发生切换时(switchover,failover)&#xff0c;在主库运行的ogg进程(集成模式)如何进行恢复。 测试恢复场景&#xff0c;因为集成模式不能在备库配置&#xff0c;所以场景都是基于主库端: 1 主备发生switchover切换&#xff0c;主库…

VUE(一)

1.vue简介 英文官网: Vue.js - The Progressive JavaScript Framework | Vue.js 中文官网: Vue.js - 渐进式 JavaScript 框架 | Vue.js 2.Vue的特点 3.初识VUE 在官网下载VUE.js,有两个版本&#xff0c;一个开发一个生产 <!DOCTYPE html> <html lang"en"…

贝锐蒲公英云AP,企业WiFi功能如何使用?

1. 功能介绍 基于WPA2-EAP安全认证技术&#xff0c;为企业提供了一套易用安全的企业无线网络,实现企业员工通过蒲公英客户端一键连接企业无线WiFi。自动分配一人一帐一密&#xff0c;无需配置证书或手动输入密码&#xff0c;减少沟通成本&#xff0c;方便快捷&#xff0c;提高…

前置语音群呼与语音机器人群呼哪个更好

最近通过观察自己接到的营销电话&#xff0c;通过语音机器人外呼的量应该有所下降。同时和客户交流获取到的信息&#xff0c;也是和这个情况类似&#xff0c;很多AI机器人群呼的量转向了OKCC前置语音群呼。询问原因&#xff0c;说是前置语音群呼转化更快&#xff0c;AI机器人群…

Android修行手册-POI操作中文API文档

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

pm2在Windows环境中的使用

pm2 进程管理工具可以Windows操作系统上运行&#xff0c;当一台Windows电脑上需要运行多个进程时&#xff0c;或者运维时需要运行多个进程以提供服务时。可以使用pm2&#xff0c;而不再是使用脚本。 1. 使用PM2管理进程 1.1. 启动PM2项目 1.1.1. 直接启动项目 参数说明&…

PostgreSQL 数据定义语言 DDL

文章目录 表创建主键约束非空唯一约束检查约束外键约束默认值约束 触发器表空间构建表空间 视图索引索引的基本概念索引的分类创建索引 物化视图 表创建 PostgreSQL表的构建语句与所有数据库都一样&#xff0c;结构如下&#xff0c;其核心在于构建表时&#xff0c;要指定上一些…

ACWSpring1.3

首先,前端写ajax写上我们的访问路径(就在我们前端的源代码里面),我们建了两个包pkController用于前端页面url映射过来一层一层找到我们的RestController返回bot1里面有键值,返回的这就是一个session对象bot1这个map.前端拿到我们bot1里的两个值给到我们前端显示出来 1准备页面:…

Linux:补充一些常用命令

Linux&#xff1a;补充一些常用命令 1. free -h2. df -lh3. du -sh *4. uname -a5. which6. mvn install 编译打包7. find -name *.jar8. cd -9. nohup java -jar *.jar &10. ps -ef|grep java11. netstat -ntlp 1. free -h free 命令显示系统使用和空闲的内存情况&#x…

Flutter笔记:缩放手势

Flutter笔记 缩放手势 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134485138 目 录 1. 概述2. 缩放手…

Java多线程核心技术第一阶段-Java多线程基础 02

接上篇&#xff1a;Java多线程核心技术第一阶段-Java多线程基础 01 3.3 清除中断状态的使用场景 this.interrupted()方法具有清除状态标志值的功能&#xff0c;借用此特性可以实现一些效果。 【示例3.3.1】在MyThread4线程中向list1和list2存放数据&#xff0c;基于单一职责原…

docker-compose 部署 MySQL 8

目录 前言MySQL 配置文件(my.cnf)docker-compose.yml安装卸载 前言 Windows/Linux 系统通过 docker-compose 部署 MySQL8.0。 MySQL 配置文件(my.cnf) # 服务端参数配置 [mysqld] usermysql # MySQL启动用户 default-storage-engineINNODB # 创建新表时…

【脑与认知科学】【n-back游戏】

请参考课堂内容&#xff0c;设计一种测试工作记忆的实验方法&#xff0c;并选择三位同学作为被试测试工作记忆。请画出实验流程图&#xff0c;叙述实验测试目标&#xff0c;并分析实验结果。 举例&#xff1a;一般我们选择n_back来测试对数字或字母的记忆&#xff0c;选择色块实…