我的HTML学习笔记教程

最新推荐文章于 2024-04-22 21:52:14 发布
最新推荐文章于 2024-04-22 21:52:14 发布
阅读量241 收藏 2
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47286519/article/details/106506027
版权

HTML 教程

一、HTML标签

 <title>定义了文档的标题  
 <base href=""   target=“-blank”>  在页面中显示链接地址中的东西  
 <meta charset="utf-8">   提供了meta标记 
 <link>                   链接到css样式表 
 <script>                 用于加载脚本文件
 
 <p>                      段落（空格不保留）
 <h1><h2><h3>....<h6>     标题
 <a href="">              链接
 <br/>                    换行
 <img src=""  width=""  height=""/>图片
 <hr>                     水平线
 <!--...-->               注释
 <b>						 加粗
 <big>                    放大
 <i>                      倾斜
 <sub>                    下标
 <sup>                    上标
 <pre>                    段落（里面的空格样式均保留）
 <code>                   计算机输出
 <kdd>                    键盘输入
 <tt>                     打字机文本
 <samp>                   计算机代码样本
 <var>                    计算机变量 
 <address>                HTML中写地址 
 <q>                      给文字加双引号
 <del>                    显示删除效
 <ins>                    显示下划线

二、HTML链接

<a href="https://editor.csdn">
1. 图片链接
  1. 无框图片链接
    <a href="url"><img border="0" src="" width="32" height="32"/></a>
  2. 有框图片链接
    <a href="url"><img border="10" src="" width="32" height="32"/></a>
2.链接到指定位置
<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
###  链接的属性
3.链接属性

  1. target属性

    -blank 点击链接后 在新的窗口显示链接

三、HTML表格

1.下面用表格做的表

<table width="50%" align="center" border="0" >

<tr>
<td align="center">受理员业务统计表</td>
</tr>
<tr>
	<td align="right">2017-10-03</td>
</tr>
</table>
<table width="50%" align="center" cellspacing="1" cellpadding="4" border="1">
<tr>
	<td align="center" colspan="2" rowspan="2">受理员</td>
	<td align="center" colspan="2" rowspan="2">自办数</td>
	<td align="center" colspan="2" rowspan="2" >受理数</td>
	<td align="center" colspan="2" rowspan="2">直接解答</td>
	<td align="center" colspan="2" rowspan="1">拟办意见</td>
	<td align="center" colspan="2" rowspan="1">返回修改</td>
	<td align="center" colspan="3" rowspan="1">工单类型</td>
</tr>
<tr>
	<td>同意</td>
	<td>比例</td>
	<td>数量</td>
	<td>比例</td>
	<td>建议件</td>
	<td>诉求件</td>
	<td>咨询件</td>
	
</tr>
<tr>
<td colspan="1" rowspan="3">受理处</td>
<td>王艳</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
</tr>
<tr>
	<td>总计</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
</tr>
</table>

表格

2.表格标题
<caption>

注：表格可以加入列表、段落、表格

四、HTML列表

1.无序列表
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

l无序列表
注：无序列表可以嵌套

2.有序列表
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

有序列表

3.自定义列表
<dt>Coffee</dt>
<dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

自定义列表

五、HTML区块

1.区块元素：通常会以新行开始或结束

如：<div>、<p>、<ul>、<table>

2.内联元素：通常不会以新行开始

如：<b>、<td>、<a>、<img>、<span>

六、HTML布局

  1. div元素布局
<div id="biaoti" style="width:500px">
<div style="background-color:red"><h1>网页标题</h1></div>

<div id="2" style="width:100px;background-color:green;height: 200px; float: left;">
<b>菜单栏</b><br>
HTML <br>
css	<br>
js
</div>
<div id="2" style="width:400px;background-color:yellow;height: 200px;float: left">
文章内容
</div>
<div style="background-color:red">
版权所有
</div>
</div>

div

  1. table布局
<table border="0" width="500">

