html基础学习

最新推荐文章于 2022-09-11 17:42:34 发布
最新推荐文章于 2022-09-11 17:42:34 发布
阅读量261 收藏
点赞数

一、HTML概述

1.简介

HTML：Hyper Text Markup Language 超文本标记语言

注：“超文本”，就是指页面内可以包括除了文字以外的元素，如：图片、链接、音乐以及程序等。


2.特点

①使用标签来指明页面的不同内容。<head></head>

②平台无关性：HTML文档不含任何与平台和程序相关的信息，它们可以被任何文本编辑器读取。

注：HTML文档（也叫web页面），包含了HTML标签及文本内容。


二、HTML

1.基本结构

2.基本标签

（1）文本

①标题：h1~h6
    eg. <h1>大家好~我是一级标题（最大）</h1>

②<font>标签 
    eg.<font size=6 face="黑体" color=red>欢迎光临我的主页</font>
   注：size只能设置七种字号

③<label>标签
    eg.<label for="name">用户名</label>
         <input type="text" id="name" name="name"/>
     注：for属性可以绑定一个控件，此标签，会将焦点转到绑定的控件上。

④格式标签
粗体：<b>…</b>
斜体：<i>…</i>
下划线：<u>…</u>
删除线：<strike>...</strike>
强调：<strong>…</strong>
下标：<sub>...</sub>
上标：<sup>...</sup>
   eg.<b>x+y=x<sup>2</sup><b/>

⑤<span>标签
    用来组合行内元素，span的前后不会换行。
   eg.<p>hello</p>
        <span style="color:red">*</span>

⑥段落标签
换行：<br/>
段落：<p>....</p>

⑦<div>标签
块级元素，div的前后会换行。
eg.
<div id="login">
<label for="username">用户名</label><input type="text" id="username"/>
<span style="color:red"> * </span>
<br/>
<label for="psd">密&nbsp;&nbsp;码</label><input type="password" id="psd"/>
<span style="color:red">*</span>
</div>
<div id="tip" style="font-size:12px;">
说明：用户名和密码必填
</div>

（2）图片

<img src="url" width="宽度值（单位：像素点）" height="高度值" alt="说明（链接不存在时的显示）">
eg.<img height="75px" width="311px" alt="wust" src="http://www.wust.edu.cn/images/141638742011865585.png">
注：可以修改src后看alt的功能。

（3）超链接

<a href="url">链接文字</a>
eg.
<a href="http://www.wust.edu.cn">武汉科技大学</a>
<a href="E:\KwDownloadx\mp3\your bag.mp3">音乐</a>
<a href="E:\娱乐\搞笑\flash\交通安全.swf">动漫</a>

（4）列表

①无序列表（没有序号，用其他符号表示）
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
②有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

（5）表格

（6）特殊标签

由于大于号与小于号与标签的符号有歧义，不可用，故而有特殊标签。
HTML注释为：<!--注释内容-->


3.Form表单

（1）介绍

 form：为用户输入创建表单。
其中可包括文本框、密码框、单/复选框、列表框、按钮等。
表单通常用于向指定的URL提交用户数据。

（2）基本结构

（3）常用元素

①文本框、密码框

②单/复选框


③列表框

默认单选，多选：添加属性mutiple:multiple

④文件域

⑤文本区域

⑥提交和重置按钮/一般按钮/图片按钮



⑦fieldset标签：将表单内的相关元素分组


三、FAQ

1.id与name的区别

An:   id唯一，name可重复。用途不同。
name用途：

用途1:作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。

用途2:HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。

 用途3: 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。

用途4:作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。

用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。

用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

2.div标签的理解

div标签用于划分一块区域，然后CSS等用于对于块内的填充。可以div中嵌div
eg.一个例子，修改其中的一些值，去理解这个布局。此处只列出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<br>
</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">哈哈哈
</div>

