【前端】HTML基础总结

最新推荐文章于 2023-02-26 10:53:24 发布
最新推荐文章于 2023-02-26 10:53:24 发布
阅读量3.3k 收藏 47
点赞数 8
分类专栏： web前端 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happygjcd/article/details/103658403
版权
概要
html基本结构
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>html标签</title>
</head>
<body>
</body>
</html>
&nbsp; 空格
&emsp; 空字符
html标签
<h1></h1> 标题标签1-6之间字体大小逐渐减小
<p></p> 段落标签
<b></b> 加粗
<strong></strong> 加粗优化搜索
<i></i> 斜体
<div></div> 块级元素
<span></span> 内联元素
<img src=”” alt=””> 图片标签
<a href=”” target=”_self(在原有网页上打开)/_blank(打开空白页)” title=”鼠标移动链接上显示的内容”> 链接标签
<textarea>产生文本区
<body background="xxxx.gif">插入背景


列表
<ol><li></li></ol> 有序列表
<ul><li></li></ul> 无序列表 消除列表圆点list-style:none;
<dl><dt><dd><dd></dt></dl> 自定义列表
表格
<table><tr><td rowspan=”列数” colspan=”行数”><td></tr></table>
th和td的区别:th自动加粗自身表格里的内容
表单
<form action="url" method='POST'></form>
POST与GET的区别,GET是把输入的内容拼接到URL上，
POST是把输入的内容保存到数据库中
产生下拉列表:<select>
<label>标签与<input>标签连用，如果您在 label 元素内点击文本，就会触发此控件。<label> 标签的 for 属性应当与相关元素的 id 属性相同
文 本 框<input type="text" value="" maxlength"可输入的最大长度" size="" />
提交按钮<input type="submit" value="提交" />
普通按钮<input type="button" value="普通按钮" />
密 码 框<input type="password" />
重置按钮<input type="reset" value="重置" />
单选按钮<input type="radio"checked="checked" />
文件上传按钮<input type="file"/>
多选按钮<input type="checkbox" />name
下拉框<select><optgroup=””><option></option></optgroup></select>
多行文本域<textarea  rows="行" cols="列"></textarea>
隐藏域<input type="hidden" />
图片按钮<input type="image" src= "" alt=”图片加载失败提示内容”>
易错知识点
  • <!DOCTYPE html>不属于HTML标签，它用于指定文档的类型
  • <pre>标签用于预定义格式处理，文本在浏览器中显示时遵循HTML文档规范
  • 在HTML表格里面如果我们的表格很复杂，那么表格要完全加载下来再显示，它的加载时间太长影响用户体验，所以我们可以使用表格结构划分标签，让它加载一部分就显示一部分。
  • HTML里面导入CSS样式时，使用link与@inport的区别：link除了可以加载CSS样式外还可以做很多事情，比如设置rel(文档与样式的关系)等等，link加载CSS时与页面同时加载，而@import加载时会先把页面下载下来，再加载
HTML链接
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
	<title>HTML图像与超链接</title>
	<meta charset="utf-8">
</head>
<body>
	<img src="F:\360MoveData\Users\acer\Desktop\捕获.PNG" alt="微信截图">  <!--绝对路径-->
	<!--alt的作用是当网络不好，或者src里面属性错误，
		或者浏览器禁用图片等不能显示图片的情况下显示的文字-->
	<img src="捕获.PNG" alt="微信截图">  <!--相对路径-->
	<!--当图片的位置发生改变的时候，绝对路径将不能显示，但是相对路径可以-->
	<!--设置属性-->
	<img src="捕获.PNG" height="100px" width="50px" >  <!--px代表像素-->  
	<img src="捕获.PNG" height="20%" width="30%" >  <!--也可以使用%来定义，%表示占容器大小的百分之几-->  
</body>
</html>
HTML列表
<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta charset="utf-8">    
</head>
<body>
<ol type="i" > <!--这是以小写罗马字符表示,border代表方框的粗细-->
    <li>白日依山尽</li>
    <li>黄河入海流</li>
</ol>
<ol type="a">
    <li>黄河入海流</li><!--这是小写字母表示-->
</ol>
<ol type='I'><!--这是以大写罗马字母bioassay-->
    <li>html是超文本标记语言</li>
