html，css，js简单介绍，html常用标签

最新推荐文章于 2024-04-26 16:06:24 发布
最新推荐文章于 2024-04-26 16:06:24 发布
阅读量2.6k 收藏 13
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c283933/article/details/124035547
版权

目录

简单介绍

HTML常用标签

1.html骨架标签

2.标题标签

3.段落标签

4.换行标签

5.文本格式化标签

6.div标签，span标签和pre标签

7.图像标签

8.超链接标签

9.注释标签

10.表格标签

11.列表标签

12.表单标签

特殊字符

标签查阅网址

简单介绍

  • html：超文本标记语言（Hyper Text Markup Language），是一种用来描述网页的标记语言，包含了一系列的标签，通过这些标签来对网页进行文档制作，主要用于制作网页的内容。其中超文本指的是：1.超越文本限制（如：图片，视频等）；2.超级链接文本。
  • css：层叠样式表（Cascading Style Sheet），也属于标记语言，主要用于设置html页面中的文本内容（字体，大小，对齐方式等），图片的外形（宽高，边框样式，边距等），以及版面的布局和外观显示样式。
  • js：（JavaScript）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，作于web网页的脚本语言而出名，可用于后端的开发。

HTML常用标签

1.html骨架标签

  • 根标签：<html> </html>
  • 头标签：<head> </head>
  • 标题标签：<title> </title>
  • 身体标签：<body> </body>
<!--html基本格式-->
<html>
    <head>
        <title>标题</title>
    </head>
<!--<head>标签和<title>标签是包含关系-->
    <body>
        内容
    </body>
<!--<head>标签和<body>标签是并列关系-->
</html>
<!DOCTYPE html>
<!--文档类型声明标签，告诉浏览器用html5来显示页面-->
<html lang="en">
<!--lang是language的缩写，定义语言。“en”是英语，“zh-CN”是中文，“fr”是法语-->
<!--定义一种语言，文档中写另一种语言可能会乱码，同时浏览器也可能会有是否翻译页面的提示-->
    <head>
        <meta charset="UTF-8">
<!--charest是字符集，UTF-8是万国码，没有这个网页可能会乱码-->
        <title>标题</title>
    </head>
    <body>
        内容
    </body>
</html>

2.标题标签

<h1>标题</h1>

<h2>标题</h2>

<h3>标题</h3>

<h4>标题</h4>

<h5>标题</h5>

<h6>标题</h6>

 标题标签中的内容会改变字号、字体加粗，从h1到h6标题的字体依次变小。

3.段落标签

<p>paragraph</p>

在段落标签中隔开的两段之间有间隙。

4.换行标签

<br />

换行标签是单标签，break的缩写

 用换行标签的换行，两行之间无间隙。

5.文本格式化标签

加粗<strong> </strong>或者<b> </b><strong>语气更强烈
倾斜<em> </em>或者<i> </i><em>语气更强烈
删除线<del> </del>或者<s> </s><del>语气更强烈
下划线<ins> </ins>或者<u> </u><ins>语气更强烈

文本格式化标签的作用是突出部分内容。

6.div标签，span标签和pre标签

<div>division:分割，分区</div>

<span>span:跨度，跨距</span>

<pre> </pre>

<div>中的内容会单独占一行，如果在</div>后加内容，其后内容会单独占一行；

<span>中的内容会与<span>外的内容用空格隔开；

<pre>中的内容会按照原有格式保留，空格和换行也会保留；

div标签和span标签属于无语义布局。

7.图像标签

<img src="图像url" />

图像标签的属性
属性属性值说明

src

图片路径必须属性，在图像标签中必须有该属性
alt文本替换文本，当图像不能显示的时候显示文字
title文本提示文本，把鼠标放到图像上的时候会显示文字
width像素设置图片的宽度
height像素设置图片的高度
border像素设置图片的边框粗细

 在width和height属性中二选一填入，可以将图片等比例缩放。

  • 图像标签可以拥有多个属性，必须写在标签名的后面
  • 属性部分先后顺序，标签名与属性、属性与属性之间均以空格分开
  • 属性采取键值对的格式，属性=“属性值”

图片路径

打开目录文件夹的第一层叫根目录

1）相对路径（图片当对于html页面的位置，建立出目录路径）

