HTML

最新推荐文章于 2022-05-17 18:27:03 发布
最新推荐文章于 2022-05-17 18:27:03 发布
阅读量84 收藏
点赞数
分类专栏： 前端 文章标签： 列表 html 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwq1518346864/article/details/115631117
版权
本文概述了HTML的基本概念，包括其作为超文本标记语言的作用，以及如何通过结构、排版、块级、文本、列表、图形和表单等标签进行网页设计。从HTML5开始，了解了核心标签如<div>、<p>、<a>、<table>等的使用方法和CSS+DIV布局。
摘要由CSDN通过智能技术生成

一.HTML简介

1.1什么是HTML

HTML全称：Hyper Text Markup Language(超文本标记语言)

  • 超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素

  • 标记:标签，不同的标签实现不同的功能

  • 语言:人与计算机的交互工具

1.2HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

1.3HTML书写规范

  • HTML标签是以尖括号包围的关键字

  • HTML标签通常是成对出现的，有开始就有结束

  • HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)

  • HTML标签不区分大小写,建议全小写

二.HTML基本标签

2.1结构标签

<html>         <!--根标签 -->  
    <head>         <!--网页头标签 -->
   		<title></title>   <!--页面的标题 -->
    </head>      
    <body></body>    <!--网页正文 -->
</html>
属性名代码描述
text< body text="#f00"></ body>设置网页正文中所有文字的颜色
bgcolor< body bgcolor="#00f"></ body>设置网页的背景色
background< body background="1.png"></ body>设置网页的背景图

颜色的表示：

  • 第一种方式：使用表示颜色的英文单词，
  • 第二种方式：使用16进制表示颜色，

2.2排版标签

  • 注释标签：<!--注释-->

  • 换行标签：< br/>

  • 段落标签：< p>文本文字</ p>

    • 特点：段与段之间有空行

    • 属性：align对齐方式(left、center、right)

  • 水平线标签:< hr/>

    • 属性:

      • width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)

      • size: 水平线的粗细 (像素表示，例如：10px)

      • color:水平线的颜色

      • align:水平线的对齐方式

2.3块标签

使用CSS+DIV是现下的一种布局方式。

标签代码描述
div< div></ div>行级块标签，独占一行，换行
span< span></ span>行内块标签，所有内容都在同一行

2.4基本文字标签

font标签处理网页中文字的显示方式

属性名代码描述
size< font size="7"></ font>用于设置字体的大小，最小1号，最大7号
color< font color="#f00"></ font>用于设置字体的颜色
face< font face="宋体"></ font>用于设置字体的样式

2.5文本格式化标签

使用标签实现标签的样式处理

标签代码描述
strong< strong></ strong>加粗
em< em></ em>斜体
small< small></ small>小号字体
big< big></ big>大号字体
sub< sub></ sub>上标标签
sup< sup></ sup>下标标签
del< del></ del>删除线

2.6标题标签

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签代码描述
h1< h1></ h1>1号标题，最大字号
h2< h2></ h2>2号标题
h3< h3></ h3>3号标题
h4< h4></ h4>4号标题
h5< h5></ h5>5号标题
h6< h6></ h6>6号标题，最小字号

2.7列表标签（清单标签）

无序列表：使用一组无序的符号定义，< ul>< /ul>

<ul type="circle">
    <li></li>
</ul>
属性值描述用法举例
circle空心圆< ul type="circle">< /ul>
disc实心圆< ul type="disc">< /ul>
square黑色方块< ul type="square">< /ul>

有序列表：使用一组有序的符号定义，< ol>< /ol>

<ol type="a" start="1">
    <li></li>
</ol>
属性值描述用法举例
1数字类型< ul type="1">< /ul>
A大写字母类型< ul type="A" >< /ul>
a小写字母类型< ul type="a">< /ul>
I大写古罗马< ul type="I">< /ul>
i小写古罗马< ul type="i">< /ul>

列表的嵌套：无序列表与有序列表相互嵌套使用

<!-- 代码举例： -->
	<ol>
		<li></li>
        <li></li>
        <li>
        	<ul>
                <li></li>
            </ul>
<!-- ul得在ol里面的li里，不然ul的type没有作用 -->
        </li>
	</ol>

2.8图形标签

在页面指定位置处中引入一幅图片， < img />

