程序员经验分享-hwhale

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

2023-11-08

目录

简单介绍

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>
表格标签的属性
属性 属性值 说明
align left，center，right 规定表格对其方式
border 1或“” 规定表格是否有边框，默认值为“”，无边框
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>定义表单域

表单标签的属性
属性 属性值 说明
action url地址 用于指定接受并处理表单数据的服务器程序的url地址
method get/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元素的值，如“请输入”
checked checked 打开后默认选中有该属性的值
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/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

html，css，js简单介绍，html常用标签 的相关文章

  • 【VMware/Linux】虚拟机根目录扩容

    大家好 我是好学的小师弟 最近IT给配的虚拟机 目录容量太小了 不符合环境部署条件 所以想让IT扩下容 IT给我加了一块磁盘 然后让我自己lvm扩容去 这里记录下扩容方法 1 先添加一块磁盘 这里添加了一块磁盘sdr fdisk l 查看新

  • 数据结构与算法分析--Java语言描述（第二章（2））

    习题2 23 不用递归 写出快速求幂的程序 递归方法 param x param n return public long pow long x int n if n 0 return 1 if isEven n return pow x

随机推荐

  • VSCODE-版本控制工具SVN

    1 在SVN中安装插件 SVN svn简介 安装完成后 重新启动SVN或者点击SVN 重新加载 本人SVN不是默认安装位置 但是无需修改vscode 用户设置 中的任何选项 2 引入项目 直接打开通过SVN下载的项目的文件夹 3 查看SVN

  • eclipse指定jdk版本启动，解决Version XXXX of the JVM is not suitable

    可以解决Version XXXX of the JVM is not suitable for this product Version XXXXXX or greater is required 例如 Verson1 7 0 79 of

  • 【Vue】同一模板 多个样式 统一实现

    文章目录 一 背景 二 具体代码 一 背景 项目中多个页面的页脚都包含版权信息 并且各自有一个 Copyright vue 的组件 经过对比 template 的内容一模一样 只是样式有些不同 这里准备抽取出来 用一个公共组件 CopyRi

  • 你的电脑上的应用需要使用以下window功能.NET Framework3.5(包括.NET2.0和3.0)

    我自己下载了 net 3 5来安装他也提示这玩意 然后点自动安装后又错误码0x800f081f 奶奶滴 于是去百度 解决流程 1 首先 按Windows R调出 运行 对话框 2 接下来 键入gpedit msc并按Enter 3 该命令将

  • pytorch将Tensor转为list

    import torch value torch Tensor 1 2 3 print list value tolist 得到 list 1 0 2 0 3 0

  • promise与async和await的使用

    基础回顾 阻塞代码实例 首先 我们新建一个 test txt 文件 内容如下 111 然后 我们来编写一个 main js 文件 代码如下 var fs require fs var str fs readFileSync test txt

  • css button自动调整位置_（Vue动效）1.Vue的CSS过渡动效

    关键词

  • JAVA个推----将信息推送至手机端

    个推功能简介 将信息推送至手机端 手机端人员可以看到收到的信息 个推功能需要借助第三方平台的接口 需要申请账号 单独开发很难完成 这里就是用到了第三方接口 完成个推需要完成三步 获取token 调用个推接口需要获取用于验证的token 获取

  • 前端歌谣的刷题之路-第二十二题-基本数据类型检测

    前言 我是歌谣 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣 题目 请补全JavaScript函数 要求以字符串的形式返回参数的类型 注意 只需检测基本数据类型 编辑 核心代码

  • 自动驾驶制图中的深度学习

    点击上方 小白学视觉 选择加 星标 或 置顶 重磅干货 第一时间送达 深度学习在整个自动驾驶技术的各个部分中进行了应用 例如在感知 预测和计划中都有应用 同时 深度学习也可以用于制图 这是高级自动驾驶的关键组成部分 拥有准确的地图对于自动驾

  • Siebel学习笔记

    Siebel escript 的学习 1 Siebel的数据类型 Primitive 原始的 Number Integer Hexadecimal 十六进制 Octal 八进制 Floating Point 浮点 Decimal 十进制 S

  • 面试总结（1）---7.28

    Ajax关于readyState 状态值 和status 状态码 的研究 var getXmlHttpRequest function try 主流浏览器提供了XMLHttpRequest对象 return new XMLHttpReque

  • 解决wiringPi库与64位树莓派之间不兼容的问题

    目录 一 问题现象 二 解决方案 网站 可以直接点这下载 一 问题现象 今天在练习wiringPi库的使用时候 在最后编译的时候出现了这个问题 主要问题是这个skipping incompatible skipping incompatib

  • Android上OpenCV物体检测,Opencv图像识别Android实战（识别纸牌4.图像识别素养）

    我认为大多数阅读本文的人都对机器学习有所了解 我认为没有必要在学术上解释这种含义 人类学习的目的不是识别更多的东西 机器学习也是如此 也就是说 让计算机通过学习类比来学习更多的东西 在这里 我们让计算机知道图像 要让计算机知道事情 我们必须

  • 集成学习笔记

    集成学习通过结合规则 使用一系列弱学习器来组成一个强学习器 集成学习通常有两个步骤 ensemble generation 和 ensemble integration 通常在两个步骤之间会有一个 pruning process 剪枝过程

  • LeetCode--初级算法--环形链表

    题目 给定一个链表 判断链表中是否有环 为了表示给定链表中的环 我们使用整数 pos 来表示链表尾连接到链表中的位置 索引从 0 开始 如果 pos 是 1 则在该链表中没有环 示例 1 输入 head 3 2 0 4 pos 1 输出 t

  • Excel条件格式化（conditional formatting）应用

    简介 条件格式化顾名思义就是根据条件对单元格进行格式化 填充 字体等 比如我们有一个学生成绩表 根据需要我们要把成绩按 不及格 lt 60 良好 gt 60且 lt 90 优秀 gt 90 进行颜色标注 第一步 如图 第二步 如图 点击 确

  • OpenMP task 原理与实例

    个人理解 Openmp自从3 0以后全面走向任务驱动 task机制非常重要 可以显式定义任务 而其余parallel代码块中不用task定义的实际上是隐式任务 抽象来说就是有两个池子 线程池与任务池 闲置的线程会在线程池等待任务 显式任务与

  • Servlet登录注册（IDEA）

    user类 提供get set 有参 无参 toString方法 UserDao层 UserDaoImpl层 登录 注册是否重复 真正的注册 UserService层 登录LoginServlet层 注册和注册用户唯一的ZcServlet层

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

    目录 简单介绍 HTML常用标签 1 html骨架标签 2 标题标签 3 段落标签 4 换行标签 5 文本格式化标签 6 div标签 span标签和pre标签 7 图像标签 8 超链接标签 9 注释标签 10 表格标签 11 列表标签 12

热门标签