路径符号说明格式
同一级路径图片位于html同一级<img src="img.jpg" />
下一级路径/图片位于html下一级

<img src="images/img.jpg" />

（假设img.jpg在images文件夹中，并且该文件夹与html文件同级）

上一级路径../图片位于html上一级<img src="../img.jpg" />

2）绝对路径

  • 在电脑中的位置，如：D:\....\
  • 网络上的位置：完整的网络路径

8.超链接标签

<a> anchor 锚

<a href="目标地址" target=" ">文本/图片</a>

href为必须属性

target定义新窗口的打开方式，属性值_self从当前窗口打开，_blank从新窗口打开。

链接方式说明
外部链接网址
内部链接网页名称，如xxx.html
空链接#
下载链接.exe文件或.zip文件
网页元素链接如：文本、图片、表格、音频等添加超链接
锚点链接点击后可快速定位到页面中的某个位置

 锚点链接

例：

<a href="#123">第一章</a>

找到目标标签<h3 id="123">第一章</h3>

9.注释标签

<!--注释-->

10.表格标签

表格用来展示数据

<!--表格格式-->
<table>
<!--<table>定义表格标签-->
    <thead>
<!--<thead>定义表格的头部区域-->
        <tr> <th></th> </tr>
<!--<tr>table row定义表格的行-->
<!--<th>table header cell表头一般用于第一行第一列，将文本居中加粗-->
    </thead>
    <tbody>
<!--<tbody>定义表格的主体区域-->
<!--<thead>和<tbody>将表格的头部区域和主体区域分开，可根据需求添加或者删除-->
        <tr> <td></td> </tr>
<!--<td>table data cell-->
    </tbody>
</table>
表格标签的属性
属性属性值说明
alignleft，center，right规定表格对其方式
border1或“”规定表格是否有边框，默认值为“”，无边框
cellpadding像素值规定表格边沿与其内容之间的空白，默认1像素
cellspacing像素值规定表格单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度

以上表格属性不太常用，表格的形式一般用css设置

合并单元格

  • 跨列合并：colspan="合并单元格个数"
  • 跨行合并：rowspan="合并单元格个数"

合并三部曲

  1. 先判断需要的是跨行还是跨列
  2. 找到目标单元格，写合并方式和数量
  3. 删除多余的单元格

例：

<!--跨列原码-->
<tr> <td></td> <td></td> <td></td> </tr>

<!--跨列后-->
<tr> <td></td> <td colspan="2"></td> </tr>

<!--跨行原码-->
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>

<!--跨行后-->
<tr> <td rowspan="2"></td> <td></td> <td></td> </tr>
<tr>                       <td></td> <td></td> </tr>

11.列表标签

列表是用来布局的

<!--无序列表-->
<ul>
    <li></li>
</ul>
<!--<ul>unordered list无序列表，在网页显示的时候，每个小例前面都有一个小黑点-->
<!--<li>list item-->
<!--<ul>中只能放<li>，<li>中可以放任意元素-->

<!--有序列表-->
<ol>
    <li></li>
</ol>
<!--<ol>ordered list无序列表，在网页显示的时候，每个小例前面都有数字序号-->
<!--<ol>中只能放<li>，<li>中可以放任意元素-->
<!--有序列表和无序列表前面的符号都可以通过css删去-->

<!--自定义列表-->
<dl>
    <dt>大标题</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>
<!--<dl>中只能放<dt>和<dd>，<dt>和<dd>数量不限，一般是一个<dt>对应多个<dd>-->
<!--<dt>和<dd>中可以放任何元素

12.表单标签

表单一般用于收集信息

<form>定义表单域

表单标签的属性
属性属性值说明
actionurl地址用于指定接受并处理表单数据的服务器程序的url地址
methodget/post设置表单数据的提交方式
name名称指定表单的名称

1）输入表单元素

<input />是单标签

<input type="属性值" />

