html基础(自用)

最新推荐文章于 2022-04-22 14:00:23 发布
最新推荐文章于 2022-04-22 14:00:23 发布
阅读量121 收藏
点赞数
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45906102/article/details/106604873
版权

标准格式

<!DOCTYPE heml>
<heml>
	<read>
		<meta cheset="utf-8" />
		<title>网页的标题</titel>
	</read>
	<body>
	
	</body>
</heml>

设置网站标签

<link rel="icon" href=""/>

存在网站的根目录下，叫favicon.ico

参考资料

百度搜“”w3school离线手册“”

1.html是一种超文本标记语言
2.单双标签

  1. 单标签：<标签名 />
  2. 双标签：<标签名> </标签名>

3.标签类型

  1. 块级标签
    独占一行的标签
    能随时设置宽度和高度 (比如div、p、h1、h2、ul、li)

  2. 行内标签
    多个行内标签能同时显示在一行
    宽度和高度取决于内容的尺寸 (比如span、a、 labe)

  3. 行内-块级标签 (内联-块级标签)
    多个行内块级标签可以显示在同一行
    能随时设置宽度和高度 (比如input, button)

5.常见的标签

  • 特点：除一些特殊的标签外不会以输入的（enter）换行
    必须以换行标签换行

  • <div></div> 和 <span>< /span>容器标签

  • <h1><h2><h3><h4><h5><h6>标题标签区别：字体不同

  • <p></p>段落标签

  • <br />换行标签

  • <hr />生成一条水平线

  • <img / src="#">• 可以通过属性 src 来插入图片
    绝对路劲: 目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径. 不推荐使用
    如: D:\所有软件\python用的软件\必备软件
    相对路劲: 由当前文件所在的路径为起点, 去找对应的资源.
    如: ./images/image2/tupian.jpg
    title属性(图片上面的标题)
    alt用来描述图片(当图片损坏之后,提示图片的名字)，也可以被搜索引擎检索，不写alt，则不能被搜索到

  • <a href="#" target="x"></a>链接标签。#为url。x=_blank 新窗口打开链接，x=_self 本窗口打开链接，默认_self
    href=#id ，可以去到id属性处
    href=“mailto：邮件地址”会默认打开邮件客户端

  • <input /> 和 <textarea>< /textarea>接收输入标签。
    1.<input type="#" value="text"/>#为接收的属性类型，text为初始内容，name属性相同时只能选择一个
    #=password 隐藏输入内容如：密码
    #=radio 圆形选择器 <input type="radio" />在这里插入图片描述
    #=checkbox 方形选择器
    2 placeholder属性与value类似。当输入时删除初始内容
    3 <textarea rows="x" cols="y">< /textarea>只能接收文本，可以控制输入框大小。可以用下x，y控制，但不推荐用下x，y，因为不同浏览器显示不同。可以配合css方法移除手动选择大小在这里插入图片描述
    在这里插入图片描述

  • <label for="x"></label>可以绑定属性id=“x”的选择器让点文字也可以选

  • <form action="x" method="post/get"><br /> 表单标签 x为表单提交时的提交到的目标地址

  • <select></select>下拉框 配合<option selected="selected"></option>嵌套使用，有（selected=“selected”）属性的option标签可以默认
    在这里插入图片描述
    在这里插入图片描述

  • ul ol li为列表标签 ul为无序 ol为有序

  • <h1></h1>,<h2></h2>会影响在页面搜索中的排名
    一般只有一个<h1></h1>

  • <b>加粗

  • <mata />
    1.可以用来设置编码
    2.设置页面检索中的关键字和描述

<meta charset="utf-8">
		<meta name='keywords' content="html5" />  <!-- 关键字 -->
		<meta name="description" content="发布h5...." />   <!-- 描述 -->
		<!-- 可以申请重定向content="几秒;url=网页" -->
		<meta http-equiv="refresh" content="2;url=http://www.baidu.com" />
  • <center></center>
    内容会默认居中显示
  • <headert></header>表示网页的头部
  • <main></main>表示网页主题部分
  • <footer></footer>表示网页的底部
  • <nav></nav>网页的导航
  • <aside></aside>侧栏
  • <article></article>表示一个独立的文章
  • <div></div>目前主用的块标签

