HTML中body内常用标签
基本标签 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除<s/> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <br>---换行 <hr>---水平线
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>基本标签</title> </head> <body><h1>标题1</h1><!标题1----><h2>标题2</h2><!标题2----><h3>标题3</h3><!标题3----><h4>标题4</h4><!标题4----><h5>标题5</h5><!标题5----><h6>标题6</h6><!标题6----><b>加粗</b><!加粗----><br><i>斜体</i><!斜体----><br><u>下划线</u><!下划线----><br><s>删除</s><!删除----><hr><!水平线----> </body> </html>
基本标签
特殊字符 空格 > > < < & & ¥ ¥ 版权 © 注册 ®
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>特殊标签</title> </head> <body><p>空 格</p><!空格符---->1<2<!小于号----><br><! 换行--->0>1<!大于号----><br>&<!&号----><br>©<!版权号----><br>®<!注册号----><br>¥<!人民币符号----> </body> </html>
特殊标签
div标签和span标签 div标签用来定义一个块级元素,并没有实际的意义。主要通过CSS样式为其赋予不同的表演。 span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表演。 块级元素与行内元素的区别: 所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。 这两个元素是专门为定义CSS样式而生的 注意: 关于标签的嵌套通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。 p标签不能包含块级标签,p标签也不能包含p标签。 <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)"> a标签 超链接标签 所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。 ==== url 什么是url? url是统一资源定位器的缩写,也被称为网页地址,是因特网上标准的资源的地址。 url地址由4部分组成 第一部分:为协议:http:// 、 ftp://等 第二部分:为站点地址:可以是域名或IP地址 第三部分:为页面在站点中的目录:stu 第四部分:为页面名称,例如 index.html 各部分之间用 / 符号隔开 <a href="url" target="_blank">文本内容</a> href属性指定目标网页地址。该地址可以有几种类型: 1.绝对URL 指向另一个站点 2.相对URL 指当前站点中确切的路径 3.锚URL 指向页面中的锚 target 1._blank表示在新标签页中打开目标网页 2._self表示在当前标签页中打开目标网页 列表 无序列表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>无序列表</title> </head> <body><ul type="disc"><li>第一项</li><li>第二项</li><li>第三项</li></ul><ul type="circle"><li>第一项</li><li>第二项</li><li>第三项</li></ul><ul type="square"><li>第一项</li><li>第二项</li><li>第三项</li></ul><ul type="none"><li>第一项</li><li>第二项</li><li>第三项</li></ul> </body> </html>
无序列表
type属性 disc(实心圆点,默认值) circle(空心圆圈) square(实心方块) none(无样式) 有序列表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>有序列表</title> </head> <body><ol type="1"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol type="A"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol type="a"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol type="I"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol type="i"><li>第一项</li><li>第二项</li><li>第三项</li></ol> </body> </html>
有序列表
type属性 1数字列表,默认值 A大写字母 a小写字母 I大写罗马 i小写罗马 标题列表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>标题列表</title> </head> <body> <dl><dt>标题1</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd><dt>标题2</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd> </dl> </body> </html>
标题列表
表格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格</title> </head> <body><table border="1" cellspacing="2" cellpadding="2" ><thead><tr><th>序号</th><th>姓名</th><th>爱好</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>睡觉</td></tr><tr><td>2</td><td>李四</td><td></td></tr></tbody></table> </body> </html>
表格
表格是一个二维数据空间,一个表格由若干个行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其他的表格等内容。 表格最重要的目的是显示表格类数据。表格类数据是指最合适组织为表格格式(即按行和列组织)的数据。 属性 border:表格边框 cellpadding:内边框 cellspacing:外边框 width:像素 百分比(最高通过CSS来设置长宽) rowspan:单元格竖跨多少行 colspan:单元格横跨多少列(即合并单元格)form 功能: 表单用于向服务器传输数据,从而实现用户与web服务器的交互 表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含textarea、select、fieldset和label标签 表单属性 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集) action 规定向何处提交表单的地址(URL)(提交页面)。 autocomplete 规定浏览器应该自动完成表单(默认:开启)。 enctype 规定被提交数据的编码(默认:url-encoded)。 method 规定在提交表单时所用的HTTP方法(默认:GET)。 name 规定识别表单的名称(对于 DOM使用:document.form.name)。 novalidate 规定浏览器不验证表单 target 规定action属性中地址的目标(默认:_self)。 <input>元素会根据不同的type属性,变化为多种形态。 text 单行输入文本 <input type="text"/> password 密码输入框 <input type="password"/> date 日期输入框 <input type="date"/> checkbox 复选框 <input type="checkbox" checked="checked"/> radio 单选框 <input type="radio"/> submit 提交按钮 <input type="submit" value="提交"> reset 重置按钮 <input type="reset" value="重置"> button 普通按钮 <input type="button" value="普通按钮"> hidden 隐藏输入框 <input type="hidden"> file 文本选择框 <input type="file"> 属性: name :表单提交时的'键',注意和id的区别 value:表单提交对应项的值 type='button','reset','submit'时,为按钮上显示的文本的内容 type='text','password','hidden'时,为输入框的初始化 type='checkbox','radio','file',为输入相关联的值 checked:radio和checkbox默认被选中的项 readonly:text和password设置只读 disabled:所有input均适用select标签 属性 multiple:布尔属性,设置后为多选,否则默认单选 disabled:禁用 selected:默认选中该项 value:定义提交时的选项值label标签定义:<label>标签为input元素定义标签(标记)说明: 1.label元素不会向用户呈现任何特殊效果。 2.<label>标签的for属性值应当与相关元素的id属性值相同。textarea多行文本 属性说明: name:名称 rows:行数 cols:列数 disabled:禁用form表单注意事项: action method默认是get enctype数据编码格式 form表单获取用户输入的标签都必须有name属性 form提交数据必须借助于input标签type类型等于submit按钮才能触发提交效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>注册表单</title> </head> <body> <form action="http://127.0.0.1:5000/reg" method="post" enctype="multipart/form-data"><p><label for="l1">username:<input type="text" id="l1" name="username"></label></p><p><label for="l2">password:<input type="password" id="l2" name="password"></label></p><p><label for="">gender:<input type="radio" name="gender" value="0" checked>男<input type="radio" name="gender" value="1" >女</label></p><p><label for="">hobby:<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="volleyball">排球</label></p><p><label for="">birthday:<input type="date" name="birthday"></label></p><p>省市:<select name="provinces" id=""><option value="sh">上海</option><option value="bj">北京</option><option value="sz">苏州</option></select></p><p>市区:<select name="city" id=""><optgroup label="上海"><option value="hp">黄浦区</option><option value="ja">静安区</option><option value="pd">浦东区</option></optgroup><optgroup label="苏州"><option value="wz">吴中区</option><option value="xc">相城区</option><option value="gs">姑苏区</option></optgroup></select></p><p>自我介绍:<textarea name="self_introduction" id="" cols="30" rows="10"></textarea></p><p>上传文件:<input type="file" name="my_file"></p><p><input type="submit" value="注册"><input type="reset" value="重置"><input type="button" value="按钮"></p> </form> </body> </html>
注册表单
from flask import Flask, request, redirect# 实例化flask对象 app = Flask(__name__)# 定义项目路由 @app.route('/reg', methods=['GET', 'POST']) def reg():print(request.form)print(request.files)obj = request.files['my_file']obj.save('a.txt')return '收到了!'if __name__ == '__main__':app.run()
flask
转载于:https://www.cnblogs.com/ShenJunHui6/p/10638516.html
HTML中body内常用标签相关推荐
- 前端入门教程(四)head内常用标签与body内常用标签
一 head内常用标签 1.meta相关标签 #1.指定字符集 <meta charset="gbk">#2.页面描述 <meta name="Desc ...
- head/body内常用标签
head常用标签 #网页标题 <title></title> #定义内部样式表,用于书写css代码 <style></style> #内部用来书写js代 ...
- 前端学习笔记之HTML body内常用标签
阅读目录 一 HTML语义化 二 字符实体 三 h系列标签 四 p标签 五 img标签 六 a标签 七 列表标签 八 table标签 九 form标签 一 HTML语义化 body中的标签是会显示到浏 ...
- thymeleaf中的th:常用标签
th: 的常用标签 关键字 功能介绍 案例 th:id 替换id <input th:id="'xxx' + ${col ...
- 初始html(常用标签)
今天我们来学习Web前端的一些知识,这一阶段需要记忆的东西相对来说比较多,需要花时间记忆以及做好练习. 一.HTML初识 1.web服务本质 import socketdef main():sock ...
- html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构 网页的内容 二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
- 全端开发——html简介与常用标签
1.html是什么? •超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 •浏览器按顺序渲染网页文件 ...
- week9 day1 HTML简介和常用标签
week9 day1 HTML简介和常用标签 一.前端内容介绍 二.HTML简介 2.1 HTML简介 2.2 HTML发展史 三.HTML标签与文档结构 3.1 HTML标签与文档结构 3.2 HT ...
- 前端基础----html初识、常用标签
一.HTML初识 web服务本质 import socketdef main():sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)soc ...
最新文章
- 3星|《财经》年刊:各行业专家学者的现状分析与短期预测
- 教程是php手工注入
- Android获取系统应用及安装应用的权限列表
- hibernate映射之多对多双向
- spring boot基础教程:入门程序Hello World的编写
- wps怎么转成pdf?只需六步的转换方法
- EF 实现自定义数据库字符串
- linux系统下如何使用U盘、光盘、软盘?如何挂载U盘,光盘镜像?
- 2020年创业公司到底过得怎么样?数据分析来为你揭晓
- 获取Android Studio的Sha1
- systemctl的使用
- word 与 endnote 反应慢的小技巧
- Linux下使用Shell命令控制任务Jobs执行、Linux后台进程管理以及ctrl+z
- 如何将word文档转换成txt记事本格式?
- 针对安卓APP的 OCR图片识别技术研究与 DEMO
- edge浏览器,无法继续下载,提示检测到病毒的问题
- linux wipe命令,如何使用wipefs命令擦除磁盘上的签名
- mac mini 蓝牙_Mac Mini
- 为什么定义补码等于反码加一,知其所以然
- python 函数式编程包_Python——详解函数式编程与闭包
热门文章
- python generator转为list_Python中的 List Comprehension 以及 Generator
- python123第四章第五题_Python123
- java+基于dom4j工具类_基于dom4j的xml映射实体的工具类(java)
- 新建oracle数据库 环境查询,Oracle单实例数据库迁移到Oracle RAC 环境之(2)--实施篇...
- 设置java路径_关于java路径设置
- c# 以太坊代币_C代币
- 百家与g对比oogle_如何在Java Web应用程序中集成G​​oogle reCAPTCHA
- struts的action访问servlet的IOC方式与非IOC方式
- 41.D3D数学库 GameProject7
- 如何用四个简单的步骤加速 LibreOffice