【WEB前端】---HTML---结构---笔记

news2024/12/23 18:42:56

目录

1.标签---单标签和双标签

1.1单标签

1.2双标签

2.基本结构标签

2.1HTML标签

2.2文档头部标签

2.3文档标题标签

2.4文档的主题标签

3.常用的标题标签  (n∈[1,6])

4.段落标签

5.换行标签

6.文本格式化标签

6.1粗体

6.2倾斜

6.3删除线

6.4下划线

7.div和span标签

8.图片标签

9.路径=相对路径和绝对路径

9.1相对路径分类

9.2特点:

10.链接标签

10.1链接标签的属性

10.2链接分类

11.注释

12.特殊字符(常用)

13.表格

13.1表格的基本代码书写格式

13.2表格的属性

14.列表

 14.1无序列表

 14.2有序列表

  •  14.3自定义列表

    15.表单标签

    15.1表单基本书写格式

    15.2表单属性

    15.3表单元素(表单控件)

    15.3.1input表单控件的type属性的属性值如下所示

    15.3.2input控件的其他属性

    15.4标签

    15.5下拉标签---节约页面空间15.5.1基本书写格式15.6文本域标签

1.标签---单标签和双标签

1.1单标签

                ---<hr/>水平分割线、<input/>表单元素、<br/>换行标签等

1.2双标签

                ---<h1></h1>标题标签、<html></html>HTML标签等

2.基本结构标签

2.1HTML标签

                        ---<html></html>

2.2文档头部标签

                        ---<head></head>

2.3文档标题标签

                        ---<title></title>

2.4文档的主题标签

                        ---<body></body>

3.常用的标题标签<hn></hn>  (n∈[1,6])

<h1>标题一共六级可以选择</h1>

<h2>文字加粗并且一行显示</h2>

<h3>从h1到h6文字大小递减</h3>

<h4>随着文字大小粗细变化</h4>

<h5>语法书写要规范</h5>

<h6>具体效果刷新就可以看见了</h6>

4.段落标签<p></p>

<p>用于定义段落,可以将网页划分位若干个段落,文本在一个段落中会根据浏览器的窗口大小自动换行,段落与段落之间有空隙</p>

5.换行标签<br/>

换行标签是单标签,是用于强制换行的,只是简单的开启新的一行,没有行间距,段落之间会插入一些垂直的间距

6.文本格式化标签

6.1粗体

                ---<strong></strong>---更加推荐使用<strong>标签

                ---<b></b>

6.2倾斜

                ---<em></em>---推荐使用

                ---<i></i>

6.3删除线

                ---<del></del>---推荐使用

                ---<s></s>

6.4下划线

                ---<ins></ins>---推荐使用

                ---<u></u>

7.div和span标签

<div>标签用来布局,一行只能放一个<div>---大盒子

<span>标签用来布局,一行可以放多个<span>---小盒子

8.图片标签<img />

属性属性值说明
src图片路径

必须属性

alt文本替换文本,图像不能显示的时候显示的文字
title文本提示文本,鼠标悬停在图片上方的时候出现的文字
width像素图片的宽度
height像素图片的高度
border边框图片的边框样式

采用键值对的方式进行书写,可以写多个属性,属性与属性之间用空格分开

9.路径=相对路径和绝对路径

以引用文件的绝对位置为参考基础,而建立的目录路径就是相对路径

9.1相对路径分类

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级
下一级路径/图像文件位于HTML文件下一级
上一级路径./图像文件位于HTML文件上一级

9.2特点:

相对路径分类是图像相对于HTML文件的位置;

绝对路径是指目录下的绝对位置,通常是从盘符开始的;

相对路径是从这个项目所在的这个文件夹出发,去寻找目标文件

10.链接标签<a>

10.1链接标签的属性