<tr>
<td colspan="2" style="background-color:green;text-align: center;">网页标题</td>
</tr>
<tr>
	<td style="background-color:red;vertical-align:top;width:100px;height:200px;">菜单<br>
	HTML <br>
	css <br>
	js

	</td>
	<td style="width:400px;height:200px;background-color:yellow;vertical-align:top;">内容</td>

</tr>

<tr>
<td colspan="2" style="background-color:green;text-align: center;">版权</td>

</tr>
</table>

table

七、表单

1.按钮、编辑框

<form action="">
<!--带边框-->
<fieldset>
<legend>Personal information:</legend>
<!--文本框-->
first name: <input type="text" name="fristname"><br>
<!--密码框-->
密码：<input type="password" name="mima"><br>
<!--单选按钮-->
<input type="radio" name="sex" value="men">
<input type="radio" name="sex" value="women">
<!--复选框-->
<input type="checkbox" name="vehicle" value="bike">i have a bike <br>
<input type="checkbox" name="vehicle" value="car">i have a car <br>
<!--提交按钮-->
<input type="submit" value="submit">

</fieldset>
</form>


2.下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

在这里插入图片描述
3.文本框

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

在这里插入图片描述
4.普通按钮

<form action="">
<input type="button" value="Hello world!">
</form>

5.表单发送电子邮件

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

在这里插入图片描述

八、HTML框架

1.iframe显示页面

<iframe src="https://www.suning.com/?utm_source=sogoudh&utm_medium=mingzhan" frameborder="0" name="frome"></iframe>

在这里插入图片描述
2.ifrome显示目标链接页面

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

在这里插入图片描述
3.ifrome 的属性

  • 高度 width
  • 宽度height
  • 边框frameborder

九、HTML脚本

1.插入脚本 (输出hello world)

<script>
document.write("Hello World!")
</script>

2.响应事件

<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

点击后变成：
在这里插入图片描述

3.处理HTML样式

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

点击后：
在这里插入图片描述

十.HTML字符实体集合

