栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

HTML常用标签总结

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

HTML常用标签总结

HTML 概念:是最基础的网页开发语句
  • Hyper Text Markup Language 超文本标记语言
    • 超文本:
      • 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
    • 标记语言:
      • 标签构成的语言。<标签名称> 如html,xml
      • 标记语言不是编程语言
快速入门 语法
  • 1、html文档后缀名 .html 或者 .htm
  • 2、标签分为
    • 围堵标签 :有开始标签和结束标签。如
    • 自闭合标签:开始标签和结束标签在一起。如
  • 3、标签可以嵌套
    • 需要正确的嵌套,不能你中有我,我中有你
    • 错误:
    • 正确:
  • 4、在开始标签中定义属性。属性是由键值对构成,值需要 用引号(单双引号都可)引起来。
  • 5、html的标签是不分大小写的(推荐同意为小写)
  • 代码


    
    标题


HelloWorld


标签学习 1、文件标签:构成html最基本的标签
  • html:html文档的根标签
  • head:头标签。用于指定html文档的一些属性。引入外部的资源
  • title:标题标签、
  • body:体标签
  • :html5中定义该文档是html文档
2、文本标签:和文本有关的标签
  • 注释:
  • to :标题标签
    • h1~h6字体大小逐级递减
  • :段落标签


  • :换行标签

  • :展示一条水平线
    • 属性:
      • color:颜色
      • width:宽度
      • size:高度
      • align:对齐方式
        • center:居中对齐
        • left:左对齐
        • right:右对齐
  • :字体加粗
  • :字体斜体
  • :字体标签
  • center:文本居中
    • 属性:
      • color:颜色
      • size:字体
      • face:字体
  • 属性定义:
    • color:
      1、英文单词:red、green、blue
      2、rgb(值1,值2,值3):值的范围0~255 如:rgb(0,0,255)blue
      3、#值1#值2#值3:值的范围:00~FF之间。如#FF00FF
    • width
      1、数值:width=‘20’,数值的单位,默认是px(像素)
      2、数值%:占比相对父元素的比例
3、图片标签
  • 代码



    
    图片标签




贝贝
4、列表标签
  • 有序列表:
    • ol:
    • li:
  • 代码:

把大象装进冰箱里

  1. 打开冰箱门
  2. 把大象放进去
  3. 关上冰箱门
  • 无序列表:
    • ul:
    • li:
  • 代码:
  • 打开冰箱门
  • 把大象放进去
  • 关上冰箱门
5、链接标签
  • a:定义一个超链接
    • 属性:
      • href:指定访问资源的URL(统一资源定位符)
      • target:指定打开资源的方式
        • _self:默认值。在当前页面打开
        • _blank:在空白页打开
6、div和span
* div:每一个div占满整行。块级标签
* span:文本信息在一行展示,行内标签 内敛标签
7、语义化标签
  • 定义: html5中为了提高程序的可读性,提供了一些标签。
    • < heade r>: 页眉
    • < footer >:页脚
8、表格标签
  • table:定义表格
    • width:宽度
    • border:边框
    • cellpadding:定义内容和单元格的距离
    • cellspacing:定义单元格之间的距离。如果指定0,则单元格的线回合为一条
    • bgcolor:背景色
    • align:对齐方式
  • tr:定义行
    • bgcolor:背景色
    • align:对齐方式
  • td:定义单元格
    • colspan:合并列
    • rowspan:合并行
  • th:定义表头单元格
  • < caption>: 表格标题
  • < thead>: 表示表格的头部分
  • < tbody>: 表示表格的体部分
  • < tfoot>:表示表格的脚部分
9、表单标签
  • 表单:
    • 概念:用于采集用户输入的数据的。用于和服务器进行交互。
    • form:用于定于表单的。可以定义一个范围,范围代表采集用户数据的范围
      • 属性:
        • action:指定提交数据的URL
        • method:指定提交方式
          • 分类:一共7种,2种比较常见的
          • get:
            1. 请求参数会在地址栏中显示
            2. 请求参数大小是有限制的
            3. 不太安全
          • post:
            1. 请求参数不会再地址栏中显示。会封装再请求体中(HTTP协议)
            2. 请求参数的大小没有限制
            3.较为安全
          • 表单项中的数据要要提交,必须指定其name属性
  • 表单项标签:
    • input:可以通过type属性值,改变元素展示的样式
      • type属性:
        • text:文本输入框,默认值
        • password:密码输入框
        • radio:单选框
          • 注意:
            1、一般会给每一个单选框提供value属性,指定其选中后提交的值
            2、checked属性,可以指定默认值
            3、要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
        • checkbox:复选框
          • 注意:
            1、一般会给每一个单选框提供value属性,指定其被选中后提交的值
            2、checked属性,可以指定默认值
        • file:文件选择框
        • hidden:文件选择框
        • 按钮:
          • submit:提交按钮。可以提交表单
          • button:普通按钮
          • image:图片提交按钮
            • src属性指定图片的路径
        • label:指定输入项的文字描述
          • 注意:
            • label的for属性一般会和 input的id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
        • select:下拉列表
          • 子元素:option,指定列表项
        • textarea:文本域
          • cols:指定列数、每一行有多少个字符
          • rows:默认多少行。
代码


性别: 男 女
爱好: 逛街 Java 游戏
图片:
隐藏域:
取色器:
生日:

邮箱:
年龄:
省份:
文本域:
按钮:
案例——注册列表 效果图:

实现代码:



用户名
密码
Email
姓名
手机号
性别 男 女
出生日期
验证码
转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号