精华内容
下载资源
问答
  • HTML1、语义化何为语义化,字面意思就是根据html语言做一个让代码变得有意义的转化。emmm 大家都知道,html标签有很多,<h1> <p> <div> <span>等等等。看看这些可爱的标签,有什么想说的?...

    HTML

    1、语义化

    何为语义化,字面意思就是根据html语言做一个让代码变得有意义的转化。

    emmm 大家都知道,html标签有很多,<h1> <p> <div> <span>等等等。看看这些可爱的标签,有什么想说的?咱们先看一个语义化的页面布局,如下:

    4b28f887fffb60d7b7b09c3d7caf6168.png

    1、<header>

    <header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

    在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

    2、<nav>

    <nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

    在一个文档中,可定义多个<nav>元素。

    3、<main>

    <main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

    需要注意的是在一个文档中不能出现多个<main>标签。

    4、<article>

    <article>元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

    当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

    5、<aside>

    <aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

    6、<footer>

    <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

    使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

    注意不能包含<footer>或者<header>

    7、<section>

    <section>表示文档中的一个区域(或节),比如,内容中的一个专题组。

    现在vue开发,拿起div就是撸,简单方便快捷。也说不上哪种模式更好吧,但是非框架开发的时候,建议还是语义化,这样浏览器理解起来更好,而且,当css样式加载失败的时候,不至于页面乱到不能看。 下面介绍一下语义化优点:

    • 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
    • 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
    • 方便其他设备解析,如盲人阅读器根据语义渲染网页
    • 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

    2、新标签新特性

    上面说 了语义化,而H5出的新标签,大部分都是为了让开发者更好的去使用语义化去开发。

    新block标签:header, footer, main, aside, article, section, nav, hgroup, (主要8个)。

    新表单标签,calendar、date、time、email、url、search

    媒介标签: video 和 audio // 视频和音频

    绘画标签: canvas //画图 利用css3

    新block标签:

    header:页眉(网页(部分区域)的头部 顶部 导航区域等等);

    footer:页脚(网页(部分区域)的底部|版权区域等等);

    section 标签定义网页中的区域(部分);

    article 内容是引用其他地方的;

    aside 跟 article 是一起使用;是辅助 article 区域的内容;

    nav 导航链接部分;

    hgroup 给标题分组,不能就一个标题;

    figure 对多个元素进行组合。通常与figcaption联合使用;

    3、input和textarea的区别

    具体应该是 <input type="text">和<textarea> 的区别。

    他们之间最大的区别是,前者是单行文本框,后者是无限多行文本框。

    4、用一个div模拟textarea的实现

    使用很简单,一个普通的block元素上加个contenteditable="true"就ok了,如下:

    <div contenteditable="true"></div> 

    15a623d9c10214d21785e616f2d6485c.png

    是不是贼简单。样式什么的自己加就好,contenteditable虽然是H5的属性,但是IE很早之前就已经开始支持了,所以兼容的问题不是很大。

    5、移动设备忽略将页面中的数字识别为电话号码的方法

    <meta name="format-detection" content="telephone=no,email=no,adress=no">

    一、telephone

    你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

    telephone=no就禁止了把数字转化为拨号链接!telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

    二、email

    告诉设备不识别邮箱,点击之后不自动发送

    email=no禁止作为邮箱地址!

    email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!

    三、adress

    adress=no禁止跳转至地图!

    adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!

    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • HTML的七大标签怎么运用?昨天我们说HTML大概分为7个大的标签。1、文档结构标签2、字符格式标签3、区段格式标签4、列表格式标签5、超链接标签6、多媒体标签7、表单标签我们在昨天简单的介绍了前边七种标签的运用方法...

    HTML的七大标签怎么运用?

    昨天我们说HTML大概分为7个大的标签。

    1、文档结构标签

    2、字符格式标签

    3、区段格式标签

    4、列表格式标签

    5、超链接标签

    6、多媒体标签

    7、表单标签

    我们在昨天简单的介绍了前边七种标签的运用方法,今天呢沐木在这里就给大家介绍一下剩下的4种标签。

    四、列表格式标签

    • 无序列表,没有顺序的。中间用
    • 包含着。

    无序列表:

    a9003a8197dabf2aa275a5cdb2cb0e60.png
    在无序列表里呈现的是·后面是文字,在有序列表里呈现的是排序的状态。
    1. 有序列表,

    有序列表:

    7e80bc3eb4570a7e38c4f4593803c7c5.png
    描述的文字。具体的列表、、这三个是要搭配着使用的。
    57cf3524196c602791a316918f2a4219.png

    它的效果:

    841ce8237da27d475beb77b153aadbf9.png
    搭配使用定义目录里面的
    036423fda5bad3e88ce9fce359ae1206.png

    它的效果:

    09e4b86c34af31176d8b0c4604ef7474.png
    菜单列表,也是配合着使用的。

    五、超链接标签

    六、多媒体标签

    他是自闭和的标签,图像文件地址可以填网络的图片也可以是我们电脑本地的图片。

    七、表单标签

    他是自闭和标签,他是一个文本框的标签,搭配着

    使用,

    包含着。

    代表着中间是多行的文本框。

    下拉列表。

    和是要搭配着使用的,标签。

    9d383022b9e05821a0692e5a2cc6df2c.png

    好啦,我们现在就把我们的七个标签都讲完啦。

    大家有没有记住呢?

    我们明天继续讲解HTML5。

    快速学习HTML的标签

    展开全文
  • Entry输入文本域 Entry是tkinter类中提供的的一个单行文本输入域,用来输入显示一行文本,收集键盘输入(类似 HTML 中的 text)。需要用户输入用户信息时,比如我们平时使用软件、登录网页时,用户交互界面让我...
    c1e7859f8d07c89ce10141ecb77a9a0e.gif

    在浏览网页的时候,我们经常会遇到登录界面,让用户输入邮箱、密码之类的窗口,类似于下面的窗口:

    7ca01c0ba50ec9d5f532879de298db36.png

    用tkinter自带的Entry元素可以做出简单的登录窗口。

    Entry输入文本域

        Entry是tkinter类中提供的的一个单行文本输入域,用来输入显示一行文本,收集键盘输入(类似 HTML 中的 text)。

        需要用户输入用户信息时,比如我们平时使用软件、登录网页时,用户交互界面让我们登录账户信息等时候可以用到。

    应用实例

    import tkinter as tk# 第1步,实例化object,建立窗口windowwindow = tk.Tk()# 第2步,给窗口的可视化起名字window.title("我的窗口")# 第3步,设定窗口的大小(长 * 宽)window.geometry("500x300")# 第4步,在图形界面上设定输入框控件entry框并放置,将字符显示为"*"enter = tk.Entry(window,show="*")enter.pack()# 第5步,定义一个触发事件时的函数enter_me(注意:因为Python的执行顺序是从上往下,所以函数一定要放在按钮的上面)def enter_me():    v = enter.get()    t.insert("insert", v)# 第6步,创建并放置一个按钮触发函数but1 = tk.Button(window, text="登 录", width=10, height=2,                 command=enter_me)but1.pack()# 第7步,创建并放置一个多行文本框text用以显示,指定height=5为文本框是5个字符高度t = tk.Text(window,height=5)t.pack()# 第8步,主窗口循环显示window.mainloop()

    输出结果

    fa9c1a5c0651d2f4ea6052c6592f4acb.gif

    END

    展开全文
  • HTML按钮显示多行文本框,兼容IE8,火狐。谷歌
  • 多行文本框QTextEdit

    千次阅读 2019-07-30 21:34:30
    QLabelEdit类是一个多行文本框控件,可以显示多行文本内容,当文本内容超过控件显示范围时,可以显示水平个垂直滚动条。QTextEdit不仅可以显示文本还可以显示HTML文档。 方法 QlabeL常用方法 方法 描述 ...

    介绍

    QLabelEdit类是一个多行文本框控件,可以显示多行文本内容,当文本内容超过控件显示范围时,可以显示水平个垂直滚动条。QTextEdit不仅可以显示文本还可以显示HTML文档。

    方法

    QlabeL常用方法

    方法 描述
    setPlainText() 设置多行文本框的文本内容
    toPlainText() 返回多行文本框的文本内容
    setHtml() 设置多行文本框的内容为HTML文档,HTML文档是描述网页的
    toHtml() 返回多行文本框的HTML文档内容
    clear() 清除多行文本框的内容

    QTextEdit的使用

    from PyQt5.QtWidgets import QApplication,  QWidget ,  QTextEdit, QVBoxLayout , QPushButton
    import sys  
    
    class TextEditDemo(QWidget):
    	def __init__(self, parent=None):
    		super(TextEditDemo, self).__init__(parent)
    		self.setWindowTitle("QTextEdit 例子")
    		self.resize(300, 270)    
    		self.textEdit = QTextEdit( )      
    		self.btnPress1 = QPushButton("显示文本")
    		self.btnPress2 = QPushButton("显示HTML")        
    		layout = QVBoxLayout()
    		layout.addWidget(self.textEdit)
    		layout.addWidget(self.btnPress1)   
    		layout.addWidget(self.btnPress2)   		
    		self.setLayout(layout)
    		self.btnPress1.clicked.connect(self.btnPress1_Clicked)
    		self.btnPress2.clicked.connect(self.btnPress2_Clicked)
    		
    	def btnPress1_Clicked(self):
    		self.textEdit.setPlainText("Hello PyQt5!\n点击按钮")
    
    	def btnPress2_Clicked(self):
    		self.textEdit.setHtml("<font color='red' size='6'><red>Hello PyQt5!\n点击按钮。</font>")
    		
    if __name__ == "__main__":       
    	app = QApplication(sys.argv)
    	win = TextEditDemo()	
    	win.show()	
    	sys.exit(app.exec_())
    

    使用展示

    开始显示
    显示文本
    显示HTML

    后记

    可能暂时不能截动图展示了,暂时就这样吧。

    展开全文
  • 多行文本框

    2012-10-23 23:17:57
    这是一个基础的html文件,用来说明如何在网页上设置多行文本框
  • 表示单击会弹出对话框,单击后就会弹出一个简化的多行文字编辑器,功能非常简单,只有插入字段,设置上划线和下划线等简单功能,其实最重要的区别就是可以通过回车换行,而换行操作无法在对话框的文本框中直接完成。...
  • 一:什么是 HTML 中的多行文本框 textarea。 二:如何给多行文本框设置默认显示文本。 三:关于 HTML 中的文本框。
  • PyQt5之QTextEdit多行文本框

    千次阅读 2020-06-22 13:56:27
    PyQt5之QTextEdit多行文本框 QTextEdit类是一个多行文本框控件,可以显示多行文本内容,当文本内容超出控件显示范围时,可以显示水平个垂直滚动条。QTextEdit不仅可以显示文本还可以显示HTML...返回多行文本框HTML
  • python之Text 多行文本框

    千次阅读 2019-11-17 15:15:46
    Text(多行文本框)的主要用于显示多行文本,还可以显示网页链接, 图片, HTML 页面, 甚至 CSS 样式表,添加组件等。 因此,也常被当做简单的文本处理器、文本编辑器或者网 页浏览器来使用。 比如 IDLE 就是 Text 组件...
  • <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title> <style> .test{ width:5em; borde...
  • QTextEdit类是一个多行文本框控件,可以显示多行文本内容,当文本内容超出控件显示范围时,可以显示水平个垂直滚动条,Qtextedit不仅可以用来显示文本还可以用来显示HTML文档 QTextEdit类中常用的方法 方法 描述 ...
  • html input标签 单行文本框 多行文本框

    万次阅读 多人点赞 2018-12-22 18:43:24
    单行文本框 passworld 密码文本框 button 按钮 reset 重置按钮 image 图像形式的提交按钮 radio 单选按钮 checkbox 复选框 hidden 隐藏字段 file 文件上传 ...
  • pyqt5在多行文本框中加入图片

    千次阅读 2020-05-09 10:05:27
    官方文档明确指出 QTextEdit 支持多行文本框的内容为 HTML 文档。因此,我们可以靠HTML的方式往多行文本框中添加图片。 self.edit.append('<img src=d://Qt代码/c1.jpg>') 图片的本地位置可以自定义设置。 ....
  • 本文实例讲述了jQuery动态改变多行文本框高度的方法。分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>...
  • PyQt5之QtextEdit类中的常用方法和信号 一、QTextEdit类中的常用方法...设置多行文本框的内容为HTML文档。 toHtml(): 返回多行文本框HTML文档内容。 clear(): 清除多行文本框的内容。 二、QTextEd...
  • 这个是多行文本框,可以显示多行文本内容,文本超出范围后 ,可以显示垂直滚动条,除了显示文本,还可以显示HTML文档。 代码: # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import QApplication...
  • 下文讲述html元素textarea多行文本框中显示提示信息的方法分享,如下所示: 实现思路: 使用html元素的placeholder属性为元素设置“提示值” 例: <!doctype html> <html lang="en"> <head> <...
  • <!DOCTYPE html><meta charset="utf-8"><html>...多行文本框的高度变化</title> <script type="text/javascript" src="js/jquery.min.js"></script> <sty...
  • 可以显示多行文本内容,当文本内容超出控件显示范围时,可以显示水平个垂直滚动条,Qtextedit不仅可以用来显示文本还可以用来显示HTML文档QTextEdit类中常用的方法方法描述setPlainText()设置多行文本框的内容...
  • 可以显示多行文本内容,当文本内容超出控件显示范围时,可以显示水平个垂直滚动条,Qtextedit不仅可以用来显示文本还可以用来显示HTML文档QTextEdit类中常用的方法方法描述setPlainText()设置多行文本框的内容...
  • 多行文本框,应用的场景很多,比如: 软件的意见提交功能,把最近测试出现的问题总结下: 1. 多行文本框未进行字符类型的处理  ①HTML标签测试 <img src="images/logopic.jpg" width="170" height="184" border="0...
  • 以前写过一个验证多行文本框输入内容长度的正则表达式,今天要翻出来用,结果怎么想也想不起来了,于是打开工程不断尝试,结果皇天不负有心的我,得到正解: ^(.|\n){0,500}$ 赶紧记录一下,以免再忘 转载于:...
  • tkinter视窗开发之多行文本框Text部件 Text是tkinter类中提供的的一个多行文本区域,显示多行文本,可用来收集(或显示)用户输入的文字(类似 HTML 中的 textarea),格式化文本显示,允许你用不同的样式和属性来显示和...
  • ,而多行文本框直接使用HTML中的<textarea>标签。文本框是用来输入单行文本的,而多行文本框可以输入多行文本。 二:下拉列表框和列表框 下拉列表框也是直接使用的HTML中的<select>标签,直接双击元件...
  • js统计文本框剩余字数</title> <style type="text/css"> #area{ width: 300px; height: 300px; resize:none; } </style> </head> <body> <textarea autofocus id="area" ...
  • TextBox多行文本框内容自动换行

    千次阅读 2015-01-16 11:49:28
    多行文本框里面粘贴一串字符,这些字符会是一行,不能自动换行,就百度了下,很多分享的方法是CSS的DIV框内容自动换行的,在这段博文http://www.cnblogs.com/jams742003/archive/2011/06/13/2079428.html中的方法...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 601
精华内容 240
关键字:

html多行文本框