HTML页面知识点小总结(巨详细)

news2025/1/26 14:26:23

HTML基础知识点总结

文章目录

  • HTML基础知识点总结
      • 一、 HTML页面主要的三大标签。
      • 二、 外部的CSS文件。
      • 三、外部的JavaScript文件。
      • 四、< body >标签中存放的内容。
          • 如果觉得写的不错的话点个赞支持鼓励一下吧，欢迎交流，谢谢啦~~~

一、 HTML页面主要的三大标签。

它们分别是< html >< /html >< head >< /head >< body >< /body >

    <html>
        <head>
        1.可以存放的是编码方式，如  <meta charset="utf-8">
        2.可以存放网页标题，如 <title>hello world</title>
        3.可以写CSS样式代码，如<style type="text/css"> css代码 </style>
        4.还可以链接外部的的css文件，如<link rel="stylesheet" href="css/css01.css">
        5.可以写JavaScript代码，如<script type="text/javascript"> javascript代码 </script>
        6.还可以链接外部的JavaScript文件，如<script type="text/javascript" src="js/js01.js"></script>
        </head>
        <body>
        这里是HTML页面的主体部分。可以存放文字段落、视频、音频文件、表格、表单等主要内容。
        </body>
    </html>
    以上这些代码组成了一个HTML页面文件，即.html文件。

二、 外部的CSS文件。

CSS文件的作用是实现对网页布局、色彩等的安排。一般情况下所有的关于网页样式布局设计的代码都会单独存放在一个叫CSS的文件夹里。可以直接使用标签< link >将其链接至html文件的< head >标签里。

css样式的最基本分类：标签样式、类样式、id样式、组合样式

css从位置上的分类：嵌入式样式、内部样式、外部样式

一般的css代码样式如下。

body{         //标签样式
    margin:0px; //margin代表页面边距
    padding:0px; //padding代表填充的像素
    background-color: darkgray; //background-color代表背景颜色
}
#table_fruit{     //  #+id 表示id样式
	border: 1px solid blue; //  边框像素 边框样式 边框颜色
	width: 60%;        // 宽度
	line-height: 35px;   //(表格中的)行高
	font-size: 20px;     //字体尺寸大小
	font-weight: bold;   //字体风格
	color: blueviolet;   //背景颜色
	margin-top:20% ;     //上边距
	margin-left: 20%;    //左边距
	background-color: aquamarine;
}
.delimg{      //   .+class名   表示类样式
	width: 25px;
	height: 25px;
        font-size: 20px;
}
div p{          //    div+标签名   表示深入到某一层当中的某一个标签的样式(组合样式)
	color: blue;
	font-size: 40px;
	background-color: pink;
	font-weight: bold;
}

三、外部的JavaScript文件。

JavaScript的作用简单来说就是实现一些网页中的特效。具体作用是读取HTML页面中的元素，对浏览器的时间做出响应等。
以下JavaScript代码是从一个完整的代码中截取的片段，需放入特定的文件中结合css和html页面共同作用才会生效。

function methodname(num1,num2,name){
	return name+"现在"+num1+"岁，比我小"+num2+"岁";
}   // 函数定义的基本格式
在函数中声明定义变量用 var ，不区分类型。
function showBGColor(){              //实现鼠标悬浮时显示背景颜色
	//event：当前发生的事件
	//event.srcElement：事件源
	//alert(event.srcElement);
	//alert(event.srcElement.tagName);
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td=event.srcElement;
		//td.parentElement表示获取td的父元素tr
		var tr=td.parentElement;
		//如果想要通过js代码设置某节点的样式，则需要加上 .style
		tr.style.backgroundColor="aliceblue";
		//tr.cells表示获取这个tr内的所有单元格，也就是td的集合。
		var tds=tr.cells;
		for(var i=0;i<tds.length;i++){
			tds[i].style.color="pink";
		}
	}
}
function showhand(){        // 实现鼠标悬浮在特定位置时，由"箭头"转变为"小手"的形状
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td=event.srcElement;
		//cursor:光标
		td.style.cursor="hand";
	}
}    
function cleanBGColor(){    // 实现鼠标离开后，箭头恢复到原来的形状。
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td=event.srcElement;
		var tr=td.parentElement;
		tr.style.backgroundColor="transparent";
		var tds=tr.cells;
		for(var i=0;i<tds.length;i++){
			tds[i].style.color="blueviolet";
		}
	}
}