实体

一些特殊符号的使用

&lt:代表<
&gt:代表>
&nbsp:代表空格
&copy:代表版权号

内联框架

可以引入外部的网页

<iframe scr=" 路径" frameborder="0"></iframe>

frameborder可以设置边框
不会被搜索检索
也可以设置超链接在内联框架打开

<a href="http://www.baidu.com" target="baidu"> baidu</a>
		<iframe name="baidu" ></iframe>

音视频播放

  • 音频
<audio src="路径" ></audio>

默认情况用户不能操作

<audio src="路径" controls><audio>

允许用户播放

<audio src="路径" autoplay></audio>

可以自动播放，但浏览器不同，可能不行

<audio src="" loop></audio>

可以循环播放
其他方式

<audio controls>
	浏览器不支持请升级浏览器      如果不能显示链接就会显示这句话
	<source src="">
</audio>
  • 视频
<video src=""></video>

使用方式基本和音频一样0

表格

<table></table>  标签来创建表格

在table中表示一行，有几个tr就有几行
如果表格中没有使用tbody直接使用tr，那么浏览器会自动创建tbody并把tr放入tbody中，所以tr不是table的子元素
在tr中表示一列，有几个td就有几列

纵向合并x个单元格 横向合并x个单元格 可以代替td 代表表格头部 **长表格** 
<table>
	<thead></thead>  表格头部
	<tbody></tbody>  表格内容
	<tfoot></tfoot>  表格底部
	不会因为位置改变
</table>

表格样式（css）
border-spacing：0px 指定边框之间的距离
border-collapse：collapse 边框合并
vertical-align:middle 设置td居中
diplay：table-cell 变为td

表单

用于将本地的数据提交给远处的服务器

<form action=""></form>表单要提交的服务器地址

文本框

<input type="text" name="username" />

注意：数据要提交到服务器必须为元素指定一个name

密码框

<input type="password" name="password" />

提交按钮

<input type="submit" value="提交">

单选框

<input type="radio" name="a" value=“a” />
<input typr="radio" name="a" value=“b” />

必须有一样的name属性，value最终会最为选择的值
在这里插入图片描述

可以添加checked来设置默认选项

<input type="radio" name="hello"  value="b" checked />

多选框
把单选框总type换成type=“checkbox”

下拉框

<select name="">
	<option value="" selected>选项一</option> 下拉选项  selected设为默认选项
	<option value="">选项二</option>
	<option value="">选项三</option>
</select>

