HTML入门学习笔记

2023-11-05

1、标题、段落标签

    <h1>标题标签</h1>
    
    <p>段落标签</p>
    
    <br/>换行标签

2、文本格式化标签

    我是<strong>加粗</strong>的文字
    
    我是<em>倾斜</em>的文字
    
    我是<del>删除线</del>
    
    我是<ins>下划线</ins>

3、布局标签(div、span)

    div、span就是一个盒子 用来布局的
    
    div表示分割、分区   独占一行    大盒子
    <div>我是一个div标签</div>
    <div>我是一个div标签</div>
    
    span表示跨度、跨距   全部占一行  小盒子
    <span>百度</span>
    <span>搜狐</span>
    <span>网易</span>

4、图像标签

    <h4>图像标签的使用</h4>
    <img src="dog.jpg"/>
    
    <h4>alt 替换文本 图像显示不出来的时候用文字替换</h4>
    <img src="dog1.jpg" alt="我是修狗"/>
    
    <h4>title 提示文本 鼠标放在图像上,提示的文字</h4>
    <img src="dog.jpg" alt="我是修狗" title="我是一条小狗"/>
    
    <h4>width 给图像设定宽度:</h4>
    <img src="dog.jpg" alt="我是修狗" title="我是一条小狗" width="200"/>
    
    <h4>height 给图像设定高度:</h4>
    <img src="dog.jpg" alt="我是修狗" title="我是一条小狗" height="400"/>
    
    <h4>border 给图像设定边框:</h4>
    <img src="dog.jpg" alt="我是修狗" title="我是一条小狗" width="200" border="15"/>

图像标签属性注意点:

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

5、相对路径、绝对路径

相对路径:以 引用文件所在位置 为参考基础(图片相对于HTML页面的位置)
在这里插入图片描述
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
在这里插入图片描述

6、链接标签、锚点标签

    <a href="跳转目标 url" target="目标窗口的弹出方式 _self为默认值 _blank为新窗口打开">文本或图像</a>
    
    <h4>1、外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    
    <h4>2、内部链接:网站内部页面之间的相互链接</h4>
    <a href="公司简介.html">公司简介</a>
    
    <h4>3、空链接:#</h4>
    <a href="#">公司地址</a>
    
    <h4>4、下载链接:地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.zip">公司地址</a>
    
    <h4>5、网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg"></a>
    
    <h4>6、锚点链接:点我们点击的链接,可以快速定位到页面中的某个位置</h4>
    在链接文本的 href 属性中,设置属性值为 #名字 的形式,如:<a href="#two">个人简介</a>
    找到目标位置的标签,里面添加一个id属性 = 刚才的名字,如:<h3 id="two">介绍</h3>

7、表格标签:显示数据

(1)表格的基本语法:
在这里插入图片描述

    <table>
        <tr> <td>姓名</td> <td>性别</td>  <td>年龄</td></tr>
        <tr> <td>刘德华</td> <td></td>  <td>56</td></tr>
        <tr> <td>张学友</td> <td></td>  <td>52</td></tr>
        <tr> <td>郭富城</td> <td></td>  <td>56</td></tr>
        <tr> <td>黎明</td> <td></td>  <td>51</td></tr>
    </table>

(2)表头单元格标签:
在这里插入图片描述
(3)表格属性:
在这里插入图片描述

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="250">
        <tr> <th>姓名</th> <th>性别</th>  <th>年龄</th></tr>
        <tr> <td>刘德华</td> <td></td>  <td>56</td></tr>
        <tr> <td>张学友</td> <td></td>  <td>52</td></tr>
        <tr> <td>郭富城</td> <td></td>  <td>56</td></tr>
        <tr> <td>黎明</td> <td></td>  <td>51</td></tr>
    </table>

(4)表格结构标签:
在这里插入图片描述
(5)合并单元格:

合并单元格方式:

  • 跨行合并: rowspan=“合并单元格的个数”
  • 跨列合并: colspan=“合并单元格的个数”

在这里插入图片描述
目标单元格:(写合并代码)

  • 跨行:最上侧 单元格为目标单元格
  • 跨列:最左侧 单元格为目标单元格
    在这里插入图片描述
    在这里插入图片描述

8、列表标签:布局页面

根据使用场景不同,列表分为三大类:
在这里插入图片描述
(1)无序列表:(重点)
在这里插入图片描述
在这里插入图片描述
(2)有序列表(理解)
在这里插入图片描述
在这里插入图片描述
(3)自定义列表(重点)一个大哥带着下面一群小弟
在这里插入图片描述

