【前端】HTML基础总结

2023-11-12

概要
html基本结构
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>html标签</title>
</head>
<body>
</body>
</html>
&nbsp; 空格
&emsp; 空字符
html标签
<h1></h1> 标题标签1-6之间字体大小逐渐减小
<p></p> 段落标签
<b></b> 加粗
<strong></strong> 加粗优化搜索
<i></i> 斜体
<div></div> 块级元素
<span></span> 内联元素
<img src=”” alt=””> 图片标签
<a href=”” target=”_self(在原有网页上打开)/_blank(打开空白页)” title=”鼠标移动链接上显示的内容”> 链接标签
<textarea>产生文本区
<body background="xxxx.gif">插入背景


列表
<ol><li></li></ol> 有序列表
<ul><li></li></ul> 无序列表 消除列表圆点list-style:none;
<dl><dt><dd><dd></dt></dl> 自定义列表
表格
<table><tr><td rowspan=”列数” colspan=”行数”><td></tr></table>
th和td的区别:th自动加粗自身表格里的内容
表单
<form action="url" method='POST'></form>
POST与GET的区别,GET是把输入的内容拼接到URL上,
POST是把输入的内容保存到数据库中
产生下拉列表:<select>
<label>标签与<input>标签连用,如果您在 label 元素内点击文本,就会触发此控件。<label> 标签的 for 属性应当与相关元素的 id 属性相同
文 本 框<input type="text" value="" maxlength"可输入的最大长度" size="" />
提交按钮<input type="submit" value="提交" />
普通按钮<input type="button" value="普通按钮" />
密 码 框<input type="password" />
重置按钮<input type="reset" value="重置" />
单选按钮<input type="radio"checked="checked" />
文件上传按钮<input type="file"/>
多选按钮<input type="checkbox" />name
下拉框<select><optgroup=””><option></option></optgroup></select>
多行文本域<textarea  rows="" cols=""></textarea>
隐藏域<input type="hidden" />
图片按钮<input type="image" src= "" alt=”图片加载失败提示内容”>
易错知识点
  • <!DOCTYPE html>不属于HTML标签,它用于指定文档的类型
  • <pre>标签用于预定义格式处理,文本在浏览器中显示时遵循HTML文档规范
  • 在HTML表格里面如果我们的表格很复杂,那么表格要完全加载下来再显示,它的加载时间太长影响用户体验,所以我们可以使用表格结构划分标签,让它加载一部分就显示一部分。
  • HTML里面导入CSS样式时,使用link与@inport的区别:link除了可以加载CSS样式外还可以做很多事情,比如设置rel(文档与样式的关系)等等,link加载CSS时与页面同时加载,而@import加载时会先把页面下载下来,再加载
HTML链接
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
	<title>HTML图像与超链接</title>
	<meta charset="utf-8">
</head>
<body>
	<img src="F:\360MoveData\Users\acer\Desktop\捕获.PNG" alt="微信截图">  <!--绝对路径-->
	<!--alt的作用是当网络不好,或者src里面属性错误,
		或者浏览器禁用图片等不能显示图片的情况下显示的文字-->
	<img src="捕获.PNG" alt="微信截图">  <!--相对路径-->
	<!--当图片的位置发生改变的时候,绝对路径将不能显示,但是相对路径可以-->
	<!--设置属性-->
	<img src="捕获.PNG" height="100px" width="50px" >  <!--px代表像素-->  
	<img src="捕获.PNG" height="20%" width="30%" >  <!--也可以使用%来定义,%表示占容器大小的百分之几-->  
</body>
</html>
HTML列表
<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta charset="utf-8">    
</head>
<body>
<ol type="i" > <!--这是以小写罗马字符表示,border代表方框的粗细-->
    <li>白日依山尽</li>
    <li>黄河入海流</li>
</ol>
<ol type="a">
    <li>黄河入海流</li><!--这是小写字母表示-->
</ol>
<ol type='I'><!--这是以大写罗马字母bioassay-->
    <li>html是超文本标记语言</li>
</ol>
<ol type='A'><!--这是以大写罗马字母bioassay-->
    <li>html是超文本标记语言</li>
</ol>
<dl>
    <dt>列表项标题信息</dt>    <!--这三个标签必须一起使用-->
    <dd>列表项描述信息</dd>
    <dd>列表项描述信息</dd>
    <dt>列表项标题信息</dt>
</dl>
</body>
</html>
HTML自定义链表
<html>

<body>

<h2>一个定义列表:</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

显示结果
在这里插入图片描述

HTML表格
<!DOCTYPE html>
<html>
<head>
	<title>HTML表格</title>
	<meta charset="utf-8">