type属性值
属性值说明
text单行的输入字段
password密码字段，该字段中的字符被掩码
radio单选按钮（同一个选择列表要有相同的属性name）
checkbox复选框（同一个选择列表要有相同的属性name）
reset重置按钮（可用属性value改变按钮上的字）
submit提交按钮（可用属性value改变按钮上的字）
image图像形式的提交按钮
file输入字段和“浏览”按钮，供文件上传
button可点击按钮（一般通过js启动）
hidden隐藏的输入字段
input的属性
属性属性值说明
name自定义定义input元素的名称
value自定义规定input元素的值，如“请输入”
checkedchecked打开后默认选中有该属性的值
maxlength正整数输入字符最大长度

<label>标签为input元素定义标注

当点击<label>标签内的文本时，浏览器会自动将光标转到对应的表单元素进行选择，增加用户的体验感。

例： 

<label for="boy">男</label>
<input type="radio" name="sex" id="boy" />
<label for="girl">女</label>
<input type="radio" name="sex" id="girl" />
<!--此时点汉字“男”或者“女”时都可以选择到对应的选择框中-->
<!--for属性和对应的id属性的属性值应该相同-->

2）下拉表单元素

<select>
    <option selected="selected"></option>
<!--当<option>标签有属性selected时，打开页面会自动选择<option>中的内容-->
    <option></option>
    <option></option>
</select>

3）文本域表单元素

textarea 文本域表单元素，可输入多行文本

 属性cols="每行字符数”，rows=“行数”

（这个属性一般不用，一般会用css显示文本域的宽高）

特殊字符

符号符号码
空格符&nbsp
<&it
>&gt
&

&amp

摄氏度符号&deg
正负号&plusmn
乘号

&times

除号&divide
平方号&sup2
立方号&sup3

在html文件中输入符号码，在页面中会直接显示符号。

标签查阅网址

百度：百度一下，你就知道 (baidu.com)icon-default.png?t=M276https://www.baidu.com/

W3C：w3school 在线教程icon-default.png?t=M276https://www.w3school.com.cn/

MDN：MDN Web Docs (mozilla.org)icon-default.png?t=M276https://developer.mozilla.org/zh-CN/

