HTML基础 下

最新推荐文章于 2023-03-20 16:06:24 发布
最新推荐文章于 2023-03-20 16:06:24 发布
阅读量251 收藏 4
点赞数 3
文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54129054/article/details/112628080
版权

**

1、HTML属性：修饰HTML标签*

  • title属性 鼠标的提示
  • style属性 元素的外观
<p style="color:red;font-size:48px">
  • class属性 元素的类名可以有多个，用空格隔开 可以重复
<p class="red big">
  • id属性 元素的唯一识别 有且只有一个
   <p id="myp">

2、图片

（如果要引入图片，那图片的地址一定要写对。）
src="./images/t.jpg" 图片的地址
./ 代码当前html所在的目录
alt 替换图片文字
width 宽 height 高 align 对齐
相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body>
		<img align="left" src="./image/timg.jpg"width="100px" alt="小王同学">
		<p>./代表当前目录</p>
		<p>我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱
		我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱我是小可爱</p>
		<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg" alt="">
		<br>
		<img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" alt>
	</body>
</html>

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

3、超链接

`<a href="http://www.baidu.com">百度</a>`
herf属性值时链接的地址
target 打开目标

_blank新标签中打开
< href="http://www.baidu.com"targt="_blank">百度</a>
_self当前标签打开
<a href="http://www.baidu.com"targt="_self">百度</a>
相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<h1>超链接</h1>
		<p>超链接让各个网页之间联系起来</p>
		<p>herf属性值时链接的地址</p>
		<p>target 打开目标 _blank新标签中打开 _self当前标签打开</p>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com"targt="_blank">百度</a>
		<a href="http://www.baidu.com"targt="_self">百度</a>
		<a href="./demo11.html"target="_blank">demo11</a>
		<p>./开头称为相对链接（相对于当前文件的位置）</p>
		<p>http开头链接为绝对链接（任何文件访问填写地址是一样的）</p>
		<p>../代表上一层文件夹</p>
		<a href="./image/testlink.html">testlink</a>
		<a href="/site/image/testlink.html">testlink</a>
		<a href="/site/demo9.html">demo9</a>
		<img src="./image/timg.jpg" width="150px"alt="">
		<img src="image/timg.jpg" width="150px"alt="">
		<img src="/site/image/timg.jpg" width="150px"alt="">
		<img src="http://127.0.0.1:8848/site/image/timg.jpg" width="150px"alt="">
	</body>
</html>

4、链接地址分为相对和绝对

相对：相对于当前html文件的位置
./开头 当前目录 （可以省略）
…/开头 上一级目录
文件夹或者文件名/ 开头 （省略一个./）
绝对：http开头
/ 开头 代表的是网站的根域名

5、锚点 页面内容切换

定义 <a id="ch01"></a>
链接锚点<a href="#ch01">
<a href="demo15.html#ch01">
像 回到顶部 回到首页都可以用它

6、iframe

定义，在网页中引入其他的网页
src 引入地址
width 宽/ height高
scrolling 是否滚动 yes no
frameborder=“0” 框架边框
相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>iframe 框架</title>
	</head>
	<body>
		<h1>iframe 框架</h1>
		<p>iframe 让我们有能力在一个网页中，引入其他网页</p>
		<iframe src="http://m.taobao.com" width="375" height="667"frameborder="0"></iframe>
		<iframe src="//player.bilibili.com/player.html?aid=800195027&bvid=BV1Py4y1z7Kb&cid=254489065&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
	</body>
</html>

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

7、图片热点区域

作用：形成不规则的链接区域
图片画形状，添加链接
建议，使用dreamweaver 绘制热点区域

<img usemap="#Map">
<img name="Map">
<shape="poly" coords="xxx" href="xxx" target="_blank">

8、表格

属性：border 边框 width 宽度
height 高度
align 对齐 left right center
valign 垂直对齐 top center bottom
cellspacing 表格的间距
cellpadding 文字到边框距离
bgcolor 背景颜色
合并相邻边框

<style>
table{ border-collapse:collapse}
</style>

子元素：
tr 行
td 列
th 标题
rowspan 行合并
colspan 列合并
相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			<style>
				table{border-collapse:collapse}
			</style>
				</title>
	</head>
	<body>
		<table border="1"width="80%" align="center" cellspacing="0" cellpadding="10"bgcolor="aliceblue">
			<tr>
				<td>标题1</td>
				<td>标题2</td>
				<td>标题3</td>
			</tr>
			<tr align="center">
				<td>列1</td>
				<td>列2</td>
				<td bgcolor="antiquewhite" align="left" height="100">列3</td>
			</tr>
			<tr valign="top"bgcolor="#FF0000">
				<td>列1</td>
				<td>列2</td>
				<td>列3</td>
			</tr>
			<tr>
				<td>列1</td>
				<td>列2</td>
				<td>列3</td>
			</tr>
		</table>
	</body>
