html常用标签学习笔记


本文内容:

  1. 常见标准属性
  2. p
  3. div
  4. span
  5. h系列
  6. input
  7. label
  8. form
  9. table
  10. textarea
  11. select
  12. a
  13. img
  14. ul
  15. ol
  16. 换行、水平线标签
  17. 常见标准事件属性

PS:html5新增的几个标签也比较火,后续可能会在其他博文补充。

首发日期:2018-04-01


常见标准属性:

  • id: id一般来说是唯一的(不唯一是不符合规定的),因为是唯一的,所以可以特定的标识某一个标签。如果需要特定的使用某一个标签,可以定义id
  • class: 是标签的类名,与id不同的是,class是可以重复的,一般用来用类选择器选择“某一些”标签来定义css样式
  • style: 定义标签的样式
  • 其他。。

p:

介绍:

  • p标签用来定义段落,一般会用一片空白来代表段落的结束,而且还会有不同段落之间还有一定间距。
  • 效果:

属性:p标签没有什么特别的属性,主要使用的属性都是通用属性

示例:

<p>一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一
        大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
</p>

补充:

  • 由于是段落,所以会认为是一起的文本,所以即使被p标签包裹的是多行文本,也会忽略我们进行的换行。


div:

介绍:

  • 有点类似p标签,但没有p标签的自带间隔这类属性;一般用作定义“区块”(这片区块内容是这般这般)

属性:div标签没有什么特别的属性,主要使用的属性都是通用属性

示例:

<div>
            一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一
        大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字一大段文字
        </div>

span:

介绍:

  • 有div有点类似,但这是一个行内标签,定义的区块只是行内的一块。

属性:span标签没有什么特别的属性,主要使用的属性都是通用属性

示例:

<span>一段文字</span><span>一段文字</span>

h系列:

介绍:

  • 用来定义标题,每种标题都有固定的文本样式
  • h1用来定义一级标题
  • h2用来定义二级标题
  • h3用来定义三级标题
  • h4用来定义四级标题
  • h5用来定义五级标题
  • h6用来定义六级标题

示例:

        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>

input :

介绍:

  • input是一个输入框 (文本输入框,选择框,日期选择框,文件选择框等等),input的type属性决定着是什么输入框

type属性:

  • 当type=‘text‘时,是一个明文输入框

    • 示例:

        <input type="text" >
  • type=‘password‘时,是一个密码输入框 ;input如果有value属性,则作为输入框的默认值;
    • 示例:

        <input type="password" >
  • type=‘button‘时,是一个按钮,这种按钮主要是负责本地的“按钮事件”
    • 示例:

  • type=‘submit‘时,是一个提交表单的按钮,主要负责向后台提交表单,,它可以提交表单form里面的内容 ;
    • 示例:

      <input type="submit">
  • type=‘radio‘是一个单选框【name的值相同影响他们不能复选,只能单选】,,如果需要有提示内容,需要在标签后面填写,value只是代表选定之后提交到后台的结果
    • 示例:
  • type=‘checkbox‘是一个复选框,,如果需要有提示内容,需要在标签后面填写,value只是代表选定之后提交到后台的结果
    • 示例:
  • type=‘data‘是一个日期选择框,

    • 示例:

      <input type="date" />
  • type=‘file‘,需要form里面有enctype=‘multi‘属性配合才能上传文件。
    • 示例:

        <input type="file" />
  • input的其他常见属性:

    • value:定义input框的值

      • 对于text", "password",是定义input框的默认值
      • 对于"button", "reset", "submit" ,是定义按钮上的显示的文本
      • 对于"checkbox", "radio", "image" - 定义与输入相关联的值 (比如radio中点击一个选项代表返回后台的是一个什么值)
    • name:定义 input 标签的名称,可以用name来指示代表哪个input框,可以帮助后台获取指定input里面的值
      • 对于单选框,多个input框的name必须相同,不然无法”单选“
    • readonly:规定input框是只读的,不可写
    • checked:勾选选项,与‘checkbox‘或‘radio‘配合使用,checked="checked" 代表勾选上input框代表的指定选项

label:

介绍:

  • label只是一个静态文本,通常用来为input框进行标注。

属性:

  • for:用于将label绑定到input框,可以使点击label相当于点击对应的input框 for的值应为input框的id

      <label for="t1">用户名</label>
      <input id="t1" type="text" />
      <label for="c1">男</label>
      <input id="c1"  type="radio" checked="checked" />

form:

介绍:

  • 定义表单,所有向后台传输的数据都定义在表单中