紫蝶恋可
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
前端html+css+js学习指南图谱
07-21
前端HTML+CSS+JS学习指南图谱是一个关于前端开发领域的知识总结和图形化展示。该图谱涵盖了HTML、CSS和JavaScript这三个前端开发的基础技术，包括它们的基本概念、语法规则、常用标签和属性、样式定义和布局、DOM操作等内容。通过学习指南图谱，可以帮助初学者系统地了解和学习前端开发的基础知识，掌握前端技术的核心概念和基本技能，为开发优质的网页和应用程序提供指导和参考。
详解HTML5常用的语义化标签
01-21
快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等 <nav> <ul> <li><a>Home</a></li> <li><a>CSS</a></li> <li><a>Html5</a></li> </ul> </nav> article 定义文章 装载显示一个独立的文章内容，论坛帖子、新闻、博客文章、用户评论等，
html+css+js web博客
12-30
该web博客只有三个静态页面，使用简单的html+css+js完成，在这个页面项目中没有设置数据库和数据传递等一系列操作，绝对适合初学html+css的学生参考学习 在登录界面中，使用的是常用的登录注册滑动效果。 在博客主页中有轮播图效果，实时时间显示，代码量简单通俗易懂，适合初学前端的学生。 在点击发文章时，会跳转到编写页面，该页面则是导入的是Markdown。由于主页页面为静态页面，没有数据传递，不会保存，编写完会直接跳转到主页，所以该页面只是在期末考试加分项。 这是一个适合初学者和web期末课设的练习项目。没有太复杂的代码，全部是简单的html和css标签语言，并且在代码中，也添加了不少注释。
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果图。)没有任何插件，资源里有图片素材和全部代码文件，解压后即可运行页面。用到的知识点主要有html课程种常见的标签，span、ul li、a、img、span、div等标签。css样式修饰用到最多的是绝对定位和相对定位，边框修饰，文字修饰，颜色美化等。js用了100多行代码做了一个轮播图效果。 简单总结： 1.没有看过做成效果图的先看我的博客。 2.web大多常用的知识点都以用上 3.该资源解压即可运行 4.js属于扩展内容 5.代码量html文件24k+css文件19k共43k大小
JavaScript获取标签的几种方式
若有所执，必有所成，心之所向，必显光芒
01-20 7809
JavaScript获取标签：1.通过标签id来获取标签，2.通过标签名获取标签，3.通过class获取标签，4.通过选择器找到所有符合条件，5.几种获取特殊标签的写法
HTML中的JavaScript
行如逆水行舟，不进则退
08-16 2426
HTML中的JavaScript
【JS】关于script标签
m0_62638072的博客
06-27 3299
script标签是在web中有一种非常重要的标签，它的存在才使得脚本可以引入dom文档，并且动态网页的实现也需要使用此标签。
JavaScript基础：在HTML中插入js代码
lishichengyan的博客
08-30 5040
之前在数据库里学过一些简单的html，最近在学js，复习一下。。 如下： This is an Example xixi haha xixihaha xixihiahia 这是一个简单的网页框架，开头的用来定义类型，其后的html表明类型是html。html中使用不同的标签来区分内容，标签总是成对出现，例如：...，中间可以嵌入你需要写的内容。不同的标签作用不同，
JavaScript看这一篇就够了，简单全面一发入魂
热门推荐
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
HTML、CSS、JavaScript网页制作从入门到精通
09-20
课程名称: : : : W eb 开发基础教程 W b eb 开发基础教程 l --Html 样式表 ) (Css) Javas s s s cript 课程目标: : : :了解 W eb基础知识,熟练应用Html常用标签,利用css美化页面,学会使用JavaScript
京东首页web前端课设（HTML+CSS+JS）
04-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
js去掉所有html标记
HELLO WORLD
04-27 1万+
日常做项目多了，收藏了很多小程序，小程序虽然代码量少，但是非常实用，特别是在一些时候可以解你燃眉之急。 要分享给大家的是js去掉所有html标记。 function delHtmlTag(str) { return str.replace(/&lt;[^&gt;]+&gt;/g,""); //正则去掉所有的html标记 } 调用方法： delHtmlTag(str) str为传进去的...
前端“三件套“——HTML,CSS,Javascript（一）
qq_50692350的博客
09-21 4981
HTML
JS实现HTML标签转义及反转义
細水、長流√的专栏
04-12 1万+
JS转换HTML转义符 1 2 3 4 //去掉html标签 function removeHtmlTab(tab) {  return tab.replace(/]+?>/g,'');//删除所有HTML标签 } 　　 1
HTML5 之 Script 标签
无
07-02 4446
概述   script 用于嵌入或者引用可执行脚本。   其中可选属性如下。 type：用于定义脚本语言的 MIME 类型，包括text/javascript、text/ecmascript、application/javascript、application/ecmascript，注意HTML5中可以省略掉type，其默认值为text/javascript src：指定引用的外部脚本的URL defer：仅适用于外链，规定脚本延迟执行 async：仅适用于外链，规定脚本异步执行 integrity：用.
JS标准标签
weixin_65423584的博客
04-13 824
【注意】 在页面上面最好不要出现<%%>，而是用jsp标签代替 常用jsp标签(自带): 1.<jsp:include page="页面"> 包含 2.<jsp:param name="name" value="va"> 传参 3.<jsp:foward page="页面"> 转发 !-- 指令包含(静态包含)： 所有被包含页面只有在单独运行的时候才会被单独编译--> <%@include file="header.jsp"...
JS基本标签及应用
HeDashuaithan的博客
12-23 1072
1.1 介绍 HTML、CSS用于实现静态网页(没有交互(网页对用户操作的反馈)效果的)，网页的存在是为了给用户使用的，那因此就需要有交互的存在，这种交互就是动态HTML(JavaScript+html+css) JavaScript是脚本语言，用的是面向对象的思想 JS的三种引入方式 1.写在标签上，使用javascript; 2.内联样式，使用script标签表示 3.外联样式，使用script标签进行引入(.js文件) JavaScript基本语法(数据类型) 属性 boolean number s
vue实现录音并转文字功能，包括PC端web，手机端web
最新发布
byebukesi的博客
04-26 496
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
html css js
06-07
3. CSS 中常用的选择器有哪些？优先级如何？ 4. CSS 中的伪类和伪元素分别是什么？有哪些常用的伪类和伪元素？ JavaScript 相关： 1. 什么是闭包？有什么作用？ 2. 什么是原型？原型链是什么？有什么作用？ 3. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值