四、< body >标签中存放的内容。

  1. <p></p> p标签是段落标签。

  2. <br> br标签是换行标签。

  3. <hr> hr标签是横向分隔线标签。

  4. <h1><h2><h3><h4><h5><h6> 均代表的是标题标签。如

    <h1>h1标签的标题最大</h1><h6>h6标签的标题最小</h6>

  5. <ol></ol>标签是有序列表标签。

    <ol type="A" start="1">
<li>大一</li>
<li>大二</li>   
<li>大三</li>  
<li>大四</li>   
</ol>

    上面代码显示效果是

     A.大一 
 B.大二
 C.大三
 D.大四

  6. <ul></ul>标签是无序列表标签。

     <ul type="circle">
    <li>大一</li>
    <li>大二</li>
    <li>大三</li>
    <li>大四</li>
 </ul>

    上面代码显示效果是

    • 大一
    • 大二
    • 大三
    • 大四

  7. <b></b><u></u><i></i> b标签代表加粗。u标签代表加下划线。i标签代表斜体。如

    <b><u><i>I love you</b></u></i>

    显示效果对比      
    I love you    I love you

  8. <sub></sub><sup></sup> 分别代表下角标和上角标标签。如

     水的化学分子式:  H<sub>2</sub>O
 x的平方:  x<sup>2</sup>

    显示效果：      
    H2O        x2

  9. <span>需要标记的内容</span> span标签表示不换行的“块标记”，方便后续进行操作。

  10. <a></a> a标签表示超链接标签。如

    <a href="http://www.baidu.com" target="_blank">百度一下</a>

    显示效果：    百度一下

  11. 第10条<a>标签中的target属性共有四种。

    打开链接在 _blank新窗口中 _self本窗口中 _parent父窗口中 _top顶层窗口中

  12. (1). <table></table> table表示表格标签。

    (2). <tr></tr> tr表示行标签 。

    (3.) <td></td> td表示列标签。如果是表头可以将td换成th。

     <table border="1" cellspacing="0" cellpadding="4" width="400">
    <tr align="center">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>籍贯</th>
        <th>婚姻</th>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>20</td>
        <td>男</td>
        <td>北京市</td>
        <td>已婚</td>
    </tr>
    <tr align="center">
        <td>李四</td>
        <td>21</td>
        <td>女</td>
        <td>上海市</td>
        <td>未婚</td>
    </tr>
    <tr align="center">
        <td>王五</td>
        <td>22</td>
        <td>未知</td>
        <td>天津市</td>
        <td>未婚</td>
    </tr>

(1)table标签中的border属性表示表格的边框，等于1代表边框为1像素。
(2)cellspacing属性代表单元格间距,等于0代表单元格之间间距为0 。
(3)cellpadding属性代表单元格子的内容与单元格子四边边界之间空白距离。等于4表示单元格内内容与本单元格边框的间距为4像素。
(4)tr标签中的align属性表示将本行单元格内的内容位置。等于"center"以为单元格内容居中显示。
上面代码显示效果如下

姓名年龄性别籍贯婚姻
张三20男北京市已婚
李四21女上海市未婚
王五22未知天津市未婚

假如张三和李四年龄一样都是21，则可以合并他俩的年龄单元格。具体代码操作：

在张三的代码块中将<td>20</td>改写成<td rowspan=“2”>21</td>，同时删去李四代码块中的<td>21</td>即可。效果如下

姓名年龄性别籍贯婚姻
张三20男北京市已婚
李四女上海市未婚
王五22未知天津市未婚

