HTML基础学习

最新推荐文章于 2022-04-13 19:39:58 发布
最新推荐文章于 2022-04-13 19:39:58 发布
阅读量1k 收藏 2
点赞数
文章标签： html css bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45600095/article/details/121985593
版权
这篇博客详细介绍了HTML的基础知识，包括bootstrap网址、字体库、HTML标签的使用，如背景、字符、颜色透明度、块级标签等。还涉及到CSS的通用属性、盒子模型、浮动、定位，以及JavaScript的基础应用，如JS事件、对象属性、BOM浏览器操作。
摘要由CSDN通过智能技术生成

alt+鼠标左键增加光标

alt+鼠标拖选 Ctrl+alt+上键

Ctrl+e选中相同词进行修改

alt+鼠标左键单击 转到定义地方

Ctrl+alt+左键 把代码打开在另一侧，方便查看

alt+左方向键 转到鼠标光标的上一个位置

F4切换到不同的错误之处

  • 合并下一行： Ctrl + Alt + J
  • 剪切光标所在行 Ctrl + x
  • 复制光标所在行 Ctrl + c

总结

bootstrap网址

https://www.bootcss.com/ 文件在：day24

<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>

使用方法

<i class="fa fa-car fa-spin"></i> 汽车旋转
<div class="form-inline">          零盒子里面的一些标签不会自动换行
	<table border="1" class="table table-hover">  有鼠标悬浮特效
	<\table>
	<table border="1" class="table">  可以令表格填满美观，插入进里面的表单更加好看，但是会使表格里面的字体不会上下居中
	<\table>
	<button class="form-control" type="button" >添加角色</button>  好看的按钮，独自占据一行，放在有class="form-inline"属性的标签里面不会自动换行
	
	
</div>

https://www.runoob.com/bootstrap/bootstrap-popover-plugin.html

font字体库

https://fontawesome.dashgame.com/ 文件在：day24

<link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css"/>

使用方法

<table class="table table-hover">
<button type="button" class="btn btn-warning">（警告）Warning</button>
等等，进网站看教程

培训

day22

背景

<style>
#example1 {
     
    background-image: url(img_flwr.gif), url(paper.gif); 在前面的flwr会盖在paper上面。即在前面的背景图片有限显示
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>

字符

空格    
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
’ 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷

rgba与rgb颜色透明度

​ 使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明。

块级标签

文字形式

		<div>drsg</div>		
		<span id="">这是普通文本</span>
		<b>加粗文本</b>
		<i>斜线文体</i>
		<sup>上标</sup>
		<sub>下标</sub>
		<u>下划线</u><hr >

		<code>计算机代码</code>
		<em>强调文本</em>
		<kbd>键盘输入</kbd> 
		<pre>预格式化文本</pre>
		<small>更小的文本</small>
		<strong>重要的文本</strong>
		<abbr> （缩写）
		<address> （联系信息）
		<bdo> （文字方向）
		<blockquote> （从另一个源引用的部分）
		<cite> （工作的名称）
		<del> （删除的文本）
		<ins> （插入的文本）

dl段落

自动换行，可以使用style="text-indent: 20px;"缩进

dt段落

自动换行，可以使用style="text-indent: 20px;"缩进

dd段落

本身有缩进两个半字符，可以使用style="text-indent: 20px;"缩进

p段落

自动换行，可以使用style="text-indent: 20px;"缩进

span段落

行内标签，不可以缩进

标签三大部分

1：html标签 详单与树的跟，其余所有标签都需要在这个表亲之内。
2：head头部 我们网站的编码格式，网站的名称，被搜索引擎搜索的关键字，引入的外部内容等一切东西
3：body身体 一般情况，我们所有想显示在浏览器中的内容都需要写在body中

标签主要分为单标签和双标签，一般情况下标签一定要有/闭合标签，哪怕是单闭合

标签三大类

1：行级标签     可以与其他标签在同一行显示，不会自动换行，不能设置宽高
2：块级标签     不能与其他标签在同一行显示，可以自动换行，可以设置宽高
3：行内块标签    
区分标签的重要主要是两个标准：1 是否自动换行  2 是否能设置宽高
都能做到的是块级，都不能做到的就是行级，如果只能做到一个说明他是行内块标签

