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标准

  • 结构标准用于对网页元素进行整理和分类(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.mfbz.cn/a/161952.html

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

相关文章

二维码智慧门牌管理系统升级解决方案：门牌聚合，让管理更便捷！

二维码智慧门牌管理系统升级解决方案：门牌聚合，让管理更便捷！

文章目录 前言一、传统门牌管理系统的瓶颈二、地图门牌聚合展示的优势三、地图门牌聚合展示的实现方法四、智慧门牌管理系统的未来发展 前言 随着城市的发展和建设&#xff0c;对于地址信息的管理变得越来越重要。而智慧门牌管理系统作为管理地址信息的重要工具&#xff0c;其…
阅读更多...
SARAS-Net: Scale and Relation Aware Siamese Network for Change Detection

SARAS-Net: Scale and Relation Aware Siamese Network for Change Detection

SARAS-Net&#xff1a;用于变化检测的尺度和关系感知的孪生网络 AAAI Chao-Peng Chen, Jun-Wei Hsieh, Ping-Yang Chen, Yi-Kuan Hsieh, Bor-Shiun Wang 2023 摘要&#xff1a;变化检测(CD)旨在找出不同时间两幅图像之间的差异&#xff0c;并输出变化图来表示该区域是否发生了…
阅读更多...
中国净初级生产力年度合成产品NPP（MYD17A3H.006）

中国净初级生产力年度合成产品NPP（MYD17A3H.006）

中国净初级生产力年度合成产品NPP&#xff08;MYD17A3H.006&#xff09;由航天宏图实验室提供&#xff0c;根据NASA MODIS数据&#xff08;MYD17A3H.006&#xff09;通过航天宏图 Smoother计算得到的平滑后NPP产品&#xff0c;解决了影像云雾覆盖、像元异常值等问题。对处理后的…
阅读更多...
c语言-浅谈指针（3）

c语言-浅谈指针（3）

文章目录 1.字符指针变量常见的字符指针初始化另一种字符指针初始化例&#xff1a; 2.数组指针变量什么是数组指针变量数组指针变量创建数组指针变量初始化例&#xff08;二维数组传参的本质&#xff09; 3.函数指针变量什么是函数指针变量呢&#xff1f;函数指针变量创建函数指…
阅读更多...
SpringSecurity6 | 自动配置(下)

SpringSecurity6 | 自动配置(下)

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…
阅读更多...
我叫：冒泡排序【JAVA】

我叫：冒泡排序【JAVA】

1.什么是冒泡排序&#xff1f; 冒泡排序(Bubble Sorting)的基本思想是:通过对待排序序列从前向后&#xff08;从下标较小的元素开始)&#xff0c;依次比较相邻元素的值,若发现逆序则交换,使值较大的元素逐渐从前移向后部,就象水底下的气泡一样逐渐向上冒。 2.来个实战应用 我们…
阅读更多...
从键盘输入5个学生的信息（姓名、学号、成绩）, 存入一个结构体数组中，计算平均分，并按成绩 高低排序并输出.

从键盘输入5个学生的信息（姓名、学号、成绩）, 存入一个结构体数组中，计算平均分，并按成绩 高低排序并输出.

代码如下 #include<stdio.h> #include<string.h> #include<stdlib.h> /* 1.练习结构体数组排序　　 从键盘输入5个学生的信息&#xff08;姓名、学号、成绩&#xff09;,存入一个结构体数组中&#xff0c;计算平均分&#xff0c;并按成绩高低排序并输出. */…
阅读更多...
python学习：break用法详解

python学习：break用法详解

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 在执行while循环或者for循环时&#xff0c;只要循环条件满足&#xff0c;程序会一直执行循环体。 但在某些场景&#xff0c;我们希望在循环结束前就强制结束循环。 Python中有两种强制结束循环的方法&#xff1a; continue语…
阅读更多...
heatmap | cell cycle genes in Seurat

heatmap | cell cycle genes in Seurat

目的&#xff1a;使用bulk 数据&#xff0c;查看HeLa 双胸苷阻断法 细胞同步化 释放 [0, 3, 4.5, 6, 9, 10.5, 12, 15, 18, 19.5, 21, 22.5, 25.5, 30] 小时后 cell cycle 基因的表达情况。 1.结果 S phase G2M phase S G2M phase 不方便看&#xff0c;横过来看&#xff1a;…
阅读更多...
Linux下运行Jmeter压测

Linux下运行Jmeter压测

一、在Linux服务器先安装SDK 1、先从官网下载jdk1.8.0_131.tar.gz&#xff0c;再从本地上传到Linux服务器 2、解压&#xff1a;tar -xzf jdk1.8.0_131.tar.gz&#xff0c;生成文件夹 jdk1.8.0_131 3、在/usr/目录下创建java文件夹&#xff0c;再将 jdk1.8.0_131目录移动到/u…
阅读更多...
【操作系统】磁盘物理地址怎么表示

【操作系统】磁盘物理地址怎么表示

常见主存物理地址是一串01串&#xff0c;那磁盘物理地址呢&#xff1f; 磁盘物理地址由以下组成&#xff1a; 柱面号磁头号扇区号 重点知识点辨析&#xff1a; 磁盘物理地址的翻译是由磁盘驱动程序进行的&#xff0c;目的是将逻辑上的蔟号转化为上述的物理地址 408真题溯源…
阅读更多...
harmonyOS鸿蒙开发工具下载安装以及使用流程

harmonyOS鸿蒙开发工具下载安装以及使用流程

注册账号 进入鸿蒙官方网站&#xff1a;https://www.harmonyos.com/ 推荐使用手机号注册 进行实名认证 下载开发环境 华为集成开发环境IDE DevEco Device Tool下载 | HarmonyOS设备开发 下载开发工具 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 安装 无脑下一…
阅读更多...
使用共享内存进行通信的代码和运行情况分析,共享内存的特点(拷贝次数,访问控制),加入命名管道进行通信的代码和运行情况分析

使用共享内存进行通信的代码和运行情况分析,共享内存的特点(拷贝次数,访问控制),加入命名管道进行通信的代码和运行情况分析

目录 示例代码 头文件(comm.hpp) log.hpp 基础版 -- 服务端 代码 运行情况 加入客户端 代码 运行情况 两端进行通信 客户端 代码 注意点 服务端 代码 两端运行情况 共享内存特点 拷贝次数少 管道的拷贝次数 共享内存的拷贝次数 没有访问控制 管道 共享…
阅读更多...
Spring学习③__Bean管理

Spring学习③__Bean管理

目录 IOC接口ApplicationContext 详解IOC操作Bean管理基于xml方式基于xml方式创建对象基于xml方式注入属性使用set方法进行注入通过有参数的构造进行注入p 名称空间注入&#xff08;了解&#xff09; 基于xml方式注入其他类型属性xml 注入数组类型属性 IOC接口 IOC思想基于IOC…
阅读更多...
龙芯 操作系统选择和安装

龙芯 操作系统选择和安装

龙芯3a5000及之后的cpu底层架构已经从mips64el改为了loongarch64 所以这里分了2种来说明&#xff0c;分别对应3a4000之前的和3a5000之后的 龙芯的系统安装难点在于操作系统的选取和引导 一、烧录工具 制作安装盘使用常规的烧录工具是不行滴&#xff0c;会提示没有\boot\initrd…
阅读更多...
Vue 路由缓存 防止路由切换数据丢失 路由的生命周期

Vue 路由缓存 防止路由切换数据丢失 路由的生命周期

在切换路由的时候&#xff0c;如果写好了一丢数据在去切换路由在回到写好的数据的路由去将会丢失&#xff0c;这时可以使用路由缓存技术进行保存&#xff0c;这样两个界面来回换数据也不会丢失 在 < router-view >展示的内容都不会被销毁&#xff0c;路由来回切换数据也…
阅读更多...
【SpringBoot3+Vue3】四【实战篇】-前端（vue基础）

【SpringBoot3+Vue3】四【实战篇】-前端（vue基础）

目录 一、项目前置知识 二、使用vscode创建 三、vue介绍 四、局部使用vue 1、快速入门 1.1 需求 1.2 准备工作 1.3 操作 1.3.1 创建html 1.3.2 创建初始html代码 1.3.3 参照官网import vue 1.3.4 创建vue应用实例 1.3.5 准备div 1.3.6 准备用户数据 1.3.7 通过…
阅读更多...
DPDK初始化

DPDK初始化

rte_eal_init │ ├──rte_cpu_is_supported&#xff1a;检查cpu是否支持 │ ├──rte_atomic32_test_and_set&#xff1a;操作静态局部变量run_once确保函数只执行一次 │ ├──pthread_self() 获取主线程的线程ID,只是用于打印 │ ├──eal_reset_internal_config&#x…
阅读更多...
UE 程序化网格 计算横截面

UE 程序化网格 计算横截面

首先在构造函数内加上程序化网格&#xff0c;然后复制网格体到程序化网格组件上&#xff0c;将Static Mesh&#xff08;类型StaticMeshActor&#xff09;的静态网格体组件给到程序化网格体上 然后把StaticMesh&#xff08;类型为StaticMeshActor&#xff09;Instance暴漏出去 …
阅读更多...
异地工业设备集中运维、数据采集，一招搞定

异地工业设备集中运维、数据采集，一招搞定

为了提升运维效率&#xff0c;能够及时发现和响应设备的故障、异常和潜在问题。 越来越多的企业都在搭建“集中式”的远程智慧运维体系&#xff0c;以提高运维效率和降低成本。 异地工业设备远程运维&#xff0c;提升响应效率、降低运维成本 以国内陕西某机床公司为例&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站