(1) td标签的rowspan属性表示跨行合并单元格。等于2表示跨两行合并。
(2) td标签的colspan属性表示跨列合并单元格。等于几就表示跨几列合并。

  1. <img>标签表示的是图片标签。即在对应位置插入图片。如

    <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1816252e7814836b47e8dbc22c01ed9~tplv-k3u1fbpfcp-zoom-1.image" width="300" height="300">

    img标签中的src内容应该写入想要插入的图片的位置。后面的width和height表示设置图片的高度和宽度。其中图片的位置有两种。
    (1)一种叫绝对路径，上面的代码就是绝对路径，是图片的网络链接。
    (2)另一种叫相对路径，就是类似于"C:\Users\Administrator\Pictures\Camera Roll\kebi.jpg"这种带盘符的本地图片。

    代码显示效果

  2. <form></form>     form表示表单标签。

    <form action="index.html" method="post">
    用户名：<input type="text" name="admit" value="请输入你的昵称"/><br>
    密 码： <input type="password" name="psd"/><br>
    性 别： <input type="radio" name="gender" value="male" checked="checked" />男
           <input type="radio" name="gender" value="female"/>女<br>
    爱 好：<input type="checkbox" name="hobby" value="basketball" checked="checked" />篮球
            <input type="checkbox" name="hobby" value="football"/>足球
    <input type="checkbox" name="hobby" value="swim" checked="checked" />游泳<br>
    星 座：<select name="constellation">
            <option value="1" >双鱼座</option>
            <option value="2" selected="selected">水瓶座</option>
            <option value="3" >魔羯座</option>
            <option value="4" >狮子座</option>
            <option value="5" >白羊座</option>
            <option value="6" >天蝎座</option>
            </select> <br>
    备 注：<textarea name="remark" rows="5" cols="100"></textarea><br>
            <input type="submit" value="注 册"/>
            <input type="reset"  value="重 置"/>
            <input type="button" value="普通按钮"/>
    </form>

    (1)form表单的action属性代表的是将此表单提交至action中的页面,提交的表单数据既为各个标签的name值。method属性代表提交方式，提交方式有两种，另一种是method=“get”。两种方式都可以，但是get不安全，而且有大小限制。一般推荐使用post。

    (2)用户名：input代表输入框，type类型为text代表文本框。

    (3)密码：password代表密码框(输入内容不可见)。

    (4)性别：type类型为radio时，表示单选框，此时所有选项的name值应该相同，作用是让各个选项之间相互排斥。

    (5)爱好：type类型为checkbox时代表多选框。name值可以相同可以不同。但是最好相同。

    (6)星座：可下拉选择框所用标签是select，选项标签是option

    (7)备注：文本区域的标签是textarea，rows属性表示文本域的行数，cols表示文本框的字数。

    (8)按钮：input标签有三种按钮，submit属性代表注册提交。reset属性代表重置到默认状态。button属性代表普通按钮。

    (9)默认选择：checked="checked"代表在可以选择的选项中，初始化状态就是默认选中所在标签的选项。

    显示在网页中的效果如下

QQ图片20220211172014.png
15. <div></div>     div标签表示层叠样式标签，可以将网页划分为不同的模块。

如果觉得写的不错的话点个赞支持鼓励一下吧，欢迎交流，谢谢啦~~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407787.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

前端知识点汇总

前端知识点汇总

HTML介绍 HTML: Hyper Text Markup Language 超文本标记语言&#xff0c;用来做网页. 负责网页的框架结构布局.1993年 html 1.0 Tim Berners-Lee(蒂姆-博纳斯-李)&#xff0c;万维网之父1995年 html 2.0 IETF(互联网工程小组)1997年1月 html 3.2 W3C(万维网联盟)1997年12月 ht…
阅读更多...
vue2：elementUI中Form 表单在特定情况下做动态rules添加删除

vue2：elementUI中Form 表单在特定情况下做动态rules添加删除

先看需求&#xff1a;&#xff08;不想看的直接拉到最后&#xff09; 【需求说明】 6、如状态为上架时&#xff0c;库存为必填&#xff0c;下架状态时&#xff0c;库存为可填&#xff0c;前面无星号 实现方法&#xff1a;使用this.$set()和this.$delete() 上代码&#xff1a;…
阅读更多...
Vue2 + JSX使用总结