</html>

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

9、表单：用户输入，与服务器进行交互

  • 表单标签 form 规定表单数据收集范围

    属性 ： action 数据提交的服务器地址
    method 数据提交的方法
    get 查询服务器的数据
    post 修改服务器的数据
    相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<h1>登录</h1>
		<form action="http://wwww.baidu.com" method="get">
			用户名：<input type="text" ><br/><br>
			密&emsp;码：<input  type="password"><br/><br>
			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; <input type="submit" >
		</form>
</html>

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

  • 表单域 input：用户可以交互的控件
    类型：1、text 文本框类型
    2、password 密码框
    3、submit 提交按钮类型
    4、radio 单选
    placeholder 文本提示（text/password）
    name 名称(radio类型成位一组必要条件)
    checked=“checked” 选中（radio类型）
  • label 表单标签
    包裹radio和文字（让单击文字也可以选中）
    （所有表单都有的属性：name 名称 value 支持 disabled 不可用）

下面总结一下 常用表单代码块。

1、文本框

<input type="text" value="值" placeholder="提示文本" name="名称" disabled="disabled">

结果展示：
文本框

2、密码框

<input type="password" value="值" placeholder="提示文本" name="名称">

结果展示：
密码框

3、单选

<input type="radio" checked="checked" name="名称"/>

结果展示：
单选框

4、多选

<input type="checkbox" checked="checked" name="名称"/>

结果展示：
多选框

5、下拉

<select>
   <option>选项1</option>
   <option selected="selected">选项2</option>
</select>

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

6、文件上传

<input type="file"/>

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

7、多行文本

<textarea cols="列" rows="行">
</textarea>

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

8、提交按钮

<input type="submit" value="上传信息"/>
<button type="submit">上传信息"</button>

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

9、重置按钮

<input type="reset" value="擦掉重写"/>
<button type="reset">擦掉重写"</button>

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

10、标签

<label>``<input type="checkbox"/>看书</label>
<label><input type="radio"/>男</label>

最后我们来做一个用户信息录入系统，来实际操作一下。
相关代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			用户信息录入系统
		</title>
	</head>
	<body>
		<h1>用户信息</h1>
		<form action="" method="">
			用户名:<input type="text"placeholder="请输入用户名"/><br>
			密码：<input type="password" placeholder="六位以上"/><br>
			性别：<label></label><input type="radio" name="sex" />男<label>
				<label><input type="radio" name="sex"checked="checked" />女<label>
				<label><input type="radio" name="sex"  />保密<label><br>
			爱好：<label><input type="checkbox" name="fav" checked="checked" />唱歌<label>
			<label><input type="checkbox" name="fav" checked="checked" />跳舞<label>
			<label><input type="checkbox" name="fav" checked="checked" />看书<label><br>
			学历：<select>
				<option >胎教</option>
				<option >幼儿园</option>
				<option selected="selected">小学</option>
				<option >博士后</option>
			</select><br>
			头像:<input type="file" /><br>
			留言：<br>
			<textarea rows="5" cols="40">	
			</textarea><br>
			<input type="submit"/>
			<input type="reset"/>
			<button type="submit">上传信息</button>
		</form>
	</body>
</html>

结果展示：
在这里插入图片描述
今天的分享就到这里了，希望大家有所收获。

