精华内容
下载资源
问答
  • 行内元素 作用:点缀网页,填充内容 特性: 1) 与其他行内元素共享一行空间 2) 默认宽高由内容决定 3) 不能为其指定宽和高 4) 行内元素中不可以嵌套块...常见的块级元素有:p margin-top/margin-bottom form table/.
    1. 行内元素
      作用:点缀网页,填充内容
      特性:
      1) 与其他行内元素共享一行空间
      2) 默认宽高由内容决定
      3) 不能为其指定宽和高
      4) 行内元素中不可以嵌套块元素,但块元素中可以嵌套行内元素
      常见的行内元素有: span img a input th td em b i strong u
      2.块级元素
      作用: 一般用于页面结构的搭建
      特性:
      1)宽度是100%
      2)高度是由内容决定的
      3)占用一整行
      常见的块级元素有:p margin-top/margin-bottom form table/thead/tbody/tr /caption boby div* h1~h6:margin/font-size/font-weight ul ol li
      块级元素、行内元素的嵌套关系:

    块级元素里可以包含
    行内元素元素

    行内元素不可以

    包含

    块级元素

    块级元素视情况,

    可以包含
    块级
    元素
    展开全文
  • 常见的表单元素有哪些?各有什么属性? 1.背景介绍 表单元素是允许用户在表单中输入信息的元素。随着时代的改变和互联网的发展,表单的使用越来越广泛。 2.知识剖析 (1)什么是表单 表单在网页中主要负责...

    常见的表单元素有哪些?各有什么属性?

     

    1.背景介绍

    表单元素是允许用户在表单中输入信息的元素。随着时代的改变和互联网的发展,表单的使用越来越广泛。

    2.知识剖析

    (1)什么是表单

    表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作

    (2)常用表单元素

    •                 form:定义供用户输入的表单。
    •                 fieldset:定义域。即输入区加有文字的边框。
    •                 legend:定义域的标题,即边框上的文字。
    •                 label:定义一个控制的标签。如输入框前的文字,用以关联用户的选择。
    •                 input:定义输入域,常用。可设置type属性,从而具有不同功能
    •                 textarea:定义文本域(一个多行的输入控件),默认可通过鼠标拖动调整大小。
    •                 button:定义一个按钮。
    •                 select:定义一个选择列表,即下拉列表。
    •                 option:定义下拉列表中的选项。

     

    (3)表单的种类

    ① 文本框: 文本框是一种让访问者自己输入内容的表单对象,通常被用来填写信息或者简短的回答,如姓名、地址等。

    代码格式:<input type="text" name="..." size="..." maxlength="..." value="..."

     属性解释:

                    type="text"定义单行文本输入框;

                    name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

                    size属性定义文本框的宽度,单位是单个字符宽度;

                    maxlength属性定义最多输入的字符数;

                    value属性定义文本框的初始值。

     

    ② 多行文本框: 也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。

    代码格式:<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>

    属性解释:

                    name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

                    cols属性定义多行文本框的宽度,单位是单个字符宽度;

                    rows属性定义多行文本框的高度,单位是单个字符宽度;

                    wrap属性定义输入内容大于文本域时显示的方式。

     

    ③ 密码框: 是一种特殊的文本域,用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。

    代码格式:<input type="password" name="..." size="..." maxlength="...">

                   属性解释:

                    type="password"定义密码框;

                    name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

                    size属性定义密码框的宽度,单位是单个字符宽度;

                    maxlength属性定义最多输入的字符数。

     

    ④ 隐藏域: 隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

    代码格式:<input type="hidden" name="..." value="...">

    属性解释:

                    type="hidden"定义隐藏域;

                    name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

                    value属性定义隐藏域的值。

     

    ⑤ 单选框: 当需要访问者在单选项中选择唯一的答案时,就需要用到单选框了。

    代码格式:<input type="radio" name="..." value="...">

     属性解释:

                    type="radio"定义单选框;

                    name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;

                    value属性定义单选框的值,在同一组中,它们的域值必须是不同的。

     

    ⑥ 复选框: 复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。

    代码格式:<input type="checkbox" name="..." value="...">

    属性解释:

                    type="checkbox"定义复选框;

                    name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;

                    value属性定义复选框的值。

     

    ⑦ 提交按钮: 提交按钮用来将输入的信息提交到服务器。

    代码格式:<input type="submit" name="..." value="...">

    属性解释:

                    type="submit"定义提交按钮;

                    name属性定义提交按钮的名称;

                    value属性定义按钮的显示文字。

     

    ⑧ 复位按钮: 复位按钮用来重置表单。

    代码格式:<input type="reset" name="..." value="...">

    属性解释:

                    type="reset"定义复位按钮;

                    name属性定义复位按钮的名称;

                    value属性定义按钮的显示文字。

     

    常用type属性:button、checkbox、hidden、image、password、checkbox、radio、reset、submit、text。

    3.常见问题

    4.解决方案

    5.编码实战

    6.扩展思考

    html5新增type属性:

    (1)search:input会呈现为搜索框(与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容)。

    (2)tel:编辑电话号码的控件,提交时换行符会自动从输入框中去掉(普通的text并不会,故text类型验证输入值时一般需要trim()函数处理)。

    (3)url:编辑url的控件,提交时换行符与首位的空格都将自动去除。

    (4)email:可输入一个邮件地址。

    7.参考文献

    (1)html元素 —— 表单元素及实用属性

    https://mp.csdn.net/postedit/99889548

    (2)HTML5-input元素新特性

    http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date

    (3)W3School HTML 表单

    http://www.w3school.com.cn/html/html_forms.asp

    (4)菜鸟教程

    8.更多讨论

     

    问题一

    css如何实现input不可编辑?

    答:有两种方法

    第一:disabled="disabled"这样定义之后被禁用的 input 元素既不可用,也不可点击。

    第二:readonly="readonly" 只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

    问题二

    如何实现会发光的输入框input?

    答:

    取消浏览器默认样式outline。

    设置边框样式、宽度、颜色。

    设置边框阴影。

    渐变过渡效果

    详情:https://blog.csdn.net/qq_34573534/article/details/99890176

    问题三

    用HTML5怎么实现输入密码功能(六个格子)?

    答:用六个li充当六个格子,同时将input框隐藏,点击承载六个格子的容器时,使焦点聚焦在input上。

    详情:https://blog.csdn.net/qq_34573534/article/details/99891119

     

    PPT

    video

    展开全文
  • 行内块元素也可以一行显示,但inline 文本特点 ,中间会空白缝隙 浮动元素是挨在一起,如果父盒子不够宽,装不下,多出来子盒子就会另起一行显示 特点: 脱离标准文档流,不占标准流位置(标准文档流:...

    浮动(float : none/ left /right)

    为什么需要浮动?

    浮动可以改变元素标签默认的排列方式。如:可以让多个块级元素一行内排列。

    行内块元素也可以一行显示,但inline 有文本特点 ,中间会有空白缝隙

    浮动元素是挨在一起的,如果父盒子不够宽,装不下,多出来的子盒子就会另起一行显示

    特点:

    1. 脱离标准文档流,不占标准流的位置(标准文档流:元素没有浮动之前的默认显示方式,块元素独占一行,从上到下排列。行内元素会从左到右的排列)
    2. 浮动元素会显示一行上,如果超过父元素的宽度就会自动换行显示。
    3. 具有行内块元素的特点:一行显示多个。如果没有指定宽度和高度默认和内容一样。 可以指定宽高。
    4. 浮动元素一般结合父元素进行使用,先用标准流的父元素排列好上下位置,内部的子元素浮动排列好左右的位置

    清除浮动:

    原因:父盒子不能设置高度,因为有些开发时候不能指定盒子具体高度。但子盒子浮动不占位置,最后父盒子为0…就影响后面的标准流盒子的布局。

    本质:清除后,父盒子就会根据子盒子自动检测高度,父盒子有了高度,就不会影响下面的标准流。

    方法:

    1.额外标签法。在浮动元素最后加一个空标签(必须是块级元素)

    <div style="clear:both"></div>
    

    缺点:结构化差 不常用

    2.父级添加overflow:hidden / auto /scroll

    缺点:溢出部分无法显示

    3.:after 伪元素

    父级添加

    .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    
        .clearfix {
            /* IE6,7专有 */
            *zoom: 1;
        }
    

    缺点:需照顾低版本浏览器

     .warpper::after {
            content: "";
            clear: both;
            display: block;
        }
    
        .warpper {
            *zoom: 1;
        }
    

    4.双伪元素清除浮动

    父元素添加

    .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
    
        .clearfix::after {
            clear: both;
        }
    
        .box {
            *zoom: 1;
        }
    

    缺点:照顾低版本浏览器

    5.父级加行级块元素

    .warpper{
    
    display:inline-block
    
    }
    

    父级加浮动

    .warpper{
    
    float:left;
    
    }
    

    父级加定位

    .warpper{
        
    position: absolute;
    
    }
    

    设置position: absolute;和float:left;/right; 会把元素转换成inline-block, 内容决定高度

    常见的网页布局:

    1.三种:

    ​ 标准文档流 : 用于 垂直的块级盒子的显示

    ​ 浮动 :用于 多个块级盒子的水平显示

    ​ 定位:用于 元素自由的在某个盒子里移动

    2 两原则: 一行一行的使用标准文档流,多列 的用浮动来布局。 ​

    先定义盒子大小,再定义盒子位置(浮动,定位)

    注:先用标准流父元素上下排列,之后内部子元素浮动左右排列。

    一个元素浮动了,其他兄弟元素也要浮动( 浮动只影响后面的标准流 ,不影响前面)

    展开全文
  • 但是一个问题,常见的标签名比如 在同一个页面上非常多。会不会觉得 tag name 没什么用呢? 当然普通的模拟操作是不大有用,这个重复性实在太高了。但是在某些特殊情况下,比如需要使用 body、html、head 这些...

    tag name

    tag name 为标签名定位,使用网页元素的标签名如a, div, input, span 等

    但是有一个问题,常见的标签名比如

    在同一个页面上有非常多。会不会觉得 tag name 没什么用呢?

    当然普通的模拟操作是不大有用,这个重复性实在太高了。但是在某些特殊情况下,比如需要使用 body、html、head 这些元素的时候, tag name 就有用了。

    另外批量处理某些标签的时候,也可以使用 tag name。

    在代码中的写法如下:

    driver.find_element_by_tag_name("body")
    

    在 console 中验证唯一性的代码为:

    document.getElementsByTagName('body')
    

    link text 与 partial link text

    link 定位与前面几种定位方法不同,是一种特殊的定位方式,专门用来定位文本链接的,也就是 <a> 标签。

    链接文本在 HTML 页面上普遍存在,只要是 <a> 标签,都可以使用 link text 定位,既精确又高效。

    一般一个页面不会出现两个文本相同的 <a> 标签,因为如果出现,会让用户疑惑

    我们试试用这种方法来定位百度右上角的链接:

    代码如下:

    driver.find_element_by_link_text("新闻")
    driver.find_element_by_link_text("地图")
    

    注意:
    这种方式有一个缺点,就是在这些链接文本中有空格或其他字符,在页面或者开发者工具中不太容易注意到,那么这种情况就会导致定位失败。因此使用时最好从开发者工具中去复制文本。

    Partial link text 是 link text 定位的一种补充,比如上面提到的可能有空格或其他字符,或者链接地址特别长的时候,或者链接中有部分文本是变化的。

    那么可以取链接中的一部分来进行定位,当然这种方法的精确性就不是那么容易保证了。
    比如上图百度首页中的hao123,我们可以写为:

    driver.find_element_by_partial_link_text("hao")
    

    验证 link text 是否唯一的方法只有借助 JQuery 和 xpath 了:

    // link text
    $x('//a[string()="这里输链接文本"]')
    // partial link text
    $x('//a[contains(string(), "这里输链接文本")]')
    

    注意,这不是特别精确的验证。

    展开全文
  • 常见的块级元素有:div,h1~h6,ul,table等,其中div是最常用最典型的块级元素。 三、行内元素 行内元素的特点: 总是和相邻的行内元素在同一行上(物以类聚) 设置宽高无效,水平方向的padding和m
  • CSS 的元素显示

    2021-02-22 10:16:24
    常见的元素有 h1 -h6 、p、div、ul、ol、li等,其中 div 标签是最典型的块元素。 块元素的特点: 1、比较霸道,自己独占一行 2、高度、宽度、外边距以及内边距 都可以控制。 3、宽度默认是容器(父级宽度)的100% ...
  • 文章目录CSS的元素显示模式块元素行内元素行内块级级元素元素显示模式的总结元素的显示模式转换 CSS的元素显示模式 作用:网页的标签非常多,在不同...常见的元素有<h>~<h6>、<p>、<div>、&l
  • 答案:Shadow DOM 是浏览器一种功能,能够自动添加子元素,例如audio元素,在网页中能使用进度条、音量控制等功能,这些相关元素都由浏览器自动生成。 2.元素属性src和href何区别? 答案:两者功能不同。href...
  • css中标签的显示模式分为三种: 块级元素block-level 行内元素inline-level 行内块元素inline-block 我们常用的标签属于什么显示模式?...1⃣️常见的元素有:< h1 >…< h6 >、p标签、div...
  • CSS的元素显示模式

    2020-09-08 16:38:02
    CSS的元素显示模式 作用:网页的标签非常多,在不同性质的网页会用到不同类型的标签,了解他们的...常见的元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<d
  • CSS 的元素显示模式

    2021-02-05 11:03:32
    什么是元素显示模式 作用:网页的标签非常多,在不同地方会用到不同类型的标签,...常见的元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最
  • CSS的元素显示模式总结 元素显示模式就是元素以什么方式进行显示,比如div独占一行,又如一...常见的元素有 <h1>~<h6>、<p> 、<div>、<ul>、<ol> 、<li>等 特点: 比较.
  • CSS 元素的显示模式 什么是元素的显示模式 作用: 网页的标签非常多,在不同地方会用到不同类型的...常见的元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<
  • 我们最好开始注意了,因为HTML Police会走遍你代码然后挑出你所有没有语义标签,这份列表包含...alt属性是所有显示在网页中图片必须属性,它能够帮助人们知道这是什么图片.或者在网速比较慢时候显示图片含义是什
  • 常见的元素有<h1>~<h6/> <p> <div>,其中div是最经典的块元素 块元素特点有: 1.独占一行 2.高度,宽度,外边距,内边距都可以控制 3.宽度默认是容器的100% 4.是一个容器及盒子,里面放块....
  • 什么是标签显示模式?... 常见元素有h1-h6,p,div,ul,ol,li等其中div最为典型  块元素特点:  ⑴比较霸道,自己独占一行。  ⑵高度宽度外边距内边距都可以控制  ⑶宽度默认是容器(父级宽
  • CSS 元素显示模式

    2021-04-15 17:29:33
    一、CSS 元素显示模式 了解元素的显示模式可以更好的让我们布局页面 1. 什么是元素的显示模式 作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解...常见的元素有 <h1>~<h6>、<p&g...
  • 思维导图 一:元素显示模式分类 ...常见的元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素。 ❤块级元
  • 常见的响应式布局解决方法

    千次阅读 2018-07-03 09:34:22
    由于设备的分辨率不同,我们就用响应式布局来解决设备分辨率不同的问题,常见的解决方法px视口、媒体查询、百分比、rem、和vw/vh等方法来实现响应式布局。接下来介绍下个种方法。一、px和视口在静态网页中,我们...
  • 发现测量页面主要内容可见时间一种更精准且简单方法是查看什么时候渲染最大元素。 以上图为例,绿色方块区域是内容最大的元素,所以在这个例子中,LCP等于这个元素开始渲染时间。 现在...
  • 09CSS元素显示模式

    2019-12-11 16:31:40
    1.什么是元素显示模式 作用:网页的标签很多,在不同的地方会用到不同类型的标签,了解它们的特点可以更好的布局我们的网页。 元素显示模式就是元素(标签)以...常见的元素有<h1>~<h6>、<div>...
  • 元素显示模式块元素行内元素行内块元素 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点之后可以更好的布局我们的网页 ...常见的元素有<h1>~<h6>、<p>...
  • 文章目录事件基础事件概述事件的组成 :执行事件的步骤常见的鼠标事件 事件基础 事件概述 JavaScript使我们能力创建动态页面,而事件基础是可以被JavaScript侦测到的行为。 简单理解:触发—响应机制。 网页中的每...
  • 1.XHTML和HTML有什么区别HTML是一种基本WEB网页设计语言,XHTML是一个基于XMl置标语言最主要不同XHTML元素必须被正确地嵌套。XHTML元素必须被关闭标签名必须用小写字母XHTMl文档必须拥有根元素2.什么是语义化...
  • 一、CSS 元素显示模式 了解元素的显示模式可以更好的让我们布局页面 1. 什么是元素的显示模式 作用:网页的标签非常多,在不同地方会用到...常见的元素有<h1>~<h6>、<p>、<div>、<...
  • 海报设计中字体设计,有人会很不重视这点,往往会说:“字体有什么好设计”,其实不然,字体设计好了,一张海报就上升一个档次!产品转化率也会有所提高!是不是、经常可以看到下面这类作品字体: ...
  • 网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应,也就是俗称外部容器不能被“撑大”,常见表现为背景或边框异常,这时我们就需要来清除“闭合浮动”,方法主要以下4种: 1. 额外...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 267
精华内容 106
关键字:

常见的网页元素有什么