HTML基础

最新推荐文章于 2024-07-08 16:01:05 发布
最新推荐文章于 2024-07-08 16:01:05 发布
阅读量357 收藏
点赞数
分类专栏： 前端 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47188125/article/details/127682555
版权

目录

1.HTML的第一个实例

2.HTML标题，段落，链接标签

3.加粗，放大，斜体，上标，下标

4. 定义了所有链接的URL

5. img标签

6.table标签  注意border

7.单元格间距

8.有序列表，无序列表

9.div布局

10.form表单的单选框，复选框，下拉框

11.iframe框架 

12.HTML脚本

1.HTML的第一个实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

2.HTML标题，段落，链接标签

<!DOCTYPE html>
<html>
<head>
<meata charset="utf-8">
<title>新手教程</title>
</head>
	
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
	
<p>这是一个段落</p>
	
	<a href="www.baidu.com">这是一个链接</a>

</body>
</html>

 

3.加粗，放大，斜体，上标，下标

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>教程</title>
</head>
<body>
<b>加粗字体</b>
	
<br>
	
<strong>字体加粗<strong>
	
<br>
	
<big>这个文本字体放大</big>

<br />

<em>这个文本是斜体的</em>

<br />

<i>这个文本是斜体的</i>

<br />

<small>这个文本是缩小的</small>

<br />

这个文本包含
<sub>下标</sub>

<br />

这个文本包含
<sup>上标</sup>

</body>	
</html>

 4.<base> - 定义了所有链接的URL

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<base href="https://www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://www.runoob.com/images/logo.png"
<br><br>
<a href="https://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

 

5. img标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>一个来自文件夹中的图像:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>
<img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">

</body>
</html>

 

6.table标签  注意border

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="0">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

7.单元格间距

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

 

8.有序列表，无序列表

9.div布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
	<b>菜单</b><br>
	HTML<br>
	CSS<br>
	JavaScript
</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里
</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com
</div>

</div>
 
</body>
</html>

 10.form表单的单选框，复选框，下拉框

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

	
<form action="">
账号：<input type="text" name="账号"><br>
密码：<input type="password" name="密码"><br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="提交">	
</form>

</body>
</html>

11.iframe框架 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<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>
</html>

 12.HTML脚本

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>


<script>
	document.write("hello")
</script>

</body>
</html>

红茶晚报丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表单提交方式详解
m0_61394395的博客
11-20 4151
通过这篇文章，我们详细讨论了HTML表单的不同提交方式，每种方式的优缺点以及如何在实际项目中应用它们。在选择表单提交方式时，需要根据具体情况权衡安全性、易用性和性能等方面的需求，以提供最佳的用户体验。希望这些信息对你构建出色的表单交互有所帮助！
Layer数据表格中每一行文件上传
夏已微凉、
05-04 959
一、前言二、html 部分代码三、js 部分代码 一、前言 需要在数据表格每一行加一个上传按钮 问题：点击上传，弹出选择文件框了，选择 打开(O) 之后并没有执行上传操作 二、html 部分代码 <script type="text/html" id="uploadPicTpl"> <a class="layui-btn layui-btn-normal layui-btn-xs upload-pic"> 上传 </a> </s.
php+html+js+ajax实现文件上传
php-yyds
10-09 1568
php+html+js+ajax实现文件上传。
html按钮选择路径上传,获取表单上传文件的绝对路径
weixin_42514394的博客
06-03 1946
一 test2.htmltest2$(".parent").on("change",".file",function(){var getpath=$(this).val();alert(getpath);$('#filepath').val(getpath);});用parent把file input包起来是为了防止onchange事件一次调用之后失效．二 test3.phperror_log...
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
Html基础文档
09-13
HTML 免费
在php中利用html表单实现文件上传的步骤及注意事项
weixin_40524709的博客
10-06 1687
利用html中的表单（form）实现文件上传是php中经常进行的一个动作。 如一个典型的文件上传表单：
html实现上传
weixin_45525177的博客
12-25 157
在本文中，我们介绍了如何使用HTML5技术来实现文件上传功能，可以使用form表单或者JavaScript、jQuery来实现。在web应用程序的开发中，文件上传功能已经成为了标配之一，掌握好文件上传的实现方法可以提高我们的开发效率。在上面这个表单中，我们使用了enctype="multipart/form-data"来指定表单的编码类型，在文件上传时使用multipart/form-data的编码方式。在HTML5中，文件上传可以使用HTML的form表单提交功能来实现。HTML5中的文件上传。
HTML常用标签之表单form
weixin_45604020的博客
06-21 8876
表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。
html文件上传前端模板，开箱即用
weixin_52634104的博客
07-03 1423
模态框出现的时候发请求查询数据库中的字段并渲染到页面上，点击上传文件出现选择页面，监听input的change事件，触发后调用文件上传接口上传文件到后端，同时前端ui li 绑定的fileList数组新增元素，点击保存按钮调接口存储数据到数据库中。vue实例之外的部分：这个方法不写到methods里面的原因是使用了bootstrap-table插件，有些不兼容的地方，索性就写到外面。js部分：由于django框架的原因，{{}}的模板语法会和django自带的产生冲突，故改成[[]]。
HTML制作漂亮的文件上传控件
weixin_45257399的博客
06-12 1393
HTML制作漂亮的文件上传控件 相关脚本文件引用： <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-3.4.1.min.js"></script> 没有bootstrap的朋友可以去官网下载，bootstrap下载地址：https://v3.bootcss.com/ HTML代码： <li class.
在线html上传文件,HTML5文件上传美化表单DEMO演示
weixin_28953819的博客
05-31 318
+ Show the source code$('#filer_input').filer({changeInput: 'Drag&Drop files here orBrowse Files',showThumbs: true,theme: "dragdropbox",templates: {box: 'item: '\\\\\{{fi-name | limitTo: 25}}\{{fi...
springmvc前端jsp与html
最新发布
paulwang040的博客
07-08 348
在实际的项目中，JSP和HTML往往不是非此即彼的关系，而是可以结合使用的。例如，可以使用HTML来构建页面的基本结构和静态内容，对于需要动态展示的数据，则可以通过Ajax技术从服务器端获取JSON格式的数据，然后在前端使用JavaScript和DOM操作来动态更新页面内容。动态内容生成：如果需要在HTML页面中展示动态内容，通常需要通过JavaScript（Ajax等）技术从服务器端获取数据后，再通过DOM操作来动态更新页面，这增加了前端开发的复杂度。轻量级：HTML页面加载速度快，对服务器压力小。
HTML(27)——渐变
m0_74386799的博客
07-08 361
渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型。
Html知识点汇总.docx
08-29
Html知识点.docx

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值