h1标题

<h1>一级标签</h1>*
<h2>二级标签</h2>
<h3>三级标签</h3>

br普通换行

hr横线换行

ol有序列表

元素

段落li

块级标签

ul无序列表

标签style
<style type="text/css">
	ul{
     /* 写li也可以，字标签会继承父标签的CSS样式 li可以继承ul的样式 */
		/* list-style: disc; 黑点默认 */ 
		/* list-style: circle;空心圆 */
		/* list-style: square; 实心方块 */
		/* list-style: decimal;   ol的默认方法 */
		list-style: none;    /* 无前置符号 */
		font-size: 50px;
		/* color: #DEB887; */
		color: rgb(254, 204, 104);  /* 修改颜色，三原色原理*/
		list-style-image: url(img/1.png);
		text-align: left;
	}
    #l0{
     /* 不使用ul的li中自带的黑点等，使用自定义的图片，并可以修改图片位置和大小 */
		font-size: 15px;
		list-style-type: none;
		background: url(img/100.png) no-repeat 0rem 0.5rem;
		background-size: 1.4rem 1.4rem;
	}
</style>
元素
段落li

块级标签

table表格

标签属性
border       设置外部边框宽度
cellspacing="0" 单元格边距
cellpadding="0"  单元格大小
标签style
border-collapse: collapse;   /* table表格消除单元格边距 */
border-left:0.1rem solid red; /* table表格设置左边框 */
标签元素
tr表格行
th表格标题
td单元格
单元格属性
colspan="2"  跨列属性，用来合并单元格
rowspan="2"  跨行属性，用来合并单元格

form表单

表单与数据库关系
form表单：  是HTML与服务器沟通的唯一方式，当表单触发提交事件的时候
表单里面的内容就会被提交到服务器之中，提交的服务器路径就是action属性中的值
提交的方式是使用method中的方式提交。
提交方式分为
表单安全性
post：在提交时URL上不会显示任何的数据信息，提高了数据的安全性，速度慢可以上传大型文件
get：磨人的提交方式，会将数据显示在URL之上，牺牲了安全性提高了速度，不能提交大型数据，并且提交路径与表单的数据之间使用？分割，提交数据的时候是使用key=value的形式&分割
元素
input
name
表单在将数据提交到服务器之后，服务器需要去有凭证接收以及区分数据，这个凭证就是input中的name属性的值，简单点说，后端只有根据name的值才能接收到数据
<form action="" method="post" id="form1"></form>
<input type="date" form="form1" value="请填写用户名"/>
此input仍然属于form1
type

text 文本

radio 单项选择

性别<input type="radio" name="sex" id="" value="男" />男
<input type="radio" name="sex" id="" value="女" />女<br>

password 输入时不显示

file 选择文件

date 选择日期

checkbox 多项选择

爱好<input type="checkbox" name="love" id="" value="读书" />读书
	<input type="checkbox" name="love" id="" value="听歌" />听歌
	<input type="checkbox" name="love" id="" value="看电影" />看电影
	<input type="checkbox" name="love" id="" value="旅游" />旅游<br>

textarea 备注，可以设置行列，默认情况下浏览器中的框可以拉动，并且有滑动功能

submit 提交按钮

select下拉选择

option 下拉选择中的选项

<select name="">
<option value ="郑州">郑州</option>
<option value ="上海">上海</option>
<option value ="北京">北京</option>
<option value ="衡州">衡州</option>
<option value ="万户">万户</option>
</select>

iframe内联网页

作用：用在一个div中时可以在不切换页面的前提下，插入另外一个页面的内容

<iframe loading="lazy" src="demo_iframe.html" width="200" height="200"></iframe>
target属性与超链接a的结合
<body>
    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
    <p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>
</body>

day23

属性

悬停显示
<!-- title悬停显示 -->

a超链接

		 <a href="../one/唐诗三百首.html" target="_blank">唐诗三百首</a><br>
		 <!-- 功能性链接 -->
		 <a href=mailto:2689929619@qq.com>站长邮箱</a>
