图像与超链接标签

  • URL

    • 统一资源定位符 :用来标识网络中资源的位置,俗称路径URL 组成 :协议 域名 文件目录及文件名。
    • URL分类:
      • 绝对路经:

        • 从根目录开始查找,常用于网络文件路经。
      • 相对路经:
        • 从当前文件所在的文件夹开始查找
      • 根相对路径 (了解):
        • 从Web程序所在的根目录开始查找资源文件
        • 注意:网络URL中不能出现中文,URL是严格区分大小写的。
  • 图像标签
    • 在网页中插入一张图片

    • 语法 :[图片上传失败…(image-b32810-1560344691312)]

    • 属性 :

      • src :指定要显示的图片路径
      • width :设置图片的宽度,以像素px为单位,也可以省略单位
      • height :设置图片的高度
        注意 : src 为必填属性,宽高可以省略,省略宽高的话,图片将以原始尺寸显示在网页中
      • title :用来设置图片的标题,当鼠标悬停在图片上方时出现
      • alt : 用来设置图片加载失败之后的提示文本

超链接标签

  • 什么是超链接标签

    • 能够实现从当前文件跳转到其他文件的标签
  • 语法:

    • <a></a>

    • 标签属性:

      • href :必填属性,指定链接地址,以路径形式给出,#表示当前页,不会发生页面刷新操作,如果属性为"",也表示当前页,但是包含了网络请求,相当于刷新页面。
      • target :可选属性,设置目标文件的打开方式。
        • _self :默认值,表示在当前窗口打开
        • _blank:表示新建窗口打开
      <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><title>Title</title>
      </head>
      <body><a href="https://www.baidu.com/">百度一下</a><a href="">回到顶部</a>
      </body>
      </html>
      
  • 锚点链接

    • 链接到当前文件的指定位置

      1\. 设置锚点<a name="anchor1"></a>
      2\. 设置跳转<a href="#anchor1">早年经历</a><body><a href="https://www.baidu.com/" name="ac1">百度一下</a><a href="#ac1">回到顶部</a>
      </body>
      

表格

标签介绍:
  • 表格标签:<table></table>

  • 行标签:<tr></tr>

  • 单元格标签:<td></td>

  • 创建顺序:

    • 在表格标签中嵌套行标签,每一个 tr 就代表一行
    • 在行标签中创建单元格标签,用来存放数据
        <table><tr><!--代表一行--><td>id</td><!--代表单元格--><td>name</td><td>age</td></tr><tr><td>1</td><td>xjk</td><td>18</td></tr><tr><td>2</td><td>half</td><td>15</td></tr></table>
    
标签属性
  • table 属性

    • border :设置边框,取值以px为单位的数值(px可以省略)
    • width :设置宽度
    • height :设置高度
    • align :设置表格在其父元素中的水平对齐方式
    • cellpadding : 设置单元格的内边距(内容与边框之间的距离),取值为px单位的数值
    • cellspacing : 设置单元格的外边距(单元格与单元格之间的距离,或者单元格与表格边框之间的距离),取值像素为单位的数值
    • bgcolor : 设置表格的背景颜色,取值可以是英文的颜色名称
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="https://www.baidu.com/" name="ac1">百度一下</a><a href="#ac1">回到顶部</a><table border="1"  align="center" cellpadding="10" cellspacing="1" bgcolor="red"><tr><td>hello</td><td>html</td></tr></table>
</body>
</html>
  • tr 属性

    • bgcolor : 设置当前行的背景颜色
    • align :设置当前行中内容的水平对齐方式
      取值 : left / center / right
    • valign :设置当前行内容的垂直对齐方式
      取值 :top / middle / bottom,默认垂直居中。
  • td属性
    • width 设置单元格的宽度
    • height 设置单元格的高度
    • align 单元格内容的水平对齐方式
    • valign 单元格内容的垂直对齐方式
    • bgcolor 单元格的背景颜色
  • 单元格的合并
    • 单元格独有的属性 colspan rowspan
    • 单元格的跨列合并
      • 从当前单元格的位置开始,横向向右合并几个单元格colspan = “3” ->跨3列进行合并(包含自身)
    • 单元格的跨行合并
      • 从当前的单元格开始,纵向向下合并单元格rowspan = “3” ->向下跨3行合并单元格
    • 注意:一旦发生单元格合并,跨列合并,要删除当前行中多余的单元格跨行合并,要删除其后行中多余的单元格始终保持表格结构完整。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table border="1" cellspacing="0" width="400" height="400"><tr><td colspan="2" bgcolor="red"></td><!--<td>2</td>--><td rowspan="2" bgcolor="#00008b"></td></tr><tr><td rowspan="2" bgcolor="#663399"></td><td bgcolor="#ff1493"></td><!--<td>6</td>--></tr><tr><!--<td>7</td>--><td colspan="2" bgcolor="#adff2f"></td><!--<td>9</td>--></tr></table>