</div>
D7hz99QUlU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web概念概述 ，HTML语言，html语言的各种标签。
Gaoju12138的博客
03-24 214
1、web概念概述 JavaWeb：使用Java语言开发基于互联网的项目 软件架构： 1、C/S：Client/Server 客户端/服务器端：在用户本地有一个客户端程序，在远程有一个服务器端程序（QQ，迅雷等） 优点： 用户体验好 缺点：开发，安装，部署，维护麻烦； 2、B/S：Browser/Server：浏览器/服务器端：只需要一个浏览器，用户通过不同的网址（URL）可以访问不同的服务器端程序 优点：开发，安装，部署，维护简单 缺点：如果应用过大，用户的体验可能会受到影响；对硬件要求过高 B/S架构详
Html基础学习
02-02
网站简单的Html基础编程，以ppt的形式结合代码了解Html中的各个标签
01.web入门之-HTML
杨小迪的博客
09-09 1187
1. 什么是HTML HTML(Hyper TextMarkup Language):超级文本标记语言，一种文本类型的语言。 作用：创建web页面/文档 使用带有尖括号的”标记”将网页中的内容逐一标识出来 用来设计网页的标记语言 用该语言编写的文件，以.html或.htm为后缀 由浏览器解释执行 HTML页面上，可以嵌套使用脚本语言的程序段，如:VBScript,JavaScript 相关工具 开发工具：任何一款能够编辑文字的工具 运行工具：浏览器，能够解析HTML代码以及解析JS脚本语言
css div控制
iteye_18611的博客
12-29 104
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="contai
HTML布局
星辰_大海的博客
06-10 196
HTML 布局 - 使用&lt;div&gt; 元素div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;pa ge title&lt;/title&g
HTML基础学习（全）
qq_44732593的博客
07-11 1万+
HTML概述 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 日常生活的书信，我们要遵循共同的约定。 同理：HTML 有自己的语言语法骨架格式： <HTML> <head> <title></title> </head> <body> &
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
前端-HTML基础知识详解
qq_52262831的博客
12-23 4881
目录： 初始常用的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基础学习示例...
05创建公务卡扣减明细表_CASH_USE_MINUSAMT_DETAIL_20240708-刘君.sql
最新发布
07-19
05创建公务卡扣减明细表_CASH_USE_MINUSAMT_DETAIL_20240708-刘君.sql
【BP回归预测】龙格库塔算法优化BP神经网络RUN-BP光伏数据预测（多输入单输出）【含Matlab源码 5171期】.zip
07-19
CSDN海神之光上传的全部代码均可运行，亲测可用，直接换数据就行，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化BP神经网络分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化BP 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化BP 4.4.3 灰狼算法GWO/狼群算法WPA优化BP 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化BP 4.4.5 萤火虫算法FA/差分算法DE优化BP 4.4.6 其他优化算法优化BP
在UCA上结合DOA估计算法和自适应波束形成matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【信号分解】基于海鸥优化算法SOA-CEEMDAN实现信号去躁附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
毕业设计javajspKTV包房管理系统(ssh)-qkrp源码含文档
07-19
毕业设计javajspKTV包房管理系统(ssh)-qkrp源码含文档 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 采用全新的计算机网络和管理系统，将成为提高KTV管理效率，改善服务水准的重要手段之一。所以城市KTV包房信息管理系统是KTV经营不可缺少的现代工具。系统的主要功能包括：会员管理、类别管理、包房管理、预订管理。 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程（在说明文档中）
基于Springboot的图书管理系统论文
07-19
传统信息管理主要依赖管理人员的手工登记与管理。然而，近年来信息技术的快速进步促使许多陈旧的信息管理方式得以更新。特别是图书信息，因其管理内容复杂且数量庞大，手工处理方式已难以满足广大用户的需求，于是图书管理系统应运而生。 本图书管理系统设有管理员和用户两种权限。管理员负责管理用户基本信息、公告信息及图书信息，并能与用户进行交流等。用户则可以查看图书信息、公告以及管理员的回复等。 该系统采用WEB应用程序开发中流行的小程序结构模式，使用空间占用小但功能全面的MySQL数据库进行数据存储，并运用了JSP技术进行开发。该图书管理系统有效解决了传统手工操作中的诸多问题，如数据查询耗时长、管理步骤繁琐等。总体而言，该图书管理系统性能稳定、功能完备，且具有较高的性价比。
HTML基础学习：网页设计入门与实践
"网页设计与指导文件主要针对初学者，教授HTML基础知识，包括网页设计的基本概念和实践操作，通过一系列实验来帮助理解HTML标签的功能。实验涵盖了从最基础的HTML结构到段落、标题、折行、图像以及链接等多个方面。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值