属性名描述
src引入图片的地址
width图片的宽度
height图片的高度
border图片的边框
align与图片对齐显示方式
alt提示信息
hspace在图片左右设定空白
vspace在图片的上下设定空白

2.9链接标签

  • 在页面中使用链接标签跳转到另一页面

    • 标签： < a href="">< /a>

    • 属性：href:跳转页面的地址(跳转到外网需要添加协议)

  • 设置跳转页面时的页面打开方式，target属性

    • _blank在新窗口中打开

    • _self在原空口中打开

  • 指向同一页面中指定位置

    • 定义位置： < a name="名称">< /a>

    • 指向： < a href="#名称">< /a>

2.10表格标签

  • 普通表格（table，tr，td）
<table>
	<tr>
		<td></td>
	</tr>
</table>
  • 表格的列标签(th):内容有加粗和居中效果
<table>
	<tr>
		<th></th>
	</tr>
</table>
  • 表格的列合并属性(colspan)：在同一行内同时合并多个列
<table>
	<tr>
		<td colspan="?"></td>
	</tr>
</table>
  • 表格的行合并属性(rowspan)：在同一列跨多行合并
<table>
	<tr rowspan="">
		<td></td>
	</tr>
</table>

三.HTML表单标签

表单用于收集不同类型的用户输入数据。

3.1form元素常用属性

  • action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理

  • method:请求方式：get 和post

    • get:

      • 地址栏,请求参数都在地址后拼接 path?name="张三"&password="123456"

      • 不安全

      • 效率高

      • get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据

    • post：

      • 地址栏：请求参数单独处理。

      • 安全可靠些

      • 效率低

      • post请求大小理论上无限；一般用于插入删除修改等操作

  • enctype:表示是表单提交的类型

    • 默认值：application/x-www-form-urlencoded 普通表单

    • multipart/form-data 多部分表单(一般用于文件上传)​

3.2input元素

属性值描述代码
text单行文体框< input type="text"/>
password密码框< input type="password"/>
radio单选按钮< input type="radio"/>
checkbox复选框< input type="checkbox"/>
date日期框< input type="date"/>
time时间框< input type="time"/>
datetime日期和时间框< input type="datetime"/>
email电子邮件输入< input type="email"/>
number数值输入< input type="number"/>
file文件上传< input type="file"/>
hidden隐藏域< input type="hidden"/>
submit表单提交按钮< input type="submit"/>
button普通按钮< input type="button"/>
reset重置按钮< input type="reset"/>
image图片提交按钮< input type="image"/>

3.3select元素(下拉列表)

  • 单选下拉列表：<select></select>
  • 默认选中属性：selected="selected"
<select>
    <option selected="selected">内容</option>
    ...
    <option></option>
</select>
  • 多选下拉列表属性： < select></ select>
  • 多选列表：multiple="multiple"

3.4textarea元素(文本域)

多行文本框：<textarea cols="列" rows="行"></textarea>

四.HTML框架标签

4.1框架结构标签frameset

  • 框架结构标签（ < frameset>< /frameset>）用于定义如何将窗口分割为框架

  • 每个 frameset 定义了一系列行或列

  • rows/columns 的值规定了每行或每列占据屏幕的面积

    • <frameset rows="">< /frameset>

    • <frameset cols="">< /frameset>

4.2框架标签frame

每个frame引入一个html页面

<frameset cols="*,*"> 
    <frame src="info1.html" />
    <frame src="info2.html" />
</frameset>

<frameset rows="*,*">
    <frame src="info1.html" />
    <frame src="info2.html" />
</frameset>

4.3基本的注意事项

  • 不能将<body></body>标签与< frameset>< /frameset>标签同时使用
  • 不能将可见边框拖动，在<frame>标签中加入：noresize="noresize"