布拉格W枫
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML基础.html
09-07
前端HTML基础笔记
2021-03-05
weixin_53123681的博客
03-05 144
html中的框架元素 通过使用框架，你可以在同一个浏览器窗口中显示不止一个网页内容，不是层层叠叠的在一起，而是显示在不同的区域。 通常可以用来做网页的布局。 frameset标记--表示一个框架集【包含框架的集合】 定义了如何将窗口拆分成框架单元。 使用frameset标签时候不需要body元素 rows属性--将窗口拆分成上下结构，取值的个数决定了拆分成个数，取值大小数决定了拆分的每一个窗口的比例。 cols属性--将窗口拆分成左右结构，取值的个数决定...
frameset标签在H5中已经弃用了，用什么来代替
m0_50217781的博客
12-28 8028
frameset标签在H5中已经弃用了，用什么来代替 用div+iframe 顶替frameset 框架。 用div+iframe 代替frameset 框架 frameset 已经过时, 使用frameset会带来很多问题,比如session丢失等. 所以提倡用iframe,iframe的好处我就不用多说了.下面用div+iframe来代替frameset的收缩与展开功能. <%@include file="common/taglib.jsp" %> <%@ page contentTy
iframe属性含义
11-27 2541
1、frameborder='0'  --外边框 2、scrolling = ‘no’  --最外层的iframe不要加滚动条，否则在拖动时会报js错误，想加滚动条的话在自己的页面中加滚动条
隐藏iframe滚动条，并禁止滑动
最新发布
weixin_45559449的博客
03-20 6619
当我们通过 iframe 展示图片，或是通过 iframe 展示 PDF文件 时，如果图片和 PDF 超出 iframe设置的宽高，就会出现横纵向的滚动条，如下图。所以， iframe 展示图片时可以通过设置 scrolling=“no” 属性来隐藏滚动条，iframe 展示 PDF文件时 设置 scrolling=“no” 属性并不能隐藏滚动条。如果 iframe 存在纵向滚动条，则 iframe宽度=原宽度+滚动条宽度，即width: calc(100% + 17px)；
frame框架及其实例
Mclikey的博客
02-09 6183
框架概念 ： 　　谓框架便是网页画面分成几个框窗，同时取得多个 URL。只需要 即可，面所有框架标记需要放在一个总起的 html 档，这个档案只记录了该框架如何分割 ，不会显示任何资料，所以不必放入 标记，浏览这框架必须读取这档案 面不是其他框窗的档案。 是用来划分框窗，每一窗框由一个 标 记所标示，必须在 范围中使用。如下例： 　　                     
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
HTML 基础总结 (下）.xmind
03-30
HTML 基础知识的总结，适合初学者！
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
scrolling ="no" 实现动态变化
volcano
01-19 1937
如果把scrolling ="yes"的话，当然就可以动态随着内容的多少而改变了，这时会出现滚动条。但是如果iframe控件位于屏幕右边，如果网页的高度又很高的话，就会出现两个滚动条，一个是Iframe自已的，一个是屏幕的，这样很不友好！所以应该把iframe的滚动条去掉，如下scrolling ="no"，但是这样做又会带来一个问题，多余的内容会被自动隐藏！ 这种问题的解决方案： 如...
如何在WordPress插入Bilibili视频
fulk6667g78o8的专栏
05-02 1217
由于B站的无广告特性，现在很多小伙伴都喜欢去B站，给自己喜欢的UP主一键三联。但B站自带的分享嵌入，插入到WordPress中，很丑很丑。因此，找了各种资料，发现加点代码即可实现自适应，且美观大气。B站自带的分享操作如下图：# 默认分享嵌入代码： <iframe src="//player.bilibili.com/player.html?aid=630411817&bvid=BV1G84y1c76n&cid=335718222&page=1" scrolling="no" b
iframe自适应父页面的大小，而没有滚动条，scrolling="no"后无法正常显示内容的问题
m0_38138387的博客
03-30 2万+
今天做网站遇到了一个问题，iframe的scrolling="no"设置后，无法显示全部iframe内容，判断是内容隐藏了，一顿好找，在网上找到了这编文章，问题解决转】让iframe自适应大小，没有滚动条 (2011-05-26 09:01:00)转载▼标签： 杂谈 父页里有一个层&lt;div&gt;，&lt;div&gt;里有一个子框架&lt;iframe&gt;,&lt;iframe&gt;...
Frameset使用教程
lockelk的专栏
09-12 2737
frame，是网页开发必须掌握的知识。例如后台架构、局部刷新，页面分割，都是frame的用途表现，尤其是后台页面制作，使用frame会给用户带来非常舒适的使用感受。 frame知识点包括（frameset标签、frame标签、iframe标签）。下面就对其一一介绍。   一
HTML网页调用 网易云 音乐播放器代码
热门推荐
YFCMS博客
12-05 5万+
表现形式一：单曲播放 调用代码： &amp;lt;iframe frameborder=&quot;no&quot; border=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; width=100% height=86 src=&quot;http://music.163.com/outchain/player?type=2&am
关于Frame的问题
唐锟的专栏
09-02 941
1.错误提示Sys.ArgumentOutRangeException:Value must be an integer.Parameter name:x  Actual value was NaN.今天的项目中使用AJAXTOOLKIT的时候碰到这个问题，原先以为是AJAXTOOLKIT带来的问题，去掉updatePanal后仔细看了才发现并不是AJAXTOOLKIT带来的问题，原来最开始就
iframe几种常用代码片段
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
02-03 5538
<iframe id="SGframe" src="外部文件名.html" frameborder="no" scrolling="no" style="display:block"> </iframe> <!--全屏iframe设置--> <iframe id="SGframe" src="https://720yun.com/t/f33jOzhk.
HTML基础与Web发展历史
本文将深入探讨HTML基础，重点关注HTML文档结构、语法以及常用标签。HTML，全称为HyperText Markup Language，是用于创建网页内容的标准标记语言。它允许我们将文本、图像、链接等元素组织成结构化的文档，并通过...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值