HTML内容简记

已于 2022-09-01 16:46:46 修改
阅读量154 收藏 2
点赞数 1
分类专栏： 前端相关 文章标签： html vscode 前端
于 2022-08-30 15:50:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45948181/article/details/126549554
版权

HTML内容简记

快捷键（vscode）

  1. Ctrl+N 新建文件
  2. Ctrl+S 保存
  3. Ctrl+加号，Ctrl+减号，放大缩小视图
  4. ！+ tab 生成页面骨架
  5. Ctrl+/ 注释语句

标签 <h1>-<h6>

h1到h6字越来越小，越来越细

段落 <p>和换行<br />和分割线<hr >

注意段落会插入垂直间距，换行不会

文本格式化标签

语义标签
加粗<strong>
倾斜<em>
下划线<dei>
删除线<ins>

<div>和<span>标签

div是大盒子，span是小盒子，一行只能放一个div，但可以放多个span

<img>图像标签

属性属性值说明
src图片路径必须属性
alt文本替换文本，图像不能显示的文字
title文本提示文本，鼠标放图像上显示的文字
width像素图像宽度
height像素图像高度
border像素边框粗细

<audio>音频和<video>视频

音频举例：
（宽和高可以不要，audio里面三行可以只要一行，写三行是为了兼容不同格式）

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

简单点：<audio src="./media/1.mp3" controls></audio>
视频举例:
（同音频，video里三个标签有一个就够，高和宽可以不要）

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

简单点的是这种：<video src="./media/2.mp4" controls></video>

超链接

格式：
<a href="跳转目标" target="目标窗口弹出方式">文本或图像<a />

属性作用
href用于指定链接目标url地址（必须有）”#“表示空
target用于指定链接打开方式，_self为默认，_blank指3新窗口打开

注意：
锚点链接：点击链接可以快速定位到页面中某个位置

  • 设置属性值为#名字的形式，如<a href="#two">第二集</a>
  • 在目标位置标签添加id属性=名字，如<h3 id="two">第二集</h3>

特殊字符

（特殊字符打不出来，所以在网上找的图）

<table>表格

举例

<table>
	<tr>
		<td>单元格里的文字</td>
	</tr>
</table>
  1. <table></table>用于定义表格的标签
  2. <tr> </tr> 标签用于定义表格中的行 ， 必须嵌套在 <table> </table> 标签中
  3. <td> </td> 用于定义表格中的单元格 ， 顿嵌套在 <tr> </tr> 标签中 。
  4. 字母 td 指表格数 （table data） ， 数庭单元格的内容 ·

<caption>标题

写在表格最开头的标签

<th>表头

<th>标签表示HTML表格的表头部分(table head的缩写)
举例：

<table>
	...
	<tr>
		<th>姓名</th>
	</tr>
	...
</table>

表头单元格也是单元格常用于表格第一行，突出重要性表头单元格里面的文字会加粗居中显示，可以有多个，和标题不一样。

属性

属性名属性值描述
alignleft、center、right规定表格相对周围元素的对齐方式。
border1或""规定表格单元是否拥有边框，默认为""，表示设有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素。
cellspacing像素值规定单元格之间的空白，默认2像素。
width像素值或百分比规定表格的宽度。

结构标签

  • <thead></thead>:用于定义表格的头部。<head>内部必须拥有<tr>标签。一般是位于第一行。
  • <tbody></body>:用于定义表格的主体，主要用于放数据本体。
  • <tfoot></tfoot>:标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

合并单元格

合并单元格方式：

  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”

目标单元格：（写合并代码）

  1. 跨行：最上侧单元格为目标单元格，写合并代码
  2. 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

  1. 先确定是跨行还是跨列合并。
  2. 找到目标单元格。写上合并方式=合并的单元格枚量。比如：。
  3. 删除多余的单元格。

列表

<u1><li>无序列表

举例：

<u1>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
</u1>

1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2.<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
3.<li>与</li>之间相当于一个容器，可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

<ol><li>有序列表

举例：

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
...
</o1>
  1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
  3. 有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

<dl><dt><dd>自定义列表

举例：

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
</dl>
  1. <dl></dl>里面只能包含<dt>和<dd>。
  2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

总结

标签名定义说明
<ul></ul>无序标签里面只能包含li 没有顺序，使用较多。li里面可以包含任何标签
<ol></ol>有序标签里面只能包含li 有顺序，使用相对较少。li里面可以包含任何标签
<d></dl>自定义列表里面只能包含dt和dd。dt和dd里面可以放任何标签

表单

表单域及属性

<form action="url地址" method:="提交方式” name="表单域名称">
	各种表单元素控件
</form>
属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。
methodget/post用于设置表单数据的提交方式，其取值为get或post。
name名称用于指定表单的名称，以区分同一个页面中的多个表单域
  1. 在我们写表单元素之前，应该有个表单域把他们包含
  2. 表单域是form标签

<input>及其属性

<input type="属性值" />
  1. <input/>标签为单标签
  2. type属性设置不同的属性值用来指定不同的控件类型
    input标签的属性：
属性属性值描述
name由用户自定义定义input元素的名称，
value由用户自定义规定input元素的值，
checkedchecked规定此input元素首次加载时应当被选中。
maxlength正整数规定输入字段中的字符的最大长度。
placeholder由用户自定义描述输入字段预期值的简短的提示信息。该提示会在用户输入值之前显示在输入字段中。