链接样式
<style type="text/css">
	a:link{
          /* 自定义样式*/
		font-size: 6.25rem;
		color: #00ff00;
		text-decoration: none;
	}
	a:hover{
          /* 悬浮样式*/
		font-size: 12.5rem;
		color: aqua;
	}
	a:active{
       /* 点击时的样式*/
		font-size: 1.25rem;
		color: burlywood;
	}
	a:visited{
       /* 访问之后的样式*/
		font-size: 3.125rem;
		color: #000000;
	}
</style>

照片

<img src="./img/4.jpg" title="这是三只狗" alt="图片加载失败" style="width: 30%">
<!-- 相对路径和绝对路径
绝对路径： 是指从根目录计算寻找对应的路径。例如
相对路径： 是指从当前文件的路径去寻找目标文件
./返回上一级路径-->
<img src="./img/13.jpg"  style="width: 20%;"><hr >

a的锚链接

<a name="aaaa"></a>
<!-- 锚链接 返回到指定页面位置-->
<a href="#aaaa">返回顶部</a>

空格

		<!-- 空格\
		  &nbsp;
		  &gt;
		  &lt;   
		  &quot;  双引号
		  &copy;  版权号
		  -->

CSS

​ 是指层叠样式表CSS的主要作用就是用来美化网站,因为网站中很多标签本身是很丑的,此时就需要进行一些美化

CSS主要分为三种：

1： 行内样式		写在标签内的样式,只针对当前的标签。
2： 内部样式		写在head之内的样式,可以针对本页面所有的标签来设置统一的样式。
3： 外部样式		引入别人写好的css。
问题1： 这么多种样式如果我同时都使用了,会显示哪种呢,优先使用行内样式,次选内部样式,最后是外部样式。
问题2： html中有那么多标签,很多标签还是重复标签,我们如何选择指定标签赋予样式呢？
						名称					示例				作用
		CSS选择器：1：  标签选择器			p{}  			选择所有的p标签,所有p标签都使用{}之内的样式。
					   id选择器				#a{} 			选择id是a的标签,需要注意id不要重复。
					   class选择器			.b{}			选择class是b的标签,多个标签可以使用同一个class
					   组合选择器
					   伪类选择器
					   后代选择器
					   子元素选择器
					   通配符选择器....