属性:

  • method:定义向后台传输数据的形式
  • action:定义传输数据的方向
  • target:定义打开提交表单后打开网页的方式
  • enctype:规定表单数据在发送到服务器之前应该如何编码【传输文件时enctype="multipart/form-data"

示例:

<form src="login.html" method="post">
            <label for="t2">用户名:</label>
            <input id="t2" type="text" />
            <label for="t3">密码:</label>
            <input id="t3" type="text" />
            <input type="submit" value="提交表单" />
</form>

table:

介绍:

  • table用来定义表格

子标签:

  • thead:定义“表头”

    • tr: thead中定义行
    • th:thead中定义列,实际上也可以在thead外定义,比如有些是垂直表头
  • tbody:定义"表格体“
    • td :代表列
    • tr:代表行

属性:

  • border :设置边框的宽度
  • rowspan :设置表格的行跨度
  • colspan:设置表格的列跨度
  • width:设置整个表格的宽度,但不建议使用,应该由css决定样式

补充:

  • 如果我们没有定义tbody,网页也会默认解析添加上,但不会添加thead
  • 表格默认是没有边框,需要添加
  • 对于没有内容的,又想占据一个表格空间的,可以使用&nbsp

示例:

<table border="2" width="200">
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">8班</td>
                    <td>小明</td>
                    <td>男</td>
                </tr>
                <tr>

                    <td>小2</td>
                    <td>男</td>
                </tr>
            </tbody>
</table>

textarea:

介绍:

  • 是一个多行文本输入框

属性:

  • rows:规定文本区内的可见宽度。
  • cols:规定文本区内的可见行数。
  • wrap:设置输入框的换行模式
  • readonly:规定多行文本框是只读的,不可写 的

示例:

<textarea rows="4" cols="30"></textarea>

补充:

  • 默认值:textarea的默认值要定义成标签的内容

select:

介绍:

  • 定义一个下拉选单

子标签:

  • option :定义下拉选单
  • optgroup:定义下拉选单组

属性:

  • size: 规定下拉列表中可见选项的数目。
  • multiple:是否允许多选
  • optgroup的label属性:用于定义下拉选单的组名
  • option标签的属性
    • value:定义选中选项后传到服务器的值
    • selected:定义选项是否默认选择,【selected="selected"】

示例:

<select name="cars">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
        </select>
        <select name="cars" size="2">
            <optgroup label="文件">
                <option value="1" selected="selected">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
            </optgroup>
</select>

a:

介绍:

  • a标签用来定义”锚点“,一般用来”跳转“,可以跳转到其他网页,也可以跳转到源网页的其他位置