type的属性值：

属性值描述
button定义可点击按钮(多数情况下，用于通过lavaScript启动脚本)。
checkbox定义复选框。
file定义输入字段和"浏览"按钮，供文件上传。
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段。该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

<label>标签

<label>:标签为input元素定义标注（标签）。
<label>标签用于绑定一个表单元素当点击

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

核心：

<select>下拉列表

在页面中，如果有多个选项让用户选择，并目想要节约页面空间时，我们可以使用标签控件定义下拉列表
语法：

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>
  1. <select>中至少包含一对<option>。
  2. 在<option>中定义selected=“selected"时，当前项即为默认选中项

<textarea>文件域

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
语法：

<textarea rows="3" cols="20">
	文本内容
</textarea>
  1. 通过<textarea>标签可以轻松地创建多行文本输入框。
  2. cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。
码代码使我快乐
关注
专栏目录
CSS内容简记
weixin_45948181的博客
09-04 1794
写网页时方便查看的知识点，省一省搜索的功夫
简记个人博客源码免费分享
05-09
简记个人博客网站源码为博主现有博客网站，前端采用LayUI框架，此分享版本为asp + access。所有功能齐全，欢迎使用。 使用方法：上传至空间或服务器，通过IIS发布网站即可。 演示地址：...
HTML简记
Better_YZQ的博客
06-12 1172
web基础学习阅读 （推荐） 目录 HTML基础 概念 基本结构 HTML文件基本标记 HTML头部标记 元信息标记 基底网址标记 页面主体标记 设计网页文本内容 标题文字标记 设置文字格式 设置段落格式 水平线标记 其他文字标记 使用列表 无序列表 有序列表 定义列表——dl 菜单列表——menu 目录列表——dir（HTML5不支...
HTML DOM 事件简记
zhang_java_11的博客
08-12 141
HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 鼠标事件 DOM： 指明使用的 DOM 属性级别。 属性 描述 DOM onclick 当用户点击某个对象时调用的事件句柄。 2 oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发 ondblclick 当用户双击某个对象时调用的事件句柄。 2 onmousedown 鼠标按钮被按下。 2 onmouseenter 当鼠标指针移动到元素上时触发。
HTML：简记
Ben_boba的博客
07-29 152
HTML5学习简记
默默无闻但不碌碌无为
07-18 2596
HTML是一种超文本标记语言，超文本即我们在网页中看到的链接，标记指的是语言中的标签。
HTML开发简记
JourneyX的博客
11-19 810
1:WHATWG---网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。WHATWG 致力于 web 表单和应用程序. 2:定义文字方向。 ltr Here is some Hebrew text 3:定义长的引用。 This is a long quotation. This
Thymeleaf 简记
Beyond的博客
04-20 368
Thymeleaf Thymeleaf 是一种类似于 JSP 的动态网页技术 1.1 Thymeleaf 简介 JSP 必须依赖 Tomcat 运行，不能直接运行在浏览器中 HTML 可以直接运行在浏览器中，但是不能接收控制器传递的数据 Thymeleaf 是一种既保留了 HTML 的后缀，能够直接在浏览器中运行的能力，又实现了 JSP 显示动态数据的功能——静能查看页面效果，动则可显示数据 1.2 Thymeleaf 的使用 SpringBoot 应用对 Thymeleaf 提供了良好的支持
html 简记2
congklee的专栏
04-04 198
第10课：表格 单元格1 单元格2 单元格3 单元格4   该例在浏览器中将显示如下： 单元格1 单元格2 单元格3 单元格4 tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。  td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束
圣杯布局简记
YuChangBin99的博客
08-08 151
圣杯布局简记
简记个人博客网站源码 v2.10.01.rar
04-05
HTML负责内容结构，CSS负责样式设计，JavaScript则处理动态行为和用户交互。 7. **后端技术**：后端可能采用PHP、Node.js或Python等语言实现，处理用户请求，连接数据库，执行业务逻辑。常见的框架有Laravel、...
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1276
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML、CSS实现树状图
p_s_p的博客
09-09 608
【代码】HTML、CSS实现树状图。
使用HTML和CSS制作网页的全面指南
weidl001的博客
09-14 1129
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
【HTML】Html标签
千里之行，始于足下
09-12 1089
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
reader-lm：小模型 html转markdown
weixin_42357472的博客
09-12 418
输入网址：https://www.galaxy-geely.com/E5。
甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-12 982
本文将为大家介绍在使用DHTMLX Gantt时如何实现持久UI状态，欢迎下载新版组件体验！
介绍一些免费 的 html 5模版网站 和配色 网站
最新发布
小 tom的博客
09-16 601
提示：以下是本篇文章正文内容，下面案例可供参考以下是一些提供免费网站模板的网站，适用于各种类型的网站（如个人博客、企业站点、电子商务等）。这些模板通常带有响应式设计，适用于桌面、平板和移动设备。Wix网站：Wix特点：Wix 提供了大量免费的、可自定义的网站模板，涵盖博客、商业、艺术作品集、在线商店等多种类型。使用他们的拖放式编辑器，可以轻松调整布局和风格。适用对象：新手和不熟悉代码的人。TemplateMo网站：TemplateMo。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值