<a href="跳转目标(也可以是#号(代表是空链接,会自动跳转到页面最顶端),也可以使用JavaScript:;(代表什么也不执行,点击的时候不会产生任何反应),还可以使用' '(空字符串代表什么都不执行但是会刷新页面))" target="目标窗口的打开方式(_self默认当前窗口或者_blank新窗口)"></a>

10.2链接分类

  • 外部链接:利用href="跳转的路径"直接跳转到外部链接页面
  • 内部链接:利用href="跳转的路径"直接跳转到当前项目文件夹内中的目标链接页面
  • 空链接:href="#"表示没有确定的跳转目标
  • 下载链接:href="文件/压缩包",会自动下载此链接指向的内容
  • 网页元素链接:可以直接给当前网页中的元素(图像/表格/音频等)添加超链接
  • 锚点链接:通过href="#名字"的方式跳转到相关id名字所在的地方(起到一个快速定位的作用)

11.注释

<!-- 注释内容-->

12.特殊字符(常用)

符号说明
>

&gt;

<&lt;
&nbsp;

13.表格

13.1表格的基本代码书写格式

<table>
    <thead>
    <!--这里是表头部分-->
        <tr>
            <td>表头单元格,可以按需添加多个</td>
            ...
        </tr>
    </thead>
    <tbody>
    <!--这里是表格主题部分-->
        <tr>
            <td>表格主体的单元格,可以按需添加多个</td>
            ...
        </tr>
        <tr>
            <td>表格主体的单元格,可以按需添加多个</td>

            ...
        </tr>
        ...
    </tbody>
</table>

13.2表格的属性

属性名属性值说明
alignleft  center  right规定表格相对周围元素的对齐方式
border如1(输入必须为整数)或者' '无边框规定表格的边框样式
cellpadding像素值规定单元格边沿与内容之间的边距
cellspacing像素值规定单元格与单元格之间的边距
width像素值规定表格的宽度

colspan

列数值跨列合并(最左侧为目标单元格)
rowspan行数值跨行合并(最上侧为目标单元格)

14.列表

 14.1无序列表<ul>

<ul>
    <li>无序列表的列表项,无序列表中只能存放li标签,可以有若干个li标签</li>
    ...
</ul>

 14.2有序列表<ol>

<ol>
    <li>有序列表的列表项,无序列表中只能存放li标签,可以有若干个li标签</li>
    ...
</ol>

 14.3自定义列表<dl>

<dl>
    <dt>名词1</dt>
    <dd>名词解释</dd>
    ...
</\dl>

15.表单标签

15.1表单基本书写格式

<form>
    <label>xxx</label>
    <input />
    ...
</form>

15.2表单属性

属性属性值作用
actionurl地址用于指定接收并且处理表单数据的服务器程序的url地址
methodget/post

用于设置表单的提交方式,其取值是get/post

name名称用于指定表单的名称,以区分同一个页面中的多个表单

15.3表单元素(表单控件)

15.3.1input表单控件的type属性的属性值如下所示

type的属性值描述
button可点击按钮
checkbox复选框
file上传文件
hidden隐藏
image

图像(可以直接用img标签)

password密码框
text文本框
radio单选按钮
reset重置按钮
submit提交按钮

15.3.2input控件的其他属性

属性属性值描述
maxlength正整数最大长度
name用户自定义名称定义input的名称
value用户自定义value值规定input的值
checkedchecked选项框处于选中状态

注意:name和value值主要是针对后台人员使用的;

多选框实现多选一则需要name值与单选框相同时;

checked主要针对的是单选框radio和复选框checkbox

15.4<label>标签

定义:为input元素添加标签(可以4扩大input元素的交互范围,同相关元素的id值相同时)

<form>
    <label for="同id名字一样扩大交互范围">xxx</label>
    <input type="" name=""  id="" />
    ...
</form>

15.5下拉标签<select>---节约页面空间

15.5.1基本书写格式

<select>
    <option>选项1</option>
    ...
</select>

