Web之HTML笔记

news2024/11/22 18:01:37

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.coloradmin.cn/o/1223900.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Redis持久化机制详解

Redis持久化机制详解

使用缓存的时候&#xff0c;我们经常需要对内存中的数据进行持久化也就是将内存中的数据写入到硬盘中。大部分原因是为了之后重用数据&#xff08;比如重启机器、机器故障之后恢复数据&#xff09;&#xff0c;或者是为了做数据同步&#xff08;比如 Redis 集群的主从节点通过 …
阅读更多...
公司防泄密软件科普：防止公司文件泄露的软件有什么功能？哪个好？

公司防泄密软件科普：防止公司文件泄露的软件有什么功能？哪个好？

公司防泄密软件的主要功能是保护企业的重要文件和数据&#xff0c;以防止未经授权的访问和泄露。以下是防泄密软件的一些常见功能&#xff1a; 1、数据加密&#xff1a;防泄密软件可以使用加密算法对文件进行加密&#xff0c;使得未经授权的人无法读取或复制文件。 2、文件备份…
阅读更多...
ExcelBDD PHP Guideline

ExcelBDD PHP Guideline

在PHP里面支持利用Excel的BDD&#xff0c;也支持利用Excel进行参数化测试 ExcelBDD Use Excel file as BDD feature file, get example data from Excel files, support automation tests. Features The main features provided by this library are: Read test data acco…
阅读更多...
QT专栏1 -Qt安装教程

QT专栏1 -Qt安装教程

#本文时间2023年11月18日&#xff0c;Qt 6.6# Qt 安装简要说明&#xff1a; Qt有两个版本一个是商业版本&#xff08;收费&#xff09;&#xff0c;另一个是开源版本&#xff08;免费&#xff09;&#xff1b; 打开安装程序时&#xff0c;通过判断账号是否有公司&#xff0c;安…
阅读更多...
SpringCloud 之Feign的性能优化

SpringCloud 之Feign的性能优化

Feign底层默认是JDK自带的HttpURLConnection&#xff0c;它是单线程发送HTTP请求的&#xff0c;不能配置线程池&#xff0c;我们使用Okhttp或者HttpClien 朵发送http请求&#xff0c;并且它们两个都支持线程池。 常见HTTP客户端 HttpClient HttpClient 是 Apache Jakarta Comm…
阅读更多...
竞赛 题目：基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉

竞赛 题目：基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基…
阅读更多...
shopee跨境选品工具——知虾，助您精准选品和科学运营

shopee跨境选品工具——知虾，助您精准选品和科学运营

在如今的电商时代&#xff0c;shopee跨境选品是每个卖家都面临的重要任务。而Shopee作为一家知名的跨境电商平台&#xff0c;为卖家提供了一系列有用的工具和功能来帮助他们进行精准选品和科学运营。其中&#xff0c;知虾作为Shopee的大数据采集及分析平台&#xff0c;为卖家提…
阅读更多...
Failed to execute org.scala-tools:maven-scala-plugin:2.15.2解决

Failed to execute org.scala-tools:maven-scala-plugin:2.15.2解决

原因也不是很清楚&#xff0c;查看一个博主文章(net.alchim31.maven:scala-maven-plugin&#xff1a;maven依赖无法下载或无法编译)得到的解决方案&#xff1a; 在idea的terminal执行以下语句即可实现maven对scala代码的编译&#xff1a; mvn clean scala:compile compile pac…
阅读更多...
基于黑猩猩算法优化概率神经网络PNN的分类预测 - 附代码

基于黑猩猩算法优化概率神经网络PNN的分类预测 - 附代码

基于黑猩猩算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于黑猩猩算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于黑猩猩优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络…
阅读更多...
[Windows Server 2019] 安装与配置邮件服务器

[Windows Server 2019] 安装与配置邮件服务器

文章目录 安装Winmail邮件服务器配置域名配置更改默认端口验证安装Winmail邮件服务器 Winmail官网
阅读更多...
软件工程师参加技术峰会，带来的价值，你想象不到！

软件工程师参加技术峰会，带来的价值，你想象不到！

