HTML基础

最新推荐文章于 2024-08-17 14:58:02 发布
最新推荐文章于 2024-08-17 14:58:02 发布
阅读量46 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52180947/article/details/132265385
版权

HTML基础

1.HTML基础

1.1HTML介绍

HTML文件是什么？

HTML表示超文本标记语言（Hyper Text Markup Language】。
HTML文件是一个包含标记的文本文件。
这些标记保速浏览器怎样显这个页面。
HTML文件必须有htm或者html扩展名。
HTML文件可以用一个简单的文本编辑器创建。

下面展示一个 简单例子。

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>

2.HTML元素

加粗

<b>test</b>

段落

<p>paragraph</p>

HTML中段落内容在p标签中不会换行，若要换行借助br标签

标题

<h1>到<h6>
<h1>is max </h1>

换行

<br> 强行换行，无结束标记

注释

<!-- hsjhud-->

3.HTML标签

在元素中插入标签，来定义文本样式

居中

<h1 align="center">test</h1>

4.HTML格式

文字方向,倒序输出

<bdo dir="rtl">123456</bdo>

删除和插入

<html>
<body>
<del>  
ddd
</delr>
<ins>  
123
</ins>
</body>
</html>

5.HTML实体

字符实体
在HTML中，有些字符拥有特殊含义，比如小于号“<“定义为一个HTML标签的
开始。假如我们想要浏览器显这些字符的话，必须在HTML代码中插入字符实
体。
一个字符实体拥有三个部分：一个nd符号(&)，一个实体名或者一个实体号，
最后是一个分号(；)
想要在HTML文档中显示一个小于号，我们必须这样写：&t:或者&#60:
使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持
最新的实体名，但是几乎所有的览器都能很好地支持实体号。
注意：实体名是大小写敏感的。

      空格   	&nbsp;	 &#160;
<	 小于号	    &lt;	        &#60;
>	大于号		&gt;		&#62;
&	和号		&amp;		&#38;
"	引号		&quot;		&#34;
'	撇号 		&apos; (IE不支持)	&#39;
￠	分（cent）	&cent;	&#162;
£	镑（pound）	&pound;	&#163;
¥	元（yen）	&yen;	&#165;
€	欧元（euro）	&euro;	&#8364;
§	小节		&sect;	&#167;
©	版权（copyright）	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

<html>
<body>

<h2>字符实体</h2>

<p>&lt;</p>
<p>&lX;</p>
<p>用实体数字（比如"#174"）或者实体名称（比如 "pound"）替代 "X"，然后查看结果。</p>

</body>
</html>

HTML链接

<a href="http://www.baidu.cn/">百度</a>

图片链接

<html>

<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>

6.框架

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

7.表格

<html>

<body>

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

<h4>一列：</h4>
<table border="1">
<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>

在这里插入图片描述

8.列表

无序列表

<html>

<body>

<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>

有序列表

<html>
<body>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>

9.表单

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="提交">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>
</html>

在这里插入图片描述
表单元素有

 <input> 元素
 <select> 元素（下拉列表）
 <option> 元素定义待选择的选项
 <textarea> 元素定义多行输入字段（文本域）
 <button> 元素定义可点击的按钮
 
 HTML5 增加了如下表单元素：
<datalist>
<keygen>
<output>
网安ZhCL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML基础之表单制作
TangJing_的博客
05-14 2万+
一、知识点 1、表单的作用： 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字：提示用户如何操作（一般由placeholder属性完成） 表单域：相当于一个容器，包含若干表单控件 表单控件：具体的功能项（按钮，下拉列表，输入框等） 3、表单域 <form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名"> 表单内容 </form> 4、表单控件 （1）input：输入框。都有val
前端-HTML基础知识详解
qq_52262831的博客
12-23 4910
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
HTML基础框架
Black_Ball的博客
01-01 3150
目录 HTML显示文本 HTML显示图片 HTML播放音乐 HTML询问用户 HTML布局 HTML显示文本 HTML显示图片 HTML播放音乐 HTML询问用户 HTML布局
HTML初识——网页设计html基础
qq_45864756的博客
08-29 5159
html初识
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
HTML基础.xmind
12-07
HTML基础.xmind
html基础整理
04-19
整理一些html常用的基础的标签作用与其网页的展示效果非常基础，简单易懂
HTML基础题目.rar
04-08
文件为HTML基础题目，题目如下，欢迎下载，3-1《七步诗》3-2制作Google Logo效果3-3《关山月》3-4通配符选择器3-5CSS字体样式属性3-6春天3-7你若安好便是晴天3-8CSS层叠性3-9CSS优先级3-10制作新浪博客效果
3：html（CSS)：基础语法3
最新发布
2301_76578848的博客
08-17 322
在这篇文章中，介绍了网页布局与id的内容，从而将网页更加美观，越来越贴近大家平时看到的网页了。当然现在的网页离成功还是有很大的路要走。
html+css 实现hover 边框彩色按钮
宝码香车的博客
08-14 850
这是一个，hover后按钮边框变彩色的效果。附具体代码，深入理解，彻底掌握！可以一键复制，查看效果。
salesforce rich text 字段支持html中内嵌JavaScript吗
Debug yourself!
08-13 425
如果你尝试在 Salesforce 的富文本字段中插入 JavaScript，代码会被过滤掉。推荐的方式是在适当的地方使用 Salesforce 支持的 JavaScript 功能，比如自定义按钮、Visualforce 页面或 Lightning 组件，而不是在富文本字段中直接嵌入脚本代码。
Javaweb学习之HTML（二）
2301_80841939的博客
08-17 264
TML 响应式 Web 设计（Responsive Web Design, RWD）是一种网页设计方法，它使得网站能够根据不同的访问设备（如桌面电脑、平板电脑、智能手机等）的屏幕尺寸和分辨率来自动调整布局、图片大小、字体等，从而提供最佳的浏览体验。但是，请注意，在HTML文档中直接使用Unicode编码字符时，需要确保文档的编码（如UTF-8）能够支持这些字符。HTML5引入了一些新的字符实体，主要用于表示一些数学符号、技术符号以及特殊字符等，但这些新的字符实体在日常的HTML编码中并不常用。
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能
qq_42431718的博客
08-13 295
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
html+css+js网页设计 电商模版4个页面
qq_42431718的博客
08-13 363
html+css+js网页设计 电商模版4个页面 带js 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
掌握Golang的html/template：打造动态网页的秘籍
2401_85812053的博客
08-14 575
通过本文的介绍，你应该对Golang的包有了基本的了解。它是一个强大而灵活的工具，可以帮助你安全、高效地生成动态HTML内容。掌握它，你将能够在Web开发中更加游刃有余。通过上述步骤，你可以开始使用来构建你的Web应用了。记住，实践是学习的最佳方式，所以不要犹豫，开始编写你自己的模板吧！
2：html：基础语法2
2301_76578848的博客
08-15 1321
首先，表头的话是使用标签，但是他同样也是一行，所以表头，应该在下面，也就是说，要先创建一个行，然后再写自己想要的表头。可以看到其他的上面是一样的，在中是新的，代表是一张表格，然后代表是一行，是一行中的一个个模块，然后第二个指的是第二行的内容，结果就是如下。这个就是我的主页面中我的头像，你看到还有之前学的照片的运用方式，同样，在网页中，我们习惯性的将他分成一个一个块，然后每一个快都是用的标签进行操作。还有没有我们经常用的边框，与表头。
前端（HTML + CSS）小兔鲜儿项目（仿）
li3123537691的博客
08-09 883
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值