<input type="reset"  /> 重置按钮
<input type="button"  /> 普通按钮
<button></button>这一对可以替换<input />作用一样
<input type="reset"  autocomplete="off" /> 关闭自动补全
<input type="reset"  readonly />只读，可以把数据传个服务器
<input type="reset"  disabled />禁用，数据不能提交
<input type="reset"  autofocus />自动获取焦点，即
?sterben
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML笔记自用，欢迎下载
08-15
这份HTML笔记可能详细介绍了这些基础知识，同时可能还包含了实践案例和常见问题解答，对于初学者来说是一份非常实用的学习资料。通过学习，你可以开始创建自己的静态网页，并逐步深入到更复杂的Web开发领域。
input type="radio" 的用法
热门推荐
༺ bestcxx的专栏 ༻
04-21 4万+
-（1）radio介绍 -（2）html标签中radio的使用 -（3）struts2标签中radio的使用(详见http://www.cnblogs.com/cnjava/archive/2012/09/22/2698238.html) -（4）后台获取参数 （1） ·radio是单选按钮 单选按钮涉及到的技术问题是这样的，前台怎么写？怎么默认选中一个？多个选项的名字如何定义
表单html
m0_67176957的博客
04-22 77
表单在我们现实生活中，表单用于提交数据。 在网页中也可以使用表单，网页中的表单用于将本 地的数据提交给远程的服务器。 使用form标签来创建一个表单 form的属性 action表单要提交的一个地址。 <form action=“地址”> 文本框【注意：数据要提交到服务器，必须要为元素指定一个name属性值】 <input type=“text” name=“username”> 密码框 &lt...
HTML常见标签
m0_46444588的博客
11-08 120
安装 开发工具：HBUilder X 官网：https://www.dcloud.io/hbuilderx.html 安装app版本，整体下来近600m。 主题 字体 默认字体i和l分不清，换成Verdana字体。 备注字体颜色 默认灰色看不清晰，可以换成黑色，直接编辑Default.xml，修改下面3行的颜色，重新启动HBuilderX即可。 项目结构 静态页面HTML 概念 HTML（Hyper Text Markup Language）超文本标记语...
HTML（软测）笔记 自用！自用！ 自用！
02-21
HTML基础知识点总结 在本文中，我们将从 HTML 的基本概念入手，探索 HTML 的基本结构、标签、属性、表单等知识点，并对每个知识点进行详细的解释和示例。 HTML 基础知识 HTML（HyperText Markup Language）是一...
自用的基于HTML5的文件上传组件.zip
最新发布
02-13
在"自用的基于HTML5的文件上传组件.zip"这个压缩包中，包含的"uploadHfive-master"可能是一个实现了HTML5文件上传功能的开源项目。让我们深入探讨一下HTML5在文件上传方面的核心特性及其应用。 1. **File API**: ...
【自用】应用基础 2022-3-3
03-03
【自用】应用基础 2022-3-3 的学习资料包含了多个主题，涵盖了计算机科学和技术领域的关键基础知识。这些资源旨在帮助个人提升在Linux操作系统、编程语言（如Java和Python）、数据库管理（通过SQL）、数学建模、软件...
自用完整项目模板自用完整项目模板
07-25
使用这样的自用完整项目模板，开发者可以快速搭建起一个功能齐全的后端系统，并结合HTML前端实现完整的应用。模板中的每个组成部分都是为了简化开发流程，提高开发效率。对于熟悉Java和HTML的开发者来说，这是一个...
jedis(自用)
qq_45906102的博客
05-04 3222
1． Jedis介绍与快速入门 通过java来操作redis使用jedis 搭建jedis环境 编写代码 程序执行报错 原因: redis服务器是否开启 linux的防火墙是否关闭 在redis.conf配置文件中 bind 127.0.0.1 代表的是外部 不可以访问redis 通过以上操作，错误信息不一样了 原因：是我们没有设置密码 我们需要在redis.conf文件中设置密码 在命令行下连接redis 2． string类型常见操作 //string操作 public class Je
springcloud(一) 注册中心
qq_45906102的博客
08-02 2340
RestTemplate介绍 Spring框架提供的RestTemplate类可用于在应用中调用rest服务，它简化了与http服务的通信方式，统 一了RESTful的标准，封装了http链接， 我们只需要传入url及返回值类型即可。相较于之前常用的 HttpClient，RestTemplate是一种更优雅的调用RESTful服务的方式。 //通过restTemplate调用商品微服务 Product object = restTemplate.getForObject("http://127.0..
python爬虫之 图形验证码识别脚本（自用）
qq_45906102的博客
08-29 903
Tesseract安装以及简介 因为为免费模块所以可能识别不出来！ Windows系统安装 在以下链接下载可执行文件,https://github.com/tesseract-ocr/ 设置环境变量 把tesseract.exe所在的路径添加到PATH环境变量中。 还有一个环境变量需要设置的是，要把训练的数据文件路径也放到环境变量中。 TESSDATA_PREFIX=路径\Tesseract-OCR\tessdata 在Python中调用Tesseract: pip install pytess
python爬虫之re(自用)
qq_45906102的博客
07-20 620
元字符 正则表达式中使⽤了很多元字符，⽤来表示⼀些特殊的含义或功能 尚未列出的还有问号？、星号*和括号等其他的符号。所有正则表达式中具有特殊含义的字符在匹配自身的时候，都要使用斜杠进行转义。这些转义字符的匹配用法与普通字符类似，也是匹配与之相同的一个字符 预定义匹配字符集 重复匹配 位置匹配 贪婪与非贪婪模式 re模块自带贪婪模式，总是尽可能多的匹配符合它规则的字符。 在修饰匹配次数的特殊符号后再加上一个 “?” 号，则可以使匹配次数不定的表达式尽可能少的匹配，使可匹配可不匹配的表达式，尽可能的
RabbitMQ
qq_45906102的博客
10-10 618
MQ(message queue)，从字面意思上看，本质是个队列，FIFO 先入先出，只不过队列中存放的内容是 message 而已，还是一种跨进程的通信机制，用于上下游传递消息。在互联网架构中，MQ 是一种非常常 见的上下游“逻辑解耦+物理解耦”的消息通信服务。使用了 MQ 之后，消息发送上游只需要依赖 MQ，不 用依赖其他服务。 1.流量消峰 举个例子，如果订单系统最多能处理一万次订单，这个处理能力应付正常时段的下单时绰绰有余，正 常时段我们下单一秒后就能返回结果。但是在高峰期，如果有两万次下单操作系统
结构与算法
qq_45906102的博客
12-02 409
数据结构包括：线性结构和非线性结构。 线性结构 线性结构作为最常用的数据结构，其特点是数据元素之间存在一对一的线性关系 线性结构有两种不同的存储结构，即顺序存储结构和链式存储结构。顺序存储的线性表称为顺序表，顺序表中的存储元素是连续的 链式存储的线性表称为链表，链表中的存储元素不一定是连续的，元素节点中存放数据元素以及相邻元素的地址信息 线性结构常见的有：数组、队列、链表和栈，后面我们会详细讲解. 非线性结构 非线性结构包括：二维数组，多维数组，广义表，树结构，图结构 稀疏sparsearray数组 基本
算法基础提升
qq_45906102的博客
02-06 320
布隆过滤器 集合只有加入和查询，用较小的空间。 如：有100亿条url黑名单比较当前网站是否在其中 允许有失误，不在过滤器里面，误报成在。
Snownlp(自用)
qq_45906102的博客
04-16 282
安装 pip install snownlp # 导入SnowNLP库 from snownlp import SnowNLP 情绪判断，返回值为正面情绪的概率，越接近1表示正面情绪，越接近0表示负面情绪 s = "这部电影真心棒，全程无尿点" s2 = "这部电影简直烂到爆" test = SnowNLP(s) test2 = SnowNLP(s2) print(test.sentiments, test2.sentiments) 0.9842572323704297 0.05669608917295
js基础（自用）
qq_45906102的博客
06-15 261
js基础（复习用） js是一门广泛应用于浏览器客户端的脚本语言 JS的书写方式 1.第一种写法 在元素标签内部onclick=""属性引用 2，第二种写法 在当前网页的script标签中编写 <html> <head> <meta charset="utf-8"> <title></title> <script> alert('我是js代码'); </script> </head>
python之爬虫bs4（自用）
qq_45906102的博客
07-27 256
基本概念 html_doc = """ <html><head><title>The Dormouse's story</title></head> <body> <p class="title"><b>The Dormouse's story</b></p> <p class="story">Once upon a time there were three little
mysql（自用）
qq_45906102的博客
01-19 244
数据库特点 持久化存储 读写速度极高 保证数据的有效性 对程序支持非常好，容易扩展 数据库分类 关系型数据库：可以保存现实生活中的各种关系数据，数据库中存储数据以表为单位；主流关系型数据库：MySQL，Oracle，SQLServer等 非关系型数据库：通常用来解决某些特定的需求，比如高并发访问。主流非关系型数据库：Redis，Mongodb，memacache等 SQL介绍 SQL是结构化查询语言，是一种用来操作RDBMS(关系型数据库管理系统)的数据库语言，当前关系型数据库都支持使用SQL语言进行操作，
自用ict腾博选点软件4.0
01-05
自用ICT腾博选点软件4.0是一款非常实用和高效的软件。首先，该软件具备了智能化的选点功能，能够根据用户设定的条件和要求，快速找到最佳的选点位置。这对于各种场景下的选址决策非常有帮助，可以帮助用户节省时间和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值