</body>
</html>
  • 行分组

    • 允许将表格中的一行或者是若干行划分为一组,便于管理。

    • 语法

      1\. 表头行分组
      <thead><tr><td></td></tr>
      </thead>
      2\. 表尾行分组
      <tfoot><tr><td></td></tr>
      </tfoot>
      3\. 表主体信息
      <tbody><tr><td></td></tr>
      </tbody
      

表单

用于接收用户的数据并且提交给服务器
  • 表单2个要素

    • form表单元素
    • 表单控件
      • 提供了能够跟用户交互的可视化组件
.form元素
  • 注意:form元素本身是不可见的,却不能省略,因为数据的提交功能要由 form 元素完成

  • 语法:<form></form>

  • form标签属性

    • action

      • 指定数据提交的目的地址
    • method
      • 数据请求方式 get /post (默认get)
      • get
        • 通常用于向服务器端获取数据
        • 特点:
          • 提交的数据会以参数的形式拼接在URL后面
          • 安全性较低
          • 提交数据最大2KB
      • post
        • 将数据提交给服务器处理
        • 特点:
          • 隐式提交,看不到提交数据
          • 安全性较高
          • 没有数据大小限制
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title>
    </head>
    <body><form action=""><input type="text" name="user"><input type="password" name="pwd"><input type="submit" value="提交"></form>
    </body>
    </html>
    ##################################################################################
    file:///D:/code/day43.htmlfile:///D:/code/day43.html?user=alex&pwd=123
    
.表单控件
  • 作用:提供与用户交互可视化组件(这里注意只有放在表单元素中的表单控件才允许被提交)

  • 分类:

    • 文本框与密码框

      • 语法:

        • 文本框:<input type="text">
        • 密码框:<input type="password">
      • 属性:

        • name 属性 定义当前控件的名称,缺少的话无法提交。

          name = “uname”

        • value 属性,要提交给服务器的值,同时也是默认显示在控件上的值。

        • maxlength 用来限制用户输入最大字符串。

        • placeholder 用户输入之前显示在框中的提示文本。

        <!DOCTYPE html>
        <html lang="en">
        <head><meta charset="UTF-8"><title>Title</title>
        </head>
        <body><input type="text" name="user" maxlength="5" placeholder="输入至少5位数字"><input type="password" name="pwd" maxlength="10" placeholder="输入至少10位的密码">
        </body>
        </html>
        
    • 单选框和复选框

      • 单选按钮<input type="radio">

      • 复选框<input type="checkbox">

      • 属性:

        • name 定义控件名称,还起到分组的作用,一组中的按钮名称必须保持一致。
        • value 属性 设置当前控件的值,最终提交给服务器。
        • checked 属性 设置预选中状态 可以省略属性值,也可以使用"checked" 作为值。
        <!--单选框-->
        <!DOCTYPE html>
        <html lang="en">
        <head><meta charset="UTF-8"><title>Title</title>
        </head>
        <body><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
        </body>
        </html>
        <!--多选框-->
        <!DOCTYPE html>
        <html lang="en">
        <head><meta charset="UTF-8"><title>Title</title>
        </head>
        <body><input type="checkbox">抽烟<input type="checkbox">喝酒<input type="checkbox">烫头
        </body>
        </html>
        
    • 隐藏域和文件选择框

      • 隐藏域

        • 作用:需要提交给服务器但是却不需要呈现给用户的数据,都可以放在隐藏域中。
        • 语法:<input type='hidden'>
        • 属性:
          • name 控件名称
          • value 控件的值
      • 文件选择框

        • 作用:选择文件上传,发送给服务器

        • 语法:<input type="file">

        • 属性:name 定义控件名称。

    • 下拉选择框

      • <select name="province">

        • 属性:

          • multiple 可进行多选(ctrl+鼠标左键)
            <select name="pro" id="" multiple><option value="hebei">河北</option><option value="heilongjiang">黑龙江</option><option value="hunan">湖南</option></select>
        
    • 文本域

      • 支持用户多行文本

      • 语法:<textarea></textarea>

      • 属性:

        • name 控件名称
        • cols 指定文本默认显示的列数,一行中能显示的英文字符量,中文减半
        • rows 指定文本域能够显示的行数
      • 注意:文本域可以由用户调整大小

        <textarea name="wenben" id="123" cols="30" rows="10"></textarea>
        
    • 按钮

      • 提交按钮

        <input name='' id='' type="submit">
        
      • 重置按钮

        <form action=""><input type="text" name="123"><input name='' id='' type="reset" value="重置按钮">
        </form>
        
      • 普通按钮

        <input type="button" value="点击">
        
      • 按钮显示文本

        <button>按钮显示文本</button>
        
        • 注意:

          • 按钮标签可以在任何地方使用,不局限在form表单中使用
          • 按钮标签使用在form中,默认具有提交功能,等同于input submit
          • 可以添加属性type 取值 submit/reset/button 进行区分(非必填)
          • 在表单外做为普通按钮使用时,需要通过JS,动态绑定事件
    • label特殊方法

      • 使用label标签包裹表单控件要显示的文本信息,为label标签添加for属性,属性值与所要绑定的表单控件的ID属性值保持一致,实现文本与控件的绑定。

        <label for="male">男</label>
        <input type="radio" name="gender" value="male" id="male">
        