</ol>
<ol type='A'><!--这是以大写罗马字母bioassay-->
    <li>html是超文本标记语言</li>
</ol>
<dl>
    <dt>列表项标题信息</dt>    <!--这三个标签必须一起使用-->
    <dd>列表项描述信息</dd>
    <dd>列表项描述信息</dd>
    <dt>列表项标题信息</dt>
</dl>
</body>
</html>
HTML自定义链表
<html>

<body>

<h2>一个定义列表：</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>
</html>

显示结果
在这里插入图片描述

HTML表格
<!DOCTYPE html>
<html>
<head>
	<title>HTML表格</title>
	<meta charset="utf-8">
</head>
<body>
	<!--下面创建一行两列的表格-->
	<table border="1">  <!--设置边框,不设置的话默认没有-->
		<thead>
			<caption>定义列表标题</caption>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>
		</thead>
		<tbody>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>			
		</tfoot>
	</table>
</body>
</html>

效果：
在这里插入图片描述

Charles-Su
关注
专栏目录
前端核心基础知识总结
软贱开发攻城狮
09-07 1万+
在当前内卷严重的技术圈，虽说近两年一直都在唱衰前端开发，甚至有一种所谓的“前端已死”的言论，但是在实际情况下前端开发依然扮演着至关重要的角色，前端是用户与数字产品交互的桥梁。无论是构建复杂且用户体验较高的网页、强大的 Web 应用程序还是响应式的移动界面，前端开发都需要扎实的基础知识，在前端开发领域，基础知识是构建高效、稳定和可维护代码的基石。无论是刚入行的新手还是经验丰富的老手，扎实的前端基础都是必不可少的，尤其在面试过程中，面试官通常会着重考察应聘者对前端基础知识的掌握程度。
web前端基础总结
weixin_68043491的博客
06-06 1965
1.首先了解网页和浏览器网页:网页是网站的基本单位，也叫Web页面，是承载各种网站应用的平台。网页由主要由文字，图片和链接构成，除此之外，网页的元素还包括表格、动画、音频、视频等等。浏览器: 浏览器目前有五大代表,分别为1.IE浏览器 → Edge浏览器2.谷歌（Chrome）浏览器3.safari浏览器4.火狐（Firfox)浏览器5.Opera浏览器浏览器主要由1.用户界面 2.渲染引擎 3.js解释器(Javascript) 4.网络功能模块 5.数据持久化存储等五大部分组成浏览器的内核:2.web标
前端HTML5常用基础知识总结
不想学习的打工人的博客
07-11 3035
HTML 全称为 HyperText Markup Language，译为超文本标记语言。在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架： 1.其中，第一行的声明是HTML5标准2.lang指定页面的语言类型，一般常见的有两种：en：定义页面语言为英语 zh-CN：定义页面语言为中文3.head头标签表示的是页面的配置，其内部的常见标签主要有、、等作用：使网页.........
HTML常用基础内容总结
moteandsunlight的博客
02-26 3552
Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。HTML，即Hyper Text MarkupLanguage，是一种超文本标记语言。顾名思义，这种语言可以表示很多形式的信息，不仅限于文本。
前端基础01 html标签总结
Xs943的博客
03-22 1884
一、html是什么 A.HTML是超文本标记语言 B.文本:txt文本 只能用于存放文字或者是字符 C.超文本:不仅可以用于来描述文字 还可以用于来描述图像 音频 视频 超链接 D.标记:类似java中的关键字(给HTML中的标签一些预定义的含义) E.人与计算机进行交互的桥梁 二、html能做什么 1.HTML是用于来做前端页面 一个网站的主体的部分 所有的网站都需要使用HTML标签来进行修饰 2.前端三大剑客 HTML:是一个网站的主体部分 静态的网站(没有化妆的女朋友) CSS:主要用于来美化网站
web前端基础知识
qq_43375584的博客
02-28 6530
HTML&CSS基础经典版 HTML：结构（页面元素和内容） css：表现（网页元素的外观和位置等页面样式） 行为：JavaScript：行为（网页模型定义与页面交互） 排版标签 排版标签标题标签：h系列标签 重要程度依次递减 特点：独占一行、h1-h6文字逐渐减小 段落标签：p 特点：段落之间存在间隙、独占一行 换行标签： 水平分割线： 文本格式化标签 场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等 语义：突出重要
总结前端三剑客之一（HTML基础）
x0919的博客
01-25 7004
今天我们来学习前端三剑客之一（HTML），在讲解HTML之前，我们需要先了解前端三剑客是什么，分别又有什么作用呢？ 前端三剑客指的是HTML、CSS、JavaScript，这三门语言。目前大多数网站的前端都是由这三门语法写的，他们之前相互搭配进行使用，就能够显示出很多丰富的效果。而他们三者的作用就像是这样的： HTML，像骨头一样，撑起了整个页面的大致框架，比如左边需要一个输入框，右边需要一个按钮之类的，都可以用HTML来实现。 CSS，而HTML实现出来的样式比较单调，CSS就是为它进行“化妆”的，也就
前端基础---HTML常用标签
luckyboy!的博客
08-11 3638
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...............
前端个人总结
qq_55596433的博客
11-16 1113
接下来我会慢慢的去说一下自己，为什么学前端。为什么学前端，相干什么和到了社会想干嘛是为了想在社会拿高薪资。任何事情都是这样，能够坚持下去并有所收获的都是少数，对大多数人来讲放弃才是常态。自学前端难的不是js，也不是各种框架，难的是坚持。只要你能认真看完这篇回答，能够坚持学下去，把我后面整理的这份学习路线上的知识点掌握到应用开发层面，找一份15K左右的工作没有任何问题。工作之后花个几年的时间消化吸收，更进一步的掌握，年薪拿个三四十万也是可以的。希望这片文档对你一些小伙伴有用。
前端基础知识点总结
坚强的泡沫的博客
10-20 1782
1 HTML+CSS 1.1 基本标签 html文档标签： <!DOCTYPE>、<html>、<head>、<meta>、<title>、<link>、<style>、<body>、<script>、<noscript> 按闭合特征分类： 闭合标签：指由开始标签和结束标签组成的一对标签这种标签允许嵌套和承载内容，例如<html></html>、<p>
前端基础总结
12-26
前端基础是指构成网站前台页面的最基础技术，通常包括HTML、CSS和JavaScript三个主要部分。其中HTML用于构建网页的结构，CSS用于添加样式和布局，JavaScript用于添加交互性。对于新手而言，理解这些基础概念至关重要...
前端小白-HTML基础知识学习总结
最新发布
03-23
前端小白-HTML基础知识学习总结
Web前端HTML+CSS+JavaScript基础知识总结.xmind
07-27
本思维导图涵盖HTML、CSS所需掌握的主要应用知识，及JavaScript基础语法，是本人2020年暑假学习笔记，总计35618字。体系清晰，逻辑分明，适合已学习人群对基础知识的复习，初学者也可以以此为基础进行自己的知识体系...
前端 js html css 基础教程
08-17
总结来说，本书是一本非常适合初学者的前端基础教程，通过对HTML、CSS、JavaScript等核心技术的讲解，帮助读者构建起前端开发的初步认识，并能够实现基本的网页设计和交互功能。对于希望进一步深化前端技能的学习者...
一文搞定CSS（附思维导图下载）
Zijian Su的博客
01-17 3626
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div,p{ font-size: 20px; color: red;} h2,h3{ ...
HTML与CSS最常用知识概要
Zijian Su的博客
02-01 912
HTML 1、一套规则，浏览器认识的规则。 2、开发者： 学习Html规则 开发后台程序： - 写Html文件（充当模板的作用） ****** - 数据库获取数据，然后替换到html文件的指定位置（Web框架） 3、本地测试 - 找到文件路径，直接浏览器打开 ...
JavaScript知识点概要
Zijian Su的博客
02-04 547
上节作业问题： 1、css重用 <style> 如果整个页面的宽度 > 900px时： { .c{ 共有 } .c1{ ...
jQuery常用编程案例
Zijian Su的博客
02-10 351
文章目录jQuery实现全选，反选和取消按钮基于DOM来实现反选基于jQuery的写法基于jQuery（使用三元运算符） jQuery实现全选，反选和取消按钮 以下是要操控的HTML代码 <input type="button" value="全选" onclick="selectAll()"/> <input type="button" value="取消" oncli...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值