</head>
<body>
	<!--下面创建一行两列的表格-->
	<table border="1">  <!--设置边框,不设置的话默认没有-->
		<thead>
			<caption>定义列表标题</caption>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>
		</thead>
		<tbody>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>			
		</tfoot>
	</table>
</body>
</html>

效果:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【前端】HTML基础总结 的相关文章

  • 如何在 Lift 框架中添加新页面

    如何在 lift 中的 webapp 目录中添加一个可供用户访问的新页面 目前只能通过index html访问http localhost 8080 com http localhost 8080 or http localhost 808
  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • HTML 代码中的 PHP [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我用 HTML 代码编写了 PHP div div 但这出现在输出页面中 else print 我怎样才能让PHP执行 你的文件有一个 p
  • Facebook 点赞按钮消失

    我的网站中的 Facebook Like 按钮出现问题 添加此代码 由 facebook 提供 按钮在创建时正确显示在任何页面中
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在
  • 使用“表单控件”删除输入字段的轮廓

    我有一个输入字段 如下所示 在类名中我将其作为form control
  • Python:如何下载 blob url 视频?

    我想使用 Python 脚本从网站下载视频 但是该视频由如下 Blob URL 提供
  • jQuery 变量在定义时声称它是未定义的

    我试图在同一页面上有两个自动填充文本框 一个用于手机型号 input1 一个用于固件 input2 当两者都填充时 我希望显示一个带有ID input1input2 的div 但是当在input1 中输入值时 它声称phone 的变量未定义
  • html5 canvas 上的错误显示 lineWidth=1

    I have example https developer mozilla org samples canvas tutorial 4 5 canvas linewidth html https developer mozilla org
  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her
  • div 中的文本字符有限,添加“阅读更多”链接并在单击链接时显示所有字符

    我有一个 div 里面有文本 使用 PHP 和 MySQL 显示 结构如下 div class description p Here is a lot of text p div 我想在 p 标签内的文本超过 100 个字符时显示 阅读更多
  • 您可以将现有的 div 复制到模式对话框吗

    我有一个带有多个面板的仪表板来显示不同的信息 我希望能够添加一个按钮来以模式显示面板 我正在使用引导程序 我所能找到的只是已经编写的模态 我想复制作为面板的 div 标签的内容 然后将其显示在模型中 但我不确定如何进行 该面板的 html
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 用于渲染 html 子集的 Django templatetag

    我有一些 html 在本例中是通过 TinyMCE 创建的 我想将其添加到页面中 但是 出于安全原因 我不想只打印用户输入的所有内容 有谁知道模板标签 最好是过滤器 只允许呈现 html 的安全子集 我意识到 Markdown 和其他人就是
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 如何:带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击

随机推荐

  • RColorBrewer

    1 RColorBrewer工具包 该包是R中常用的颜色选取工具包 它具有简单易用的特点 对于不具备太多色彩理论的读者来说也十分友好 虽然该包主要是为地图上色而设计 但也可以用于其他用途 library RColorBrewer 下面就逐一
  • 宝来车联网显示服务器开小差,思域请靠边站,比亚迪秦Pro在此!还有导航路况信息显示、车联网 快来瞧瞧!...

    由于各地政策的不同 燃油车和新能源车在各地的发展情况也有所不同 接下来要讲得两辆汽油车还不错 分别是秦Pro和宝来 让我们来一起了解一下吧 车型 比亚迪秦Pro 2018款 1 5TI 自动智联锋尚型 国V 指导价 9 98万元 2020
  • 统计二叉树结点个数(C语言)

    函数接口定义 int NodeCount BiTree T T是二叉树树根指针 函数NodeCount返回二叉树中结点个数 若树为空 返回0 裁判测试程序样例 include
  • matlab双因素模型,matlab双因素方差分析

    在MATLAB中求解 源程序 a 76 67 81 56 51 82 69 96 59 70 68 59 上页 下页 返回 表4 9 双因素试验的方差分析表 方差来源 平方和 自由度 因素 方差分析用于两个或者两个以上因素样本均值的检验问
  • 【行为识别】TSN/TRN/TSM/SlowFast/Non-local

    前言 记录视频理解领域的几篇文章吧 由于每篇值得记录的东西不多 所以合在一起 关于开源框架 有港中文多媒体实验室的MMAction 有设备的就尽量多跑跑模型吧 视频相对于静态图像多了时间维度 静态图像的分类 检测 分割做得相对完善了 视频方
  • 2015中国数据库技术大会简介

    作为国内数据库与大数据领域最大规模的技术盛宴 2015第六届中国数据库技术大会 DTCC 即将于2015年4月16日 18日在北京新云南皇冠假日酒店震撼登场 大会以 大数据技术交流和价值发现 为主题 云集了国内外顶尖专家 共同探讨MySQL
  • Vue项目打包部署到Tomcat

    废话不多说 直接进入正题 一 通常在开发环境下请求后台接口会用到反向代理 而在生产环境中反向代理是不生效的 那么为了避免部署在服务器上时需要一个一个更改接口地址这种麻烦费时的操作 更改配置文件去自动切换接口地址 开发环境 在config文件
  • 关于使用QTcpSocket的一些总结

    QTcpSocket类的方法connectToHost会泄露内存 即使把调用这个方法的QTcpSocket实例delete掉 内存也不会释放 反复connectToHost会导致段错误 十分危险 必须控制connectToHost的使用次数
  • 10.文件操作

    CSAPP笔记 1 shell程序设计 2 内存管理 3 链接库 4 文件操作 5 多进程 6 多线程 7 网络编程 8 makefile 9 调试技巧与调试工具 文章目录 CSAPP笔记 前言 一 基础知识 1 文件复制 2 扫描目录 3
  • SpringBoot 2 -SpringBoot入门

    SpringBoot 2 SpringBoot入门 1 简介 2 第一个SpringBoot程序 3 升级 4 响应封装类配置 1 简介 springboot是什么 Spring Boot它本身并不提供Spring框架的核心特性以及扩展功能
  • 安装mysql5.7笔记

    1 查看系统中是否自带安装mysql yum list installed grep mysql 2 删除系统自带的mysql及其依赖 防止冲突 yum y remove mysql libs x86 64 3 安装wget命令 yum i
  • 计算机网络的体系结构--学习计算机网络的重中之重

    一 计算机网络体系结构的设计 1 为什么需要计算机网络体系结构 连接在网络上的两台计算机需要互相传送文件 a 必须有一条传送数据的通路 b 发起通信的计算机要将数据通信的通路激活 激活就是发出一些信令 保证要传送的计算机数据能在这条通路上正
  • 图的m着色问题(回溯法-满m叉树)

    span style font family none background color rgb 255 255 255 1 问题描述 span 给定无向连通图G和m种不同的颜色 用这些颜色为图G的所有顶点着色 每个顶点着一种颜色 每条边的
  • 时域采样,频域为什么周期延拓了

    频域周期延拓只是表面现象 其实质是不同的信号采样后的像可能相同 不可区分 如果硬要做实验 还是要有一定的编程基础 起码要整一个声音出来 让你听一听 可是你要重复这一实验可能又太难了 所以我还是讲一讲简单的数学原理 并用简单的三角函数及程序验
  • Linux系统同时安装MySQL5.7和MySQL8.0

    本文是在一台Centos7虚拟机上面同时安装mysql5 7和mysql8 0的步骤 记录一下 方便后续回顾 这篇文章之后会接着学习搭建两台虚拟机一主一从的架构 其中配置的文件名称 目录 端口号 IP地址要根据自己电脑的实际情况进行更改 m
  • Ubuntu 22.04上安装Docker的完整过程

    更新系统软件包 sudo apt update 安装所需的依赖包 以允许APT使用HTTPS sudo apt install apt transport https ca certificates curl software proper
  • Docker构建tomcat无法用startup.sh启动,无法输出catalina.out

    最近部署测试环境 想尝试一下docker 毕竟技术人不能落伍 So 我先学习了一下docker的简单使用 很多东西都是实践出真知 没必要看书找教程 大概看一下能干就可以了 菜鸟教程地址Docker 教程 菜鸟教程 初学者可以了解一下 下面进
  • 编程变量命名的一些技巧

    最近做项目仿真时 在编程的时候发现自己对变量的命名比较混乱 没有统一的规则 故搜集了一些资料对变量命名的技巧和原则有所了解和总结 总的来说 就是英文字母大小写 数字 下划线 按照一定的规则搭配 自己比较喜欢的是帕斯卡 pascal 命名法和
  • stm32f103 TIM2定时器4路PWM输出实验

    这里以TIM2为例 pwm c include pwm h uint16 t TIM2 CCR1 Val uint16 t TIM2 CCR2 Val uint16 t TIM2 CCR3 Val uint16 t TIM2 CCR4 Va
  • 【前端】HTML基础总结

    概要 html基本结构 nbsp 空格 emsp 空字符 html标签 h1 h1 标题标签1 6之间字体大小逐渐减小 p p 段落标签 b b 加粗 strong strong 加粗优化搜索 i i 斜体 div div 块级元素 spa