永旗狍子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML李峋同款跳动的爱心代码（双爱心版）
兔子王
06-19 6万+
HTML李峋同款跳动的爱心（双爱心版）完整代码。
HTML的介绍
tianfen_auster的博客
12-03 6840
一、HTML的介绍 1、HTML的概述： html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。 超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 作用：HTML是负责描述文档语义的语言。 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解
HTML旋转相册
m0_61933976的博客
05-17 4429
快快动手做一个旋转相册吧！
Html
weixin_44260499的博客
10-20 192
#web的标准 主要包括结构（Structure）、表现（Presention）和行为（Behavior）三个方面 web标准提出的最佳体验方案：结构、样式、行为相分离 #HTML标签（上） ##HTML语法规范 1.1基本语法概述 （1）HTML标签是由尖括号包围的关键词，例如 （2）HTML标签通常是成对出现的，例如。称为双标签，标签中的第一个标签是开始标签，第二个是结束标签。 （3）有些特...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
纯HTML5拓扑图编辑器源代码
04-07
屌爆的纯HTML5拓扑图编辑器源代码，找了很久终于申请到，运行就是这个效果 http://www.hightopo.com/blog/wp-content/uploads/2014/08/Screen-Shot-2014-08-12-at-8.57.11-PM.png 可参考这篇博客 ...
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
javaWeb前后端传递数据交互的两种方式
qwq1518346864的博客
05-16 6802
从前端向后台传递参数方法 一、通过表单传递参数 1.前端部分，在前端jsp页面设置form表单，确定需要传递的参数让用户输入，通过点击按钮后submit()提交到后台， <form id="loginForm" method="post" action="/emp?method=login"> 用户名: <input type="text" name="ename" value="小乔" id="ename"><span id="nameMsg"><
对表单进行验证! $(“选择器“).validate()；
qwq1518346864的博客
05-28 943
validate使用步骤 导入jquery文件 导入validate.js 页面加载成功后!对表单进行验证! $("选择器").validate(); 在validate中编写校验规则 $("选择器").validate( rules:{}, messages:{} ); $(function(){ $("#formId").validate({ rules:{ //1.校验元素的name属性 username:"校验器" 使用单一的校验器
jsp页面顶部＜%@ page language=“java“ contentType=“text/html； charset=UTF-8“ pageEncoding=“UTF-8“%＞
qwq1518346864的博客
05-16 862
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 那么page language， pageEncoding ， contentType 分别用来做什么那？在解释之前让我们先了解下jsp从被请求到响应经历的三个阶段： 第一阶段：将jsp编译成Servlet（.java）文件。用到的指令是pageEncoding，根据pageEncoding＝“XXX”的指示，找到编码的
Thymeleaf配置basePath
qwq1518346864的博客
06-18 731
<head> <meta charset="UTF-8"> <title>Title</title> <base th:href="${#servletContext.getContextPath()+'/'}"> </head>
mybatis中PageHelper的使用(分页)
qwq1518346864的博客
05-16 608
引言：PageHelper是适用于MyBatis框架的一个分页插件，使用方式极为便捷，支持任何复杂的单表、多表分页查询操作。 一.开发步骤 1.引入依赖 pom.xml中引入PageHelper依赖。https://github.com/pagehelper/Mybatis-PageHelper <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelp
jQuery完整的实现轮播图
qwq1518346864的博客
04-27 556
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 广告图片轮播切换</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.12.4.js"></script>...
JavaScript简单的实现轮播图
qwq1518346864的博客
04-25 476
用JavaScript简单的实现轮播图： 1.鼠标不触碰图片时，图片以1.5秒的速度自动播放。 2.鼠标触碰图片时，自动轮播图片停止。 3.鼠标点击1-5时，通过下标跳转到对应的图片。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片轮换</title> <link rel="stylesheet" href=".
JavaScript的基础知识以及基本语法
qwq1518346864的博客
04-25 379
一.JavaScript 1.1JavaScript简介 JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。 它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。 1.2 JavaScript组成部分 ECMAScript语法 文档对象模型（DOM Document Object Model） 浏览器对象模型(BOM Browser Object Model) 1.3 J
JSP的九大内置对象和四大作用域对象
qwq1518346864的博客
05-05 252
1.九大内置对象 由JSP自动创建的对象，可以直接使用 对象名 类型 说明 request javax.servlet.http.HttpServletRequest response javax.servlet.http.HttpServletResponse session javax.servlet.http.HttpSession 由session=“true”开关 application javax.servlet...
HTML圣诞树代码分享
"圣诞节快乐的圣诞树.txt" 是一个HTML文件，内容是一个简单的圣诞树页面。这个页面在圣诞节时可以用来展示和分享，通过更改文件扩展名为.html即可在浏览器中打开。 该HTML代码中，主要包含以下几个关键知识点： 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值