前端笔记（HTML）

最新推荐文章于 2022-10-19 19:02:24 发布
最新推荐文章于 2022-10-19 19:02:24 发布
阅读量263 收藏
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zz_er/article/details/108884733
版权
链接标签
<a> </a>
# 属性
target="目标页面打开方式" # 目标页面的启动方式
# _blank 新窗口打开页面
# _self 本窗口打开页面
href="点击跳转的目标"
# 外部链接需要添加http://
# 没有确定跳转地址可以用# 代替

##### 锚点定位
href="#元素id"  # 跳转到指定id的元素
base标签
<head>
	<meta charset="UTF-8">
	<base target="_blank"/>  # 设置<a>标签默认使用新窗口打开
	<title></title>
</head>
特殊字符
空格 &nbsp;
<    &lt;
>    &gt;
&    &amp;
￥	 &yen
©	 &copy;
®	 &reg;
摄氏度 &deg;
±	 &plusmn;
✖ 	 &times;
➗ 	 &divide;
² 	 &sup2;
³	 &sup3;
注释标签
<!--  注释1 -->

<!-- 注释2
-->
列表
无序列表
<ul>
	<li> 
		列表项目
	</li>
</ul>
ul 设置 type 属性
type = "disc"   实心圆
type = "circle"  空心圆
type = "square"   实心方块
有序列表
<ol>
	<li>
		列表项目
	</li>
</ol>
ul 设置 type 属性
type = "1"   数字排序
type = "a"  小写字母排序
type = "A"   大写字母排序
type = "i"   小写罗马字母排序
type = "I"   大写罗马字母排序
自定义列表
<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	<dd>名词1解释3</dd>
	
	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
	<dd>名词2解释3</dd>
		
</dl>
表格

表格

<table>
	<caption>个人信息表</caption>
	<thead>
		<tr> 
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr> 
			<td>小明</td>
			<td>男</td>
			<td>20</td>
		</tr>
	</tbody>
</table>

<tr></tr> 行
<td></td> 单元格
<th></th> 表头（加粗，居中对齐）
<caption></caption> 表标题

表格属性

border 设置单元格边框（默认border="0" 无边框）
cellspacing 设置单元格与单元格边框之间的空白距离 默认 cellspacing="2" 间距2像素
cellpadding 设置单元格内容与单元格边框之间的空白距离 默认 cellpadding="1"
width 设置表格的宽度
height 设置表格的高度
align 设置表格在网页中的水平对齐方式
left center right

<colgroup span="6" width="200px">  将前6列设为一组，宽度均为200像素
<colgroup span="1" width="100px">  设置最后一列为一组，宽度为100像素

设置单元格占据的单元格数目
<td colspan="7"></td>  设置单元格占据7行
<td rowspan="4"></td>  设置单元格占据4列
input标签

单标签

属性属性值描述
typetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像形式的提交按钮
file文件域
name由用户自定义控件的名称
value由用户自定义input控件中的默认文本值
size正整数input控件中的显示宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控制允许输入的最多字符数
label标签
1.用label直接包裹

点击 账号 时输入框也会获得焦点

<label>账号： <input type="text"/></label>
2.for id形式

点击范围内元素将自动选中指定id的输入框

<label for="t"> 账号：<input type="text"/> <br /> 密码：<input type="password" id="t"/> </label>
textarea 文本域

双标签

<textarea cols="每行字符上限" rows="显示的行数">文本内容 </textarea>
select 下拉菜单
<select>
	<option>点击选择你的城市</option>
	<option>北京</option>
	<option>上海</option>
	<option selected="selected">广州</option>
</select>
form表单域
<form action="url地址" method="提交方式" name="表单名称">
表单控件
</form>
HTML5 新增标签
常用新标签
  • header：定义文档的页眉 头部
  • nav：定义导航链接的部分
  • footer：定义文档或节的页脚 底部
  • article：定义文章
  • section：定义文档中的节（section，区段）
  • aside：定义其所处内容之外的内容 侧边
datalist的使用
<input type="text" list="star" />
<datalist id="star">
	<option>刘德华<option>
	<option>刘若英<option>
	<option>刘晓庆<option>
	<option>郭富城<option>
	<option>张学友<option>
</datalist>
fieldset 相关元素分组打包
<fieldset>
	<legend>用户登录</legend>
	账号：<input type="text" />
	密码：<input type="password" />