属性:

  • href :定义超链接,定义跳转的”方向“,为地址的时候会跳转到指定地址;为id时,会跳转到原网页的指定id的标签的位置,为name时,会跳转到原网页的指定name的a标签的位置(都用#来做前缀,下面有示例)
  • target:定义如何打开超链接 ,默认是在本标签页中打开
    • _blank:代表在新窗口中打开

示例:

        <a href="https://www.baidu.com" target="_blank">跳转到百度</a>
        <a href="#a1">按我下去</a>
        <div > <a name="a2">大段文字</div>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <div id="a1"> 大段文字</div>
        <a href="#a2">按我上去</a>

补充:

  • 还有功能性链接,比如点击后调用本地邮件软件发邮件

img:

介绍:

  • img标签用来在网页中插入一个图片

属性:

  • src: 定义图片的源,可以为url,可以为本地地址
  • alt: 定义如果没有图片的时候,显示的替代文本
  • border:定义图片的边框

示例:

(下面代码实现需要图片)

<img src="一个错误的路径.gif"  alt="假装有图片"/>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" border="1">

ul:

介绍:

  • 定义无序列表。

子标签:

  • li:定义列表项

属性:无常用属性或已不建议使用。

示例:

<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>一个嵌套列表
                <ul>
                    <li>4.1.1</li>
                </ul>
                <ul>
                    <li>4.3.1</li>
                </ul>
            </li>
</ul>

补充:

  • 列表可以嵌套:

    <ul>
      <li>咖啡</li>
      <li>茶
        <ul>
        <li>红茶</li>
        <li>绿茶</li>
        </ul>
      </li>
      <li>牛奶</li>
    </ul>

ol:

介绍:

  • 定义有序列表

子标签:

  • li:定义列表项

属性:

  • type:定义顺序,A,a ,I,i,1等顺序

示例:

<ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <ol>
                <li>4.1</li>
                <li>4.2</li>
                <li>4.3</li>
            </ol>
            <li>5</li>
</ol>

换行、水平线标签:

  • br: 换行
  • hr:定义一条水平线

常见标准事件属性:

  • onclick: 定义标签被点击事件,值是一个函数,使得点击该标签就调用对应函数。
  • ondblclick:定义标签被双击事件,值是一个函数,使得双击该标签就调用对应函数。
  • onfucus: 定义标签获得焦点事件,值是一个函数,使得标签获得焦点事件就调用对应函数。
  • onblur: 定义标签失去焦点事件,值是一个函数,使得标签失去焦点事件就调用对应函数。
  • 其他。。。。
<input type="button" value="button" onclick="alert(555)">

原文地址:https://www.cnblogs.com/progor/p/8687120.html

时间: 2024-11-09 00:47:24

html常用标签学习笔记的相关文章

html常用标签学习

1.html常用标签学习:1.1.<em>和<strong>标签主要是用来做强调用的,其中<em>是让文字变成斜体,而<strong>把文字进行加粗显示.1.2.<span>标签是没有语义的,它的作用就是为了设置单独的样式用的.1.3.<q>标签是做文本引用时候用的,需要引用的文本不需要加双引号,浏览器会自动为<q>标签加上引号.<blockquote>标签是对长文本进行引用,引用短文本比如一句话就用<q

java struts2入门学习---常用标签学习总结

https://www.cnblogs.com/amosli/p/3533636.html jsp页面中引入标签: <%@ taglib uri="/struts-tags" prefix="s"%> 常用标签知识点总结: <s:fielderrors/>取出错误消息<s:form/>生成一个表单<s:textfield/>生成一个单行文本框,错误消息显示,智能回显.<s:password/>生成一个单行密

2018-03-26MySQL启动关闭常用命令学习笔记

MySQL常用基本命令 优雅关闭数据库方法 1.mysqladmin方法: mysqladmin -uroot -p shutdown 2.自带的脚本 /etc/init.d/mysqld stop 2.kill信号的方法 kill -USR2 'cat path/pid' 提示:推荐前两个方法,自己写脚本启动停止就用第一个.自己写脚本的原则就是调用mysqld_safe指定实例配置文件启动关闭的时候调用mysqladmin shutdown来关闭. 多实例启动关闭方法 启动 /data/330

linux文件系统常用操作学习笔记

分区类型介绍 这里我总结了一个公式: 主分区数+扩展分区数=4(/dev/sda1-4) 扩展分区有可以细分成许多逻辑分区(5-over). 常用命令: df 文件系统使用的情况 -a all -h human du 统计文件系统使用情况 -s subject -h human -a all ll -h    统计目录大小 打印超级快信息 dumpe2fs </dev/ada8> 挂载文件系统    mount -t type -o options 查看磁盘硬件 fdisk -l 挂载sr0,

C#基础与常用数据结构学习笔记

1.接口 interface 接口相当于没有方法实现的抽象类,接口方法不要加各种访问级别:例如public,private等. 跟随者杨老大,写了如下代码: public interface Flyable    {        void fly();    } public interface Runable    {        void run();    } public class Bird:Flyable,Runable    {        #region Flyable 成

基本STRUTS标签-学习笔记

BEAN标签(name 是从别处得来的:id是自己的,相当于变量:property相当于变量的值) ①: String str=request.getParameter("param"); out.println("str); 相当于: <bean:parameter id="str" name="param"/> <bean:write name="str"/> ②: <bean:wr

struts2标签学习笔记(一)

struts2所有标签都定义在一个s标签库里.虽然struts2把所有的标签都定义在URI为"/struts-tags"空间下,但依然可以对struts2标签进行简单的分类. 1.UI标签:主要用于生成HTML元素的标签. 2.非UI标签:主要用于数据访问.逻辑控制等标签. 3.Ajax标签:用于Ajax支持的标签. 对于UI标签,则又可以分为如下两类 1.表单标签:主要用于生成HTML页面的form元素,以及普通表单元素的标签. 2.非表单标签:主要用于生成页面上的树.Tab页等标签

JSTL标签学习笔记

JSTL标签是一种负责前台数据显示的标签,可以和HTML无缝集成,运用此标签可以不用再前台使用过多的JAVA代码显示前端页面. 要使用JSTL标签,首先需要导入标签库,及jstl.jar和standar.jar包,其次是再页面中加载标签库,即在JSP页面加上: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>这么一句话 其中uri即Uniform Resource Ident

liunx 常用命令学习笔记

通过linux 命令pwd:显示当前所在的目录ls:显示当前目录下的文件cd:切换路径 cd..返回上一级路径mkdir:新建目录rmdir:删除目录 touch:新建文件rm:删除文件 gedit:使用编辑器打开文件cat:将当前文件显示在终端中 clear:清除屏幕echo $ ..:列出..的路径 ***********************************************************************shell命令详解:在shell中输入字符串并回车的