在HTML中每一个标签都有id以及class属性,其中id的值不能重复,class的值是可以重复的。
在HTML中每个标签除了使用CSS美化以外,可能自身也带一些美化的属性,这些属性也可能会起到美化的作用,不要将属性与css弄混。
通用属性
<style type="text/css">
	/* 在这里面去写内部样式，可以作用到整个页面中所有选择的标签 */
	span,p{
     /* 选择器之间也是有优先级的，ID选择器的优先级较高*/
		font-size: 2.125rem;/* 字体的大小 */
		color: coral;      /* 字体颜色 */
		font-family: 楷体; /* 改变字体的样式*/
		font-weight: bold;
最低0.47元/天 解锁文章
阿哈蛤
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML入门基础2
m0_71154850的博客
10-28 2846
table>、和是HTML表格最基本的3个标签，其他标题标签、表头单元格可以没有，但是这3者必须要有。语法：、表头（thead）、表身（tbody）和表脚（tfoot）4部分。没有顺序，每个li标签、li标签独占一行（块 元素）语法：语法：有顺序，每个li标签独占一行（块元素）
HTML基础知识 详细笔记
qq_41102578的博客
03-07 566
HTML基础知识
html中ulli的特效,html中 让 ul 的多个 li 在一行内显示，ulli
weixin_42198780的博客
06-07 2248
html中 让 ul 的多个 li 在一行内显示，ulli有时候会需要ul的li都在同一行显示，避免li跑到下一行去，今天遇到了这个问题，记录下来，避免忘记~Document*{padding: 0;margin-bottom:0;border: 0;}.box{width: 640px;height: 50px;overflow-x: scroll;overflow-y: hidden;}ul{...
HTML 一行两列 - div块儿并列显示
SAGGITARXM
09-10 8174
一行两列 - div块儿并列显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<form name="a...
Html基础学习
02-02
网站简单的Html基础编程，以ppt的形式结合代码了解Html中的各个标签
HTML基础学习.zip
01-01
HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML...
HTML基础学习示例代码.zip
最新发布
01-01
HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例...
html基础学习
11-12
总之，HTML基础学习涵盖了网页的结构、样式设计以及简单的交互功能。通过学习这些基础知识，初学者能够创建出具有基本功能和样式的静态网页，并为进一步学习动态网站开发（如JavaScript、PHP或Python等后端技术）...
html删除一行增加一行,html怎么增加一行
weixin_39954698的博客
07-20 1404
html增加一行的方法：首先创建一个HTML示例文件；然后通过table标签创建一张表格；最后通过js代码“function addRow() {...}”方法使表格增加一行即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。html表格新增一行和删除一行主要思路:现在页面中写一段你想要的html代码样式,然后设置为隐藏不可见(style="di...
让多个div在同一行显示的样式及html代码
12-03
以下为css样式： 复制代码代码如下: div{ margin-bottom: 10px; clear:both; word-break:break-all; word-wrap:break-word; } 复制代码代码如下: <!–width指定每个div占据的宽度–>.custom_div{height: 23px;width: 50px;line-height: 23px;float: left;} 以下为html代码：[code]<pre name=”code” class=”html”
HTML元素中的行级与块级元素不能放在一行。
alexsaurora的博客
04-12 2771
最近在工作中忽然发现了一个小问题，本来以为自己html标签学的挺好，今天终于明白，一直都是个菜鸟。 背景： 项目使用的是ant design的Grid布局，使用Row和Col。代码如下： &lt;Col&gt; &lt;div style={{display: flex}}&gt; &lt;Icon type="user" style={{ fon...
html 第一行不缩进，第二行缩进，文字对齐
qq_36657291的博客
12-03 9320
https://www.cnblogs.com/moguzi12345/p/7872979.html &lt;p style="text-indent: -7rem;margin-left: 7rem;"&gt; &lt;img src="images/记录要求.png"&gt; &lt;span class="sc_sp1"&gt;记录要求：&lt;/span&g
html 设置两个标签的相对距离_html 标签 属性
weixin_39886956的博客
01-27 879
大中小html 标签 属性2011-08-12html 标签 属性详解HTML标签和属性在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“”表示，结束标签用“标签名>”表示。元素指的是包含标签在内的整体，除去标签的部分叫做内容。属性要在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值””的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分...
【html】常见的行标签（inline）、块标签（block）和行块标签（inline-block）特点及相互转换
热门推荐
m0_50947589的博客
04-13 1万+
行标签（inline）、块标签（block）和行块标签（inline-block）的特点及相互转换
html如何一行显示,html – 同一行的中心和显示
weixin_31289735的博客
07-08 1317
我正在尝试显示两个< div>元素在同一条线上,但在中心.为了使它们居中,我不得不设置保证金：auto;但是,为了让两个人在同一条线上,我必须做以下任何一种情况：>设置显示：内联; (取消对中)>设置浮动：左;两者(取消对中)>设置显示：table-cell; (取消对中)我能做些什么来让两个div都在中心？或者我应该使用其他东西来做到这一点？我试过< span...
html中控制在一行显示出来,CSS控制文字只显示一行，超出部分显示省略号
weixin_39733821的博客
06-20 1610
之前使用过这个例子，现在总结说明一下：先给贴代码：省略我吧！省略我吧！省略我吧！省略我吧！省略我吧！省略我吧！省略我吧！省略我吧！省略我吧！省略我吧！省略我吧！省略我吧！测试浏览器：IE6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.1180.89m现在解释一下为什么要这样做：1、text-overflow:ellipsis;这里的重点样式是tex...
html 设置span标签只在一行内显示
高安博客
07-30 7590
white-space: nowrap; /*强制span不换行*/ display: inline-block; /*将span当做块级元素对待*/ width: 260px; /*限制宽度*/ overflow: hidden; /*超出宽度部分隐藏*/ text-overflow: ellipsis; /*超出部分以点号代替*/ line-height: 0.9; /*数字与之前的文字对齐*/ ...
HTML基础学习：标签与语法要点
"HTML基础标签的学习，包括HTML的基本概念、书写原则、常用标签和文档类型。\n\nHTML（HyperText Markup Language）是用于创建网页的标记语言，它描述了文档的结构，而不是具体的表现形式。HTML标签是其核心组成部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值