最后,给大家推荐一个前端学习进阶内推交流群685910553(前端资料分享),不管你在地球哪个方位,
不管你参加工作几年都欢迎你的入驻!(群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档!)

如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思,那么请分享并转发,或者也可以关注一下表示您对我们文章的认可与鼓励。

web前端篇:html基础知识(3)相关推荐

  1. web前端篇:html基础知识

    目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...

  2. 初学者入门web前端:C#基础知识:函数

    入行前端对函数的掌握程度有可能直接影响以后工作的效率,使用函数可以高效的编写编码,节省时间,所以我整理了C#中最基础的函数知识点,虽然我在学习中 遇到很多问题,但是只要能够解决这些问题,都是好的. 一 ...

  3. 【WEB前端开发】基础知识大总结(HTML5+CSS3)

    本文共一万七千字,十六个内容点,七十个知识点 目录 一.转义字符 二.表单标签 1.form标签 2.input元素 3.label 标签 4.select 标签 5.button 元素 三.语义化标 ...

  4. 【Web前端】——HTML基础知识总结

  5. 好程序员web前端分享HTML基础篇

    好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...

  6. 前端性能优化基础知识--幕课网

    作为一个前端小码农,在页面样式都能实现以后,就开始考虑:同一个效果,我该用什么样的方式和代码去实现它比较规范?前两天逛幕课网发现了两门课程–<前端性能优化-基础知识认知>和<前端性能 ...

  7. 小白学Java Web 3 Web前端之CSS基本知识2

    这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分 享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...

  8. 从零开始学前端 - 1. HTML基础知识

    作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...

  9. 学习笔记:SpringCloud 微服务技术栈_实用篇①_基础知识

    若文章内容或图片失效,请留言反馈.部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 前言 学习视频链接 SpringCloud + RabbitMQ + Docker + Redis + 搜 ...

最新文章

  1. mysql节假日表_节假日常见的数据库磁盘空间处理小结
  2. SpringCloud配置中心高可用搭建
  3. java动态加载jar文件并执行方法
  4. 详解梯度爆炸和梯度消失
  5. 第二篇 python基础知识总结:数据、运算符
  6. 实验 4 操作、输出值和数据表实验报告--软件功能测试与性能测试实验
  7. html 地球大气,地球大气层为什么永远不会消失?
  8. C++远征之封装篇——类和封装、实例化和对象成员访问
  9. BSD socket编程学习
  10. SQL Server中的批处理排序和嵌套循环
  11. Script:查找表或索引增长的历史信息
  12. 路径找不到时该怎么解决
  13. Unique Binary Search Trees,Unique Binary Search Trees2 生成二叉排序树
  14. java 高斯投影_贡献高斯投影坐标与经纬度转换的java源码
  15. HDU 1429 bfs 状态压缩
  16. 反垃圾邮件技术介绍和部署思路
  17. 开源框架XWIKI搭建介绍
  18. 灵魂有香气的女子李筱懿:为人处世要“沉住气”
  19. mail java_基于JavaMail的Java邮件发送:简单邮件发送
  20. 2021周记12:理财、朋友与焦虑

热门文章

  1. laravel里面的validate参数介绍
  2. 我的Emacs配置文件 (windows版)
  3. Stream流代码总结
  4. uniapp手写 购物车单选 全选 反选
  5. w7无线网络密码破解
  6. 历史进程中的“Libra”:一段50年的人造货币史
  7. Go基础:指针、Map、结构体
  8. 开独立网店最重要的两个环节
  9. 73. 如何手动通过增强的方式,给 SAP ABAP 数据库表增添新的字段
  10. Shiro RememberMe 1.2.4 反序列化漏洞(SSV-92180)