9、表单标签:为了收集用户信息

在这里插入图片描述
(1)表单域:
在这里插入图片描述
(2)表单控件(表单元素)

① < input > 输入表单元素
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <form>
        <!-- text文本框用户可以输入任何文字 -->
        用户名:<input type="text" name="username" value="请输入用户名"> <br>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码:<input type="password" name="password"> <br>
        <!-- radio 单选按钮 可以实现多选一 -->
        <!-- name 是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        性别:男<input type="radio" name="sex" value=""><input type="radio" name="sex" value=""> <br>
        <!-- checkbox 复选框 可以实现多选-->
        爱好:吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"><br>
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="登录"><br>
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button 后期结合js 搭配使用 -->
        <input type="button" value="注册">
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:<input type="file">
    </form>

< label > 标签:
在这里插入图片描述
② < select > 下拉表单元素
在这里插入图片描述
③ < textarea > 文本域元素
在这里插入图片描述
在这里插入图片描述

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

HTML入门学习笔记 的相关文章

  • HTML标签阻止HTML标签被执行?

    我想问超级用户的基本问题 但我认为这是一个编程问题 我刚刚开始学习 HTML 所以请耐心等待 如何防止程序解释 HTML 标签 语法 例如 我想写一个这样的闪存卡 html 代码为 lt is lt 我想要一个适用于任何或大多数语法的解决方
  • 如何将div内容添加到jspdf中的新页面?

    如何将div内容添加到jspdf中的新页面 我尝试使用 br 它创建了一个新页面 但我看不到内容 div div style margin 3px 430px First Page div div Place content to Seco
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • 如何在表格的 tbody/thead 部分周围创建边框?

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • 为什么字体扩展仅适用于 PDF,而不适用于其他格式(HTML、XLS、DOC)?

    通过 Jaspersoft Studio 我们使用以下设置将用于 Web 应用程序的内置 Windows Calibri 字体变体导出到字体扩展 JAR 中 导出的jrfontextensions jar内的目录结构如下 jrfontext
  • 为什么我不能在 TCPDF 表中使用 č,ć,đ 图表?

    我正在为我的网站构建一个 tcpdf 文件 该 tcpdf 文件中有一个包含一些数据的表格 但我无法使该章程正常工作 对于编码 我使用 windows 1250 宪章女巫不起作用 我已经尝试过 utf 8 但仍然没有得到这个章程 tcpdf
  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has
  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 禁用允许文本选择的

    残疾人可以吗