Vue2 + JSX使用总结

什么是JSX 摘自 React 官方&#xff1a; 它被称为 JSX&#xff0c;是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX&#xff0c;JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言&#xff0c;但它具有 JavaScript 的全部…
阅读更多...
前端人必看的JS面试题汇总

前端人必看的JS面试题汇总

面试是每一个前端人在求职过程中都需要面对的事情。在面试过程中&#xff0c;面试官没有办法通过实践操作去了解应聘者的技能水平&#xff0c;所以他们更多地会通过“八股文”的考察来判断你是否符合公司的招聘要求。所以作为一个前端人&#xff0c;在掌握好前端技能的同时&…
阅读更多...
vue导出word

vue导出word

最近的项目中&#xff0c;需要把vue中的部分内容导出为word形式&#xff0c;之前没有做过这方面的&#xff0c;特记录&#xff0c;由于是初学&#xff0c;所以整理了此模板&#xff0c;注意&#xff1a;这是一个模板&#xff0c;并不是相关字段的解析&#xff0c;每个字段都是做…
阅读更多...
ECharts柱状图关闭鼠标hover时的高亮样式

ECharts柱状图关闭鼠标hover时的高亮样式

最近在做图表相关的需求&#xff0c;使用的是echarts来画图。 今天算是遇到一个比较坑的点了吧&#xff0c;就是两根柱状图重叠对比&#xff0c;设计图把某根柱状图的颜色设计得比较浅&#xff0c;因为echarts的柱状图本身hover到柱子上的时候&#xff0c;会有个高亮状态&…
阅读更多...
JavaScript纯前端解析Excel文件

JavaScript纯前端解析Excel文件

最近在开发时候遇到了这样的一个需求&#xff1a;需要在前端通过解析Excel将Excel中的值进行回传填入。我想在实际的开发过程中&#xff0c;肯定大家也会遇到这样的需求&#xff0c;在这介绍一个比较不错的JS工具库&#xff1a;js-xlsx&#xff0c;及该库的简单使用方法。 1、…
阅读更多...
Three.js-设置环境纹理及加载hdr环境贴图

Three.js-设置环境纹理及加载hdr环境贴图

目录 1.hdr 2.环境纹理&#xff08;全景&#xff09; 3.CubeTextureLoader加载立方体环境纹理 4.RGBELoader环境纹理加载 1.hdr HDR全称High-Dynamic Range&#xff08;高动态光照渲染&#xff09;&#xff0c;通过HDR&#xff0c;显示器或相机可以很好的表现超出其亮度范围…
阅读更多...
vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据，动态校验规则】

vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据，动态校验规则】

vue3 ant design vue项目实战——Form表单【v-model双向绑定数据实现form表单数据的提交】上期文章回顾【UI界面渲染】场景复现&#xff08;源代码附在文章最后&#xff09;实现需求1.表单数据及其类型的定义2.表单及各部分数据的双向绑定3.表单提交功能4.校验输入内容不为空5.…
阅读更多...
vue-数据绑定

vue-数据绑定

目录 1 数据绑定 2 绑定方式 2.1 单向绑定 2.2 双向绑定 1 数据绑定 Vue中有两种数据绑定方式&#xff1a; 1 单向绑定(v-bind)&#xff1a;数据只能从data流向页面。 2 双向绑定&#xff08;v-modle&#xff09;&#xff1a;数据不仅能从data流向页面&#xff0c;还能从页…
阅读更多...
VSCode开发：使用nvm切换node版本

VSCode开发：使用nvm切换node版本

为什么要切换node版本&#xff0c;是因为npm run dev(vant app&#xff09;时&#xff0c;报了Error [ERR_REQUIRE_ESM]&#xff1a;Must use import to load ES Module这样的错。我使用的node版本是12.16.3&#xff0c;切换到16.15.1就没有这个问题了。 1. 安装nvm前记得要删…
阅读更多...
【node进阶】深度解析express框架---编写接口|解决跨域问题