</fieldset>
input 新增类型
HTML5 input 新增
  • email 输入邮箱格式
  • tel 输入手机号码格式
  • url 输入url格式
  • number 输入数字格式
  • search 搜索框（体现语义化）
  • range 自由拖动滑块
  • time 小时分钟
  • date 年月日
  • datetime 时间
  • month 月年
  • week 星期 年
input常用新属性
属性用法含义
placeholder<input type="text" placeholder="请输入用户名" />占位符提供输入字段预期值得提示信息
autofocus<input type="text" autofocus />规定当页面加载时input元素应该自动获得焦点
multiple<input type="file" multiple />多文件上传
autocomplete<input type="text" autocomplete="off" />
条件：
1. input 标签有名字
2. 有表单域和提交按钮
规定表单是否应该启用自动完成功能 有2个值，一个是on，一个是off，on代表记录已经输入的值
required<input type="text" required />必填项
accesskey<input type="text" accesskey="s" />规定激活（使元素获得焦点）元素的快捷键 采用 alt + 字母的形式
多媒体文件
<embed src="目标文件地址" allowfullScreen="true" quality="high" width="480" height="400" align="middle" ></embed>
页面插入音频
<audio src="音频文件地址" controls autoplay > </audio>
属性
autoplay 设置自动播放音乐（默认不自动播放）
controls 是否显示播放控件
loop 循环播放 loop="2" 播放2次 loop="-1" 无限循环

兼容性写法（不同的浏览器支持的音频格式不一样）
<audio controls autoplay >
	<source src="xxx.mp3" />
	<source src="xxx.ogg" />
	<source src="xxx.wav" />
	您的浏览器不支持播放声音
</audio>
页面插入本地视频
<video src="xxx.mp4" autoplay controls></video>
兼容性写法
<video autoplay controls>
	<source src="xxx.mp4" />
	<source src="xxx.ogg" />
	浏览器不支持视频播放