随机推荐

  • 【Tableau案例】神奇宝贝属性及实力强弱|数据可视化

    提前声明 神奇宝贝的数据分析仅供参考 不涉及对于神奇宝贝的各种评价 另外我是初学tableau 涉及到使用的tableau操作可能很简单 复杂的还掌握不熟练 之后会拿时间系统学习tabelau 数据预处理 该数据集有721个口袋妖怪 分别包
  • 挂载VMware esxi服务器文件夹到本地ubuntu

    概述 开发安卓项目 需要在公司服务器搭建的环境 VMware esxi 上编译代码 可以将服务器上的文件挂载到本地 在本地编辑好代码后再去服务器上编译 登录服务器 使用ssh user host方式登录 例如ssh rk3566 192 1
  • 深入理解Solidity——独立汇编

    独立汇编 Standalone Assembly 上面介绍的在Solidity中嵌入的内联汇编语言也可以单独使用 实际上 它是被计划用来作为编译器的一种中间语言 在这个目的下 它尝试达到下述的目标 使用它编写的代码要可读 即使代码是从Sol
  • 图像处理(1) : 图像增强

    图像增强就是指通过某种图像处理方法对退化的某些图像特征 如边缘 轮廓 对比度等进行处理 以改善图像的视觉效果 提高图像的清晰度 或是突出图像中的某些 有用 压缩其他 无用 信息 将图像转换为更适合人或计算机分析处理的形式 图像增强可以分为两
  • Apache Beam适时有状态计算

    在先前的Apache Beam中的有状态计算中 介绍了Apache Beam中有状态计算的基础知识 重点介绍了对每个元素的处理中添加的状态特性 所谓的适时处理 是有状态计算的补充 是通过设置定时器来 在将来某个时间点上的 有状态的 进行回调
  • 编写一个Vue插件,上传NPM官网开源使用

    插件开发及上传NPM流程 完成组件封装 组件完成统一封装成插件 插件入口文件配置 src main js 中引入口文件 安装插件 配置 package json 文件 npm run lib 打包 umd min js 配置到 packag
  • JavaFX与后台交互

    目前JavaFX相关的资料都是基本语法 以及界面相关 而JavaFX面向的是RIA RIA就肯定需要和后台交互 个人研究了一下 遇到了不少问题 共享给大家 D 首先先看看JavaFX的api 一眼就能看到javafx io http包 包里
  • unity踩坑日记

    花费了一天时间一直在找bug unity打包出来的程序 我勾选了调试模式 因为的确在调试 关闭时就会停止工作 因为涉及到线程一直怀疑自己写退出时候关闭线程的有问题 但是看来看去没找到问题 就去看错误日志 Mono path 0 E Proj
  • 服务器双机热备系统,双机热备

    1 集群技术 在了解双机热备之前 我们先了解什么是集群技术 集群 Cluster 技术是指一组相互独立的计算机 利用高速通信网络组成一个计算机系统 每个群集节点 即集群中的每台计算机 都是运行其自己进程的一个独立服务器 这些进程可以彼此通信
  • Keil 5使用ST-LINK调试STM32程序

    1 下载并安装STM32 ST LINK Utility 含有驱动 2 启动STM32 ST LINK Utility 点击菜单 ST LINK Firmware 更新固件 3 打开Keil工程 设置Debug 4 开始调试
  • C语言的可变参数

    C语言可变参数原理与使用 1 原理与实现 我们定义C语言的几个宏定义来表达这个想法 使用这几个宏定义来实现可变参数函数 2 调用库函数实现 3 可变参函数的封装 1 原理与实现 C语言可变参数 void func char fmt C语言的
  • 《C#入门到精通》学习笔记 -- Console类

    第1章 知识点扩展 1 Main必须是静态 static 方法 指定了程序的唯一入口 2 Console类是内建类 通过其方法 可以在屏幕上显示消息或者从键盘获取输入 表示控制台应用程序的标准输入流 输出流和错误流 Console类继承于S
  • 网络安全毕业设计选题推荐

    0 简介 毕业季马上就要开始了 不少同学询问学长网安专业选题以及开题相关的问题 今天跟大家分享信息安全毕设选题 最新的信息安全 网络安全 专业毕设选题 难度适中 适合作为毕业设计 大家参考 学长整理的题目标准 相对容易 工作量达标 题目新颖
  • ue4 unreal NDisplay插件 简易使用 三折幕 详细...

    仅支持4 27版本 NDisplay文档 https docs unrealengine com 4 27 en US WorkingWithMedia IntegratingMedia nDisplay Overview Switchbo
  • 2020-04-09

    每日书单 每日书单 1 There is only one time in a person s life when he can make a difference That is the moment 2 Can coral be ke
  • Tracy vue3 小笔记 2 - 和 Vue 2 的区别汇总

    1 可以有多个根元素 2 子传父的 emit 多了一步在default 里预定义
  • 什么是java句柄_JAVA中的术语:句柄是啥意思

    句柄的本质 一个唯一的整数 作为对象的身份id 区分不同的对象 和同类中的不同实例 程序可以通过句柄访问对象的部分信息 句柄不代表对象的内存地址 句柄和指针的区别 程序不能通过句柄直接阅读文件中的信息 指针是可以的 从所起的作用这点来说 句
  • IDEA整合Tomcat服务器(IDEA没有Application Server选项)

    IDEA整合Tomcat服务器 IDEA没有Application Server选项 我使用的IDEA创建Java Enterprise的界面如下 没有Application Server选项 不要慌 在Settings中设置Applica
  • LOAM误差函数、代价函数的雅克比矩阵详细推导,点到线和点到面误差函数求导

    LOAM误差函数的导数详细推导 前言 LOAM对于激光SLAM的发展起到了举足轻重的作用 他提出了点到线和点到面的误差函数 通过优化的方法 得到了非常不错的激光里程计效果 我猜测作者Zhang Ji很可能是从点到线和点到面的ICP算法中找到
  • HTML入门学习笔记

    我是目录 1 标题 段落标签 2 文本格式化标签 3 布局标签 div span 4 图像标签 5 相对路径 绝对路径 6 链接标签 锚点标签 7 表格标签 显示数据 8 列表标签 布局页面 9 表单标签 为了收集用户信息 1 标题 段落标