【node进阶】深度解析express框架---编写接口|解决跨域问题

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…
阅读更多...
Vuex 学习

Vuex 学习

什么是vuex&#xff1a; 专门在Vue中实现集中式状态&#xff08;数据&#xff09;管理的一个Vue插件&#xff0c;对vue应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件间通信的方式&#xff0c;且适用于任意组件间通信。 原理…
阅读更多...
clone下来的vue项目出现“An unknown git error occurred”，vue全局挂载axios及配置全局请求和响应拦截，uni-app的全局请求和响应拦截，对请求方法的封装

clone下来的vue项目出现“An unknown git error occurred”，vue全局挂载axios及配置全局请求和响应拦截，uni-app的全局请求和响应拦截，对请求方法的封装

文章目录前言一、如何解决clone下来的vue项目出现“An unknown git error occurred”&#xff1f;二、vue全局挂载axios并设置全局的请求和响应拦截1.先下载安装好axios&#xff0c;这个就不用多说了2&#xff0c;vue2中的全局挂载:3,在vue3中我们又应该怎么全局挂载axios呢&am…
阅读更多...
vue中使用百度地图

vue中使用百度地图

vue中使用百度地图 之前写过一篇vue调用百度地图的文章&#xff0c;但是写得不是很清晰&#xff0c;所以重新整理一篇&#xff1b;申请百度地图ak 这个我在之前的那篇文章已经讲过&#xff0c;就不再细说&#xff0c;链接如下&#xff1a;vue调用百度地图 初始化地图 引入地图…
阅读更多...
同一页面实现recycleView三种布局【recycleView + adapter】

同一页面实现recycleView三种布局【recycleView + adapter】

文章目录&#x1f96d;&#x1f96d;简介&#x1f96d;&#x1f96d;效果图&#x1f96d;&#x1f96d;代码&#x1f34e;&#x1f34e;三个Adapter修饰器&#x1f34e;&#x1f34e;主界面函数 && FuritBean&#x1f34e;&#x1f34e;布局文件&#x1f96d;&#x1f…
阅读更多...
js获取dom元素宽高

js获取dom元素宽高

一&#xff0c;前言 1.对于css盒子模型&#xff0c;我们使用width和height等来定义dom元素的宽高&#xff0c;而有时我们需要在js中获取元素的宽高进行一些操作。 2.dom操作提供了相应的属性来实现这一点 二&#xff0c;clientWidth和clientHeight 1.clientWidth和clientHe…
阅读更多...
js监听页面或元素scroll事件，滚动到底部或顶部

js监听页面或元素scroll事件，滚动到底部或顶部

基本原理&#xff1a; 1、滚动到底部 元素的滚动距离 元素的可视距离 元素的滚动条总距离2、滚动到顶部 元素的滚动距离 0监听页面滚动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv&…
阅读更多...
Flask：使用SocketIO实现WebSocket与前端Vue进行实时推送（gevent-websocket、flask-socketio、flask不出现running on 127..问题）

Flask：使用SocketIO实现WebSocket与前端Vue进行实时推送（gevent-websocket、flask-socketio、flask不出现running on 127..问题）

前言 本文旨在记录使用Flask框架过程中与前端Vue对接过程中&#xff0c;存在WebSocket总是连接失败导致前端取不到数据的问题。以及在使用WebSocket相关功能的库包gevent-websocket之后&#xff0c;导致运行Flask项目之后&#xff0c;控制台没有显示running on 127.0.0.1:5000…
阅读更多...
Vue复刻华为官网(三)

Vue复刻华为官网(三)

文章目录1 底部列表1.1 思路1.2 代码1.3 效果图1.3.1 搜索框1.3.2 商标2 公司信息2.1 思路2.2 代码2.3 效果图3 上升按钮3.1 思路3.2 代码3.3 效果图4 图标完善4.1 思路4.2 安利图标库1 底部列表 1.1 思路 如上图&#xff0c;这整个的大盒子&#xff0c;又可以被分为上中下三个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023