参加技术大会是软件开发人员了解行业最新技术和未来发展趋势的重要途径。 在技术大会上&#xff0c;来自世界各地的专家、学者和企业代表会分享他们的最新研究成果、技术创新和趋势分析。这对于软件开发人员来说&#xff0c;是一个宝贵的学习机会&#xff0c;可以帮助他们拓宽…
阅读更多...
OpenAI 解雇了首席执行官 Sam Altman

OpenAI 解雇了首席执行官 Sam Altman

Sam Altman 已被 OpenAI 解雇&#xff0c;原因是担心他与董事会的沟通和透明度&#xff0c;可能会影响公司的发展。该公司首席技术官 Mira Murati 将担任临时首席执行官&#xff0c;但 OpenAI 可能会从科技行业寻找新的首席执行官来领导未来的产品开发。Altman 的解雇给 OpenAI…
阅读更多...
Java多线程下使用TransactionTemplate控制事务

Java多线程下使用TransactionTemplate控制事务

简介 本文展示了在Java的多线程环境下使用Spring的TransactionTemplate控制事务的提交与回滚&#xff0c;当任何一个子线程出现异常时&#xff0c;所有子线程都将回滚 环境 JDK&#xff1a;1.8.0_211 SpringBoot&#xff1a;2.5.10 说明 本文通过同时写入用户(User)和用户详细…
阅读更多...
ICMP报文格式

ICMP报文格式

阅读更多...
【论文精读3】CasMVSNet

【论文精读3】CasMVSNet

模型处理过程&#xff1a; 一. 问题引入 基于学习的MVS算法因为受到显存的限制&#xff0c;输出的深度图的空间分辨率只有输入图像的1/16大小&#xff08;长宽均为输入图像的1/4大小&#xff09;。以MVSNet为例&#xff0c;对于16001184大小的输入图像&#xff0c;需要构建hwD…
阅读更多...
文件隐藏 [极客大挑战 2019]Secret File1

文件隐藏 [极客大挑战 2019]Secret File1

打开题目 查看源代码发现有一个可疑的php 访问一下看看 点一下secret 得到如下页面 响应时间太短我们根本看不清什么东西&#xff0c;那我们尝试bp抓包一下看看 提示有个secr3t.php 访问一下 得到 我们看见了flag.php 访问一下可是什么都没有 那我们就进行代码审计 $file$_…
阅读更多...
动手学深度学习——循环神经网络的从零开始实现（原理解释+代码详解）

动手学深度学习——循环神经网络的从零开始实现（原理解释+代码详解）

文章目录 循环神经网络的从零开始实现1. 独热编码2. 初始化模型参数3. 循环神经网络模型4. 预测5. 梯度裁剪6. 训练 循环神经网络的从零开始实现 从头开始基于循环神经网络实现字符级语言模型。 # 读取数据集 %matplotlib inline import math import torchfrom torch import …
阅读更多...
shopee地区选品：深入了解选品工具——知虾，优化您的销售策略

shopee地区选品：深入了解选品工具——知虾，优化您的销售策略

作为一家社交电商平台&#xff0c;Shopee拥有庞大的用户群体和海量的交易数据&#xff0c;这使得该平台的选品数据对于卖家来说非常宝贵。在这方面&#xff0c;知虾工具是一款强大的分析工具&#xff0c;可以帮助卖家深入了解用户的消费习惯、喜好和需求&#xff0c;从而更准确…
阅读更多...
深入解析：开发抖音酒店景区小程序的技术

深入解析：开发抖音酒店景区小程序的技术

抖音作为社交媒体平台的佼佼者&#xff0c;其独特的风格和用户基础吸引了无数开发者的目光。在本文中&#xff0c;我们将深入解析开发抖音酒店景区小程序的关键技术&#xff0c;为开发者提供实用指南。 1.抖音风格设计 在开发酒店景区小程序时&#xff0c;首先要注重界面设计…
阅读更多...
强化学习各种符号含义解释

强化学习各种符号含义解释

&#xff1a;状态 : 动作 : 奖励 : 奖励函数 : 非终结状态 : 全部状态&#xff0c;包括终结状态 : 动作集合 ℛ : 奖励集合 : 转移矩阵 : 离散时间步 &#xff1a; 回合内最终时间步 : 时间t的状态 : 时间t动作 : 时间t的奖励,通常为随机量&#xff0c;且由和决定 : 回报 : n步…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023