</video>
虚幻交界
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html中meta标签的用法及viewport属性简介
Summer_15的博客
03-27 2526
meta标签是html语言head区的一个辅助性标签，它一般位于<head>标签和<title>标签之间，提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以自动刷新并且指向新的页面，实现网页转换时的动态效果以及控制网页显示的窗口等等。
前端笔记html和css
04-22
前端笔记html和css
如何使用 base 标签使页面中的所有标签在新窗口中打开
★匆匆★的专栏
12-02 950
这个连接 将在新窗口中加载，因为 target 属性被设置为 "_blank"。 这个连接 也将在新窗口中加载，即使没有 target 属性。
HTML前端笔记html.md
04-10
HTML前端笔记html.md
HTML基础学习
凉城未暖夜微凉的博客
08-23 275
HTML基础学习前言一、认识WEBWeb标准二、HTML初识HTML初识文档类型< !DOCTYPE >页面语言lang字符集HTML标签的语义化HTML常用标签常用标签表格列表表单form表单域常用属性表单控件（表单元素）在线网站查阅文档从输入url到页面展示发生了什么(面试)浏览器的多进程架构浏览器的多进程架构 前言 本篇文章从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。 一、认识WEB 「网站」 在因特网上根据一定的规则，使用HTML等制作的用于展示特定内
HTML meta 标签
zhangankang的博客
06-28 3万+
！！<meta> 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！ 属性 值 描述 charset( H5 New) character_set 定义文档的字符编码。 content text 定义与 http-equiv 或 name 属性相关...
黑马前端HTML笔记
bui ~
02-17 1279
快捷键 (1)！+tab 网页骨架（任何标签+tab =成对标签语言) ​ (2)注释的快捷键：ctrl+/ ​ (3) ctrl+d 选中相中的字符或者元素 ​ (4) 选中段落缩进 tab ，往前shift+tab ​ (5) 查看自动换行 alt+z htm标签 关系：父子（嵌套关系）、兄弟（并列关系） 图片属性： src （路径） alt（图片加载不出来的替换文字） title（鼠标悬停得到的文字） height(
Web前端笔记记录
yjnlovepy的博客
10-19 3345
web前端开发笔记
前端笔记html+css.xls
12-09
网络前端笔记（基础），自己在学习总结的，一些重点的东西，其中有些知识点有相关的例子，比较适合初学者。
前端html资料笔记大全整合
06-19
html笔记大全整合版,只要掌握写网页拿捏了
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
通过<meta>标签实现全网页新窗口链接。
weixin_34405354的博客
07-13 260
虽然说弹出新窗口这个有点儿流氓，但是毕竟有要用的时候。如果每一个链接都target="_blank"岂不是很麻烦？ 其实只需要在head标签中加入一行代码即可。 1 <meta http-equiv:"windows-target" content="_top"/> 转载于:https://www.cnblogs.com/lrjswrd/p/7159875.html...
设置Meta标签(兼容内核,页面缓存时间,窗口)
周家大小姐
01-09 875
若页面需默认用极速核，增加标签： &lt;meta name="renderer" content="webkit"&gt;  若页面需默认用ie兼容内核，增加标签： &lt;meta name="renderer" content="ie-comp"&gt;  若页面需默认用ie标准内核，增加标签： &lt;meta name="renderer"
HTML meta标签用法详解
热门推荐
JiuMeilove的博客
07-04 3万+
标签定义及使用说明 meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。 提示和注释 标签通常位于 区域内。 元数据通常以 名称/值 对出现。 如果没有提供
STM32H562实现FreeRTOS内存管理【支持STM32H系列单片机】.zip
最新发布
06-03
STM32H562 FreeRTOS驱动程序，支持STM32H系列单片机。 项目代码可直接运行~
恶魔轮盘.cpp
06-03
恶魔轮盘
基于C++&OPENCV 的全景图像拼接.zip
06-03
基于C++&OPENCV 的全景图像拼接 C++是一种广泛使用的编程语言，它是由Bjarne Stroustrup于1979年在新泽西州美利山贝尔实验室开始设计开发的。C++是C语言的扩展，旨在提供更强大的编程能力，包括面向对象编程和泛型编程的支持。C++支持数据封装、继承和多态等面向对象编程的特性和泛型编程的模板，以及丰富的标准库，提供了大量的数据结构和算法，极大地提高了开发效率。12 C++是一种静态类型的、编译式的、通用的、大小写敏感的编程语言，它综合了高级语言和低级语言的特点。C++的语法与C语言非常相似，但增加了许多面向对象编程的特性，如类、对象、封装、继承和多态等。这使得C++既保持了C语言的低级特性，如直接访问硬件的能力，又提供了高级语言的特性，如数据封装和代码重用。13 C++的应用领域非常广泛，包括但不限于教育、系统开发、游戏开发、嵌入式系统、工业和商业应用、科研和高性能计算等领域。在教育领域，C++因其结构化和面向对象的特性，常被选为计算机科学和工程专业的入门编程语言。在系统开发领域，C++因其高效性和灵活性，经常被作为开发语言。游戏开发领域中，C++由于其高效性和广泛应用，在开发高性能游戏和游戏引擎中扮演着重要角色。在嵌入式系统领域，C++的高效和灵活性使其成为理想选择。此外，C++还广泛应用于桌面应用、Web浏览器、操作系统、编译器、媒体应用程序、数据库引擎、医疗工程和机器人等领域。16 学习C++的关键是理解其核心概念和编程风格，而不是过于深入技术细节。C++支持多种编程风格，每种风格都能有效地保证运行时间效率和空间效率。因此，无论是初学者还是经验丰富的程序员，都可以通过C++来设计和实现新系统或维护旧系统。3
SDIO接口远距离无线图传WIFI6模块TT-S6D2TR-105HP
06-03
SDIO接口HI1105远距离无线图传WIFI6模块TT-S6D2TR-105HP
windows微信双开t脚本文件
06-03
bat文件，用于微信双开，如果微信是按照默认地址安装的话，即安装路径为 C:\Program Files (x86)\Tencent\WeChat\WeChat.exe 无需修改，直接放到桌面右键点击以管理员身份运行即可。 如微信非默认安装路径，先右键，点击编辑，然后将其中的 C:\Program Files (x86)\Tencent\WeChat\WeChat.exe 替换为电脑中微信安装路径，再右键点击以管理员身份运行即可。
前端开发html笔记
05-30
前端开发中，HTML是一门用来制作网页的语言，它由标签组成，比如图片标签、链接标签、视频标签等。HTML文件是网页的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。前端人员通过书写HTML文件来制作网页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值