<select>标签中至少包含一对<option>标签,在<option>中定义selected="selected"时,则当前项即为默认选中项

15.6文本域标签<textarea>

<textarea rows="行数" cols="显示的字符数">
  xxxx文本书写区域
</textarea>

16.HTML5语义标签

<header>页眉
<nav>导航
<main>主体
<section>
<aside>侧栏
<footer>页脚

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

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

相关文章

9.x86游戏实战-汇编指令mov

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

Linux上快速定位Java代码问题行

生产环境中&#xff0c;经常会遇到CPU持续飙高或内存、IO飙高&#xff0c;如何快速定位问题点是很多新手头疼的问题&#xff0c;只能通过经验和代码推理&#xff0c;其实这里针对Java程序可以通过top和jstack命令&#xff0c;快速定位到问题代码。 Top命令的输出 具体定位之前…

ubuntu20.04配置调试工具

1.准备工作&#xff1a;安装g或者gdb sudo apt updatesudo apt install gg --versionsudo apt install gdbgdb --version 2.配置环境 2.1在本地新建一个main.cpp #include <iostream> #include <vector> #include <string>using namespace std;int main(…

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(二十一)

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 31 节&#xff09; P31《30.数据持久化-关系型数据库》 上一节中学习了使用用户首选项的方式实现数据持久化&#xff0c;但用户首…

DC/AC电源模块:效率与可靠性兼备的能源转换解决方案

BOSHIDA DC/AC电源模块&#xff1a;效率与可靠性兼备的能源转换解决方案 随着科技的迅速发展和人工智能技术的逐渐成熟&#xff0c;各种电子设备的需求也日益增加。然而&#xff0c;这些设备往往需要不同的电压和电流来正常工作&#xff0c;而供电方式却可能不尽相同。这时&am…

miniprogram-to-uniapp-微信小程序转换成uniapp项目

文章目录 参考:miniprogram-to-uniapp使用指南第一步第二步第三步第四步【miniprogram-to-uniapp】转换微信小程序”项目为uni-app项目(新版本工具已经支持各种小程序转换) 参考: 小程序技能树 uni-app基础知识总结 miniprogram-to-uniapp使用指南 第一步 win + R 输入…

【计算机网络仿真】b站湖科大教书匠思科Packet Tracer——实验15 网络故障导致的路由环路问题

一、实验目的 1.验证因网络故障而导致的静态路由的路由环路问题&#xff1b; 二、实验要求 1.使用Cisco Packet Tracer仿真平台&#xff1b; 2.观看B站湖科大教书匠仿真实验视频&#xff0c;完成对应实验。 三、实验内容 1.构建网络拓扑&#xff1b; 2.验证网络故障导致的…

Stable Diffusion图像的脸部细节控制——采样器全解析

文章目录 艺术地掌控人物形象好易智算原因分析为什么在使用Stable Diffusion生成全身图像时&#xff0c;脸部细节往往不够精细&#xff1f; 解决策略 局部重绘采样器总结 艺术地掌控人物形象 在运用Stable Diffusion这一功能强大的AI绘图工具时&#xff0c;我们往往会发现自己…

web学习笔记(七十五)

目录 1.小程序修改响应式数据 1.1修改基本数据类型的值 1.2修改复合数据类型的值 2. 发送请求 3.小程序解决跨域问题 1.小程序修改响应式数据 1.1修改基本数据类型的值 在小程序中需要先将data中的数据拿过来并结构&#xff0c;才可以在this.setdata中修改数据&#xf…

充分利用智慧校园人事系统,提升党政职务管理

智慧校园人事系统中的党政职务管理功能&#xff0c;是专为高校及教育机构设计的&#xff0c;旨在高效、精确地处理与党政职务相关的各类事务&#xff0c;包括职务任命、任期管理、职责分配、考核评估等&#xff0c;以信息化手段促进党务及行政工作的透明化、规范化。 该模块首先…