显示结果实体名称
空格&nbsp;
>&gt;
<&lt;
&&amp;
"&quot;
’&apos;
版权&copy;
注册商标&reg;
乘号&times;
除号&divide
奋斗的猪猪霞
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
&qt；&lt；等xml|Html转义字符
qq_43552564的博客
04-17 171
&qt;<等xml|Html转义字符
HTML基础知识总结
08-05 1644
经过这段时间的学习，对于html的一些基础知识有了一定的了解。所谓好记性不如烂笔头，唯有一点点累积，才能汇聚成知识的海洋。现在，我对这段时间的学习做一个总结。 一、HTML的定义 HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们写好html文件后...
html笔记（完整版）
热门推荐
秦哥的博客
08-09 2万+
目录 码仙励志 背景颜色 bgcolor 注释 空格  版权符© 网页标题 标题标记 网页编码 设置连接颜色link、alink、vlink 强制换行标记 换段落标记 居中对齐白标记 预格式化标记 列表项目标记 无序列表标记 有序列表标记 定义型列表 水平分割线标记 分区显示标记 字体设置标记 粗字体标记 斜字体标记 文字下标字体标记​ 文字上标字体...
HTML学习笔记
深度
06-14 901
今天花了一下午的时间 把html所有属性大概熟悉了一遍....... 文档地址http://www.w3school.com.cn/tags/html_ref_standardattributes.asp 目录 1. 元信息 2. 列表 3. 图像 4. 样式学习 5. 格式 6. 框架 7. 编程 8. 表单 9. 表格 10. 视频 11. 链接 1. 元信息 ...
html如何编写一篇网页笔记,前端学习第一天：什么是网页？HTML？网页形成笔记...
weixin_34158442的博客
06-16 340
HTML第一天我们接下来是进行的网页开发网页的相关概念:什么是网页?什么是HTML?网页的形成?什么是网页：1.网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。2.网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页的组成：1.网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 ...
HTML笔记整理（个人笔记）
w3535222的博客
03-07 3455
个人笔记
html 5 学习教程笔记.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
HTML+CSS+JavaScript教程学习笔记.zip
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
个人整理的最全HTML学习笔记
weixin_43597743的博客
06-03 2296
本周终于学完了所有的HTML知识，但也不是很全，如果是非前端用于平时需要的话，还是足够了。此外，如果需要上面思维导图文件，可以微信公众号关注哔哗回复关键字HTML获取。接下来不多说，上干货。 HTML 1.一种描述网页的文本标记语言. 2.通过HTML标签来表述网页. 一.HTML元素 1.HTML元素是开始标签到束标签之间的文本内容. 2.空元素在开始标签中结束。（在开始标签后尖括号加斜杠/). 二.HTML文档 1.HTML文档=网页=HTML标签+纯文本. 2.以. htm 或 .html 为后.
学习HTML的一些笔记，方便记忆和以后翻阅
穿堂风的博客
11-13 338
水水
快速学习html、css的经典笔记（不看后悔偶）
永不停歇
11-30 1万+
HTML语言剖析  Html简介-目录  全写： HyperText Mark-up Language  译名： 超文本标识语言  简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件 达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。   1. Html特点：  ► 描述性语言，结构
HTML 入门
lvshihao_的博客
04-16 998
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
html2pdf,qrcode库及url参数拼接
m0_45093055的博客
04-16 424
html2pdf 是一个可以将 HTML 内容转换为 PDF 文件的库。它通常用于前端或服务器端，将网页或 HTML 字符串转换为可打印或可分享的 PDF 格式。这对于需要将网页内容保存为 PDF 或者生成报表等场景非常有用。text参数在qrcode库中不是直接表示页面路径，但你可以将页面路径（URL）作为文本内容传递给toDataURL函数来生成一个指向该页面的二维码。此篇文章主要是对html2pdf,qrcode库及url参数拼接的零散整理。
【HTML】制作一个简单的实时字体时钟
qq_70814008的博客
04-11 1642
整体上，这个网页应用程序通过HTML提供了页面结构，CSS赋予了页面美观的样式，而JavaScript则让页面具有动态更新和用户交互的能力。三者共同协作，实现了一个既美观又实用的动态时钟和日期时间转换工具。
高频前端面试题汇总之HTML篇
qq_51685537的博客
04-18 459
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。
HTML使用jQuery实现两个点击按钮，分别控制改文本字体颜色和字体大小
最新发布
m0_65992344的博客
04-22 171
jQuery 是一个广泛使用的 JavaScript 库，旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。
HTML段落标签、换行标签、文本格式化标签与水平线标签
小何代码咖啡馆
04-16 438
在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同，但是为了更加强调文本效果，提高代码可读性，推荐用第一种标签。在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，在HTML中，可以使用下面的标签实现对应的属性，并且这些标签可以嵌套使用。标签用于定义段落，它可以将整个网页分为若干个段落。标签可以在网页上实现水平分割线的效果。注意，水平分割线标签为单标签。为文本分段可以使用段落标签。包裹需要放在一段的文字。标签表示换行，也可以用。在HTML中，常见用。
html--玫瑰
stqer的博客
04-19 507
【代码】html--玫瑰。
html用法
bicart的博客
04-16 649
这只是一个简单的示例，HTML有更多的标签和属性可以用来创建不同的页面结构和样式。如果你想深入学习HTML，可以查阅相关的教程和文档。HTML（超文本标记语言）是一种用于创建网页结构的标记语言。以上是HTML的基本用法和常用标记。HTML还有更多标记和属性可以用于创建复杂的网页结构和样式。
html学习笔记网站
09-02
它提供了详细的HTML教程、示例代码和互动式练习，非＊＊＊/Web/HTML）也是一个值得推荐的学习HTML的网站，它提供了官方的HTML文档和更深入的解释。希望对你有帮助！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值