14-5 小语言模型SLM 百科全书

想象一下这样一个世界&#xff1a;智能助手不再驻留在云端&#xff0c;而是驻留在你的手机上&#xff0c;无缝理解你的需求并以闪电般的速度做出响应。这不是科幻小说&#xff1b;这是小型语言模型 (SLM) 的前景&#xff0c;这是一个快速发展的领域&#xff0c;有可能改变我们与…

转让北京文化传媒公司带营业性演出经纪许可证

影视文化传播倡导将健康的影视文化有效传播给观众&#xff0c;从而构建观众与电影制作者的良 性沟通与互动&#xff0c;是沟通电影制作者与电影受众的重要桥梁。影视文化泛指以电影&#xff0c;电视方式所进行的全部文化创造&#xff0c;即体现为电影&#xff0c;电视全部的存在…

探索企业知识边界,鸿翼ECM AI助手开启智慧问答新时代

在信息化迅速发展的当下&#xff0c;企业积累的数字文档数量巨大&#xff0c;这些文档中蕴含的深层信息对业务发展至关重要。然而&#xff0c;传统的搜索技术常常因只能进行关键字查询而无法满足对文档深层次理解的需求。 据Gartner调查&#xff0c;高达47%的员工在寻找有效工…

制造企业真的需要数字化转型吗?一文讲透:为何做,如何做?

此前拜访了不少制造企业&#xff0c;其以中小型企业居多&#xff0c;在与企业负责人交流数字化转型话题时&#xff0c;感触最多的还是管理者对“数字化转型”的认知。 在数字化转型方面从国家层面到地方政府进行大量的宣传与政策支持&#xff0c;部分行业头部企业也从数字化转…

AI免费英语学习在线工具:Pi;gpt;其他大模型AI 英语学习智能体工具

1、pi(强烈推荐&#xff1a;可以安卓下载使用) https://pi.ai/talk &#xff08;网络国内使用方便&#xff09; 支持实时聊天与语音对话 2、chatgpt&#xff08;强烈推荐&#xff1a;可以安卓下载使用) https://chat.openai.com/ &#xff08;网络国内使用不方便&#xf…

贪心 | Java | LeetCode 455, 376, 53 做题总结

贪心算法介绍 贪心算法&#xff1a;贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 说实话贪心算法并没有固定的套路。 一般解题步骤 贪心算法一般分为如下四步&#xff1a; ① 将问题分解为若干个子问题 ② 找出适合的贪心策略 ③ 求解每一个子问题的…

vue2+element-ui新增编辑表格+删除行

实现效果&#xff1a; 代码实现 &#xff1a; <el-table :data"dataForm.updateData"border:header-cell-style"{text-align:center}":cell-style"{text-align:center}"><el-table-column label"选项字段"align"center&…

【全网最全流程+所有代码】企业微信回调联调,开通企微回调和收到企微回调

流程图: 只是这里的消息回调,仅作为提示,群内有消息了。不是具体的消息,而是类似这样的结构,: 如果需要获取消息,还需要拉取企微群内消息方法,这个后续再更新。 好了,我们开始吧。 开启消息回调和接收消息回调,地址是一样的,只是 开启消息回调,get请求, 接受消…

【图像分割】mask2former:通用的图像分割模型详解

最近看到几个项目都用mask2former做图像分割&#xff0c;虽然是1年前的论文&#xff0c;但是其attention的设计还是很有借鉴意义&#xff0c;同时&#xff0c;mask2former参考了detr的query设计&#xff0c;实现了语义和实例分割任务的统一。 1.背景 1.1 detr简介 detr算是第…

Build a Large Language Model (From Scratch)附录A(gpt-4o翻译版)

来源&#xff1a;https://github.com/rasbt/LLMs-from-scratch?tabreadme-ov-file https://www.manning.com/books/build-a-large-language-model-from-scratch