上海专业微信网站建设,flash网站的优点和缺点,网站 配色方案,大型电商网站开发项目标签的分类: 块级/行内
# 块级标签: 独占一行 h1~h6 p div 块儿级标签可以修改长宽. 行内标签不可以, 就算修改了也不会变化.块级标签内部可以嵌套任意的块级标签和行内标签. 特例: 是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签. 如…标签的分类: 块级/行内
# 块级标签: 独占一行 h1~h6 p div 块儿级标签可以修改长宽. 行内标签不可以, 就算修改了也不会变化.块级标签内部可以嵌套任意的块级标签和行内标签. 特例: 是p标签虽然是块级标签 但是它只能嵌套行内标签 不能嵌套块级标签. 如果你套了 问题也不大 因为浏览器会自动帮你解除嵌套关系(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
# 行内标签: 自身文本多大就占多大. i u s b span行内标签不能嵌套块级标签, 只能嵌套行内标签.
# 补充: 上述的规定只是HTML书写规范 如果你不遵循 不会报错 img标签
# 图片标签
img src altsrc 1.图片的路径 可以是本地的也可以是网上的2.url自动朝该url发送get请求获取数据alt这是我的前女友当图片加载不出来的时候 给图片的描述性信息title新垣结衣当鼠标悬浮到图片上之后 自动展示的提示信息height800px width高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
# 全称及缩写说明alt alter 替用(一般是图片显示不出的提示)
src Source 源文件链接a标签
# 链接标签
a href/a当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色浏览器给你记忆了
href1.放url用户点击就会跳转到该url页面2.放其他标签的id值 点击即可跳转到对应的标签位置target默认a标签是在当前页面完成跳转 _self你也可以修改为新建页面跳转 _blank# a标签的锚点功能
点击一个文本标题 页面自动跳转到标题对应的内容区域
a href idd1顶部/a
h1 idd4hello world/h1
div styleheight: 1800px; background: aliceblue/diva href idd2中间/a
div styleheight: 1800px; background: aqua/diva href idd3底部/a
div styleheight: 1800px; background: cadetblue/diva href#d1回到顶部/a
a href#d2回到中间/a
a href#d4回到hello world/a
# 全称及缩写说明Anchor /ˈæŋkə(r)/
Division /dɪˈvɪʒn/
a Anchor 锚(定义超链接用于从一张页面链接到另一张页面)
href hypertext reference 超文本引用
div Division 分隔列表标签 1. 无序列表
ul typediscli哈哈哈1/lili哈哈哈2/lili哈哈哈3/li
/ul
# type属性disc 实心圆点默认值
circle空心圆圈
square实心方块
none 无样式
# 全称及缩写说明ul Unordered List 不排序列表
li List Item 列表项目2. 有序列表
ol type1 start2li111/lili222/lili333/li
/ol
# type属性1 数字列表默认值
A 大写字母
a 小写字母
Ⅰ 大写罗马
ⅰ 小写罗马
# 全称及缩写说明ol Ordered List 排序列表
li List Item 列表项目3. 定义列表
dldt标题1/dtdd内容1/dddt标题1/dtdd内容1/dddt标题1/dtdd内容1/dd
/dl
# 全称及缩写说明Definition /ˌdefɪˈnɪʃn/
dl Definition List 定义列表
dt Definition Term 定义术语
dd Definition Description 定义描述表格标签
usernamepasswordhobbyothersjsaonreadegonDBJ吃生蚝tank摸鱼弹棉花
!--table border10 cellpadding5 cellspacing10--
table border10 !-- 加外边宽--!--表头: 存放字段信息--theadtr !--一个tr就表示一行--thusername/th !--加粗文本--tdpassword/td !--正常文本--thhobby/ththothers/th/tr/thead!--表单: 存放数据信息--tbodytrtdjason/td!--rowspan 合并行属性--td rowspan3123/td!--colspan 合并列属性(合并当前行的列)--td colspan2read/td/trtrtdegon/td!--td123/td--tdDBJ/tdtd吃生蚝/td/trtrtdtank/td!--td123/td--td摸鱼/tdtd弹棉花/td/tr/tbody
/table
创建流程 colspan 当前行中的列合并(水平方向占多行)
rowspan 合并多行属性(垂直方向占多行)table[border1](theadth)(tbodytrtdtd)
属性 border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.最好通过css来设置长宽
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列即合并单元格表单标签 1. 表单功能 表单用于向服务器传输数据从而实现用户与Web服务器的交互表单能够包含input系列标签比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、select、fieldset和 label标签。2. 表单属性
属性描述accept-charset规定在被提交表单中使用的字符集默认页面字符集action规定向何处提交表单的地址URL提交页面autocomplete规定浏览器应该自动完成表单默认开启enctype规定被提交数据的编码默认url-encodedmethod规定在提交表单时所用的 HTTP 方法默认GETname规定识别表单的名称对于 DOM 使用document.forms.namenovalidate规定浏览器不验证表单target规定 action 属性中地址的目标默认_self
几种重要的属性详解:
!--
form表单功能: 在该form标签内部书写的获取用户的数据都会被form标签提交到后端.
属性: action 控制数据提交到后端的路径(给哪个服务短提交数据)1. 什么都不写. 默认就是朝当前页面所在的ur1提交数据2. 写全路径: https//:www.baidu.com 朝百度服务端提交3. 只写路径后缀action/index/. 自动识别出当前服务端的ip和port拼接到前面. host:port/index/(暂时不考虑)属性: method 通过method指定提交请求的方式1. get: form表单默认提交数据的方式 是get请求 数据是直接放在url后面的. 以?分割URL和传输数据参数之间以相连如EditPosts.aspx?nametest1id123456.2. post: 把提交的数据放在HTTP包的请求体中(注意: 这里指定post, flask服务器才可以通过request.files,request.form获取文件,表单数据)提示: GET方式提交数据会带来安全问题比如一个登录页面通过GET方式提交数据时用户名和密码将出现在URL上如果页面可以被缓存或者其他人可以访问这台机器就可以从历史记录获得该用户的账号和密码.属性: enctypemultipart/form-data 指定数据提交的编码格式1. 默认是urlencoded 只能够提交普通的文本数据, 不能发送文件.2. form-data 就可以支持提交文件数据
-- 3. 表单元素
form actionhttp://127.0.0.1:5000/index/ methodpost enctypemultipart/form-datap!--label第一种写法: 直接将input框写在label内--label ford1!--username: input typetext idd1 disabled--!--username: input typetext idd1 value默认值--!--username: input typetext idd1 value默认值 readonly--username: input typetext idd1 placeholder请输入用户名 nameusername valuerootusername: input typetext idd1 placeholder请输入用户名 nameusername valueroot disabled/label/pp!--label第二种写法: 通过id链接即可 无序嵌套(补充: input不和label关联也可以)--label ford2password:/label!--input typetext idd2--input typepassword idd2 namepassword placeholder请输入用户密码 value123/pp!--你看不见我: input typehidden--input typehidden nameusernamename value骗子账户/pplabel ford3birthday: input typedate idd3 namebirthday/label/ppgender:label ford4input idd4 typeradio namegender valuemale checked 男/labelinput typeradio namegender valuefemale 女input typeradio namegender valueother 其他/pphobby:input typecheckbox namehobby valueread readinput typecheckbox namehobby valueDBJ checked DBJinput typecheckbox namehobby valueJBD checked JBDinput typecheckbox namehobby valueHeCha HeCha/ppprovince:select nameprovince idoption valueShanghai上海/optionoption valueBeijing selected北京/optionoption valueShenzhen深圳/option/select/p p前女友:!--select nameex-girlfriend id--select nameex-girlfriend id multipleoption valuexxxxxx/optionoption valueyyy selectedyyy/optionoption valueuuu selecteduuu/option/select/ppprovince1:select nameprovince1 idoptgroup label上海option valuePudong浦东/optionoption valuePuxi selected浦西/optionoption valuePuNa selected浦南/option/optgroupoptgroup label北京option valueTian An Men天安门/optionoption valueThe gates地安门/optionoption valueWhen the door中安门/option/optgroupoptgroup label深圳option valueFoxconn富士康/optionoption valueFuji bad富士坏/optionoption valueFuji in富士中/option/optgroup/select/pp文件: input typefile multiple namemyfile!--文件: input typefile namemyfile--/pp!--12345678901234567890--!--自我介绍: textarea nameself-introduction id cols30 rows10/textarea--自我介绍: textarea nameinfo id cols30 rows10 maxlength20 placeholder请简单的介绍自己不多余20个字!/textarea/pp!--当你没有指定按钮的value属性的值, 不同的浏览器打开之后可能宣染的按钮展示的文本内容不一致--input typesubmit value注 册input typebutton value按 钮input typereset value重 置button按 钮/button/p/form 4. 使用Flask验证表单提交数据
from flask import Flask
from flask import requestapp Flask(__name__)# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持get请求
app.route(/index/, methods[GET, POST])
def index():print(request.form) # 获取form表单提交过来的非文件数据ImmutableMultiDict([(username, root), (password, 123), ...])print(request.files) # 获取文件数据ImmutableMultiDict([(myfile, FileStorage: 图片1.png (image/png)),])file_obj request.files.get(myfile) # 通过get表单标签中的file标签中定义的name属性的值myfile获取到文件对象# print(file_obj.name:, file_obj.name) # 获取文件名print(file_obj.filename:, file_obj.filename) # 获取文件名.后缀if file_obj:file_obj.save(file_obj.filename) # 保存文件对象到当前目录下(.filename以当前文件名.后缀保存)return OKapp.run() 5. 总结
# 标签分类:块级标签: form行内标签: label, input, textarea, select, option, optgroup# form种所有标签共用属性:name 提交到后端的key.value 提交到后端的value. 文本框标签可以不指定, 通过获取用户输入的内容就是value. 选选框类型等都需要自己指定value值.(特例: 如果是按钮类型就仅仅是显示按钮的展示文本)disabled 禁用.# 文本框类型共用属性: (文本框类型包括: 普通文本,密文文本, 文本域)readonly 只读placeholder 提示占位符maxlength 最大输入长度# 选框类型共用属性: (选框类型包括: 单选框, 多选框, 文件选框, 下拉选框单选框, 下拉多选框, 下拉选项组选框)文件选框多选, 下拉多选框: multiple单/多选框默认选中: checked下拉系列默认选中: selected(需先为select标签指定multiple属性)# 提示: 除了按钮没有必要指定label其他标签都可以被label包裹.label第一种写法: 直接将input框写在label内label第二种写法: 通过id链接即可 无序嵌套(补充: input不和label关联也可以)# input标签:text 普通文本input[typetext][name]password 密文文本input[typepassword][name]date 提供时间日期选择input[typedate][name][value]提示: 当你没有指定按钮的value属性的值, 不同的浏览器打开之后可能宣染的按钮展示的文本内容不一致submit 提交按钮. 用来触发form表单提交数据的动作input[typesubmit][value]button 普通按钮. 本身没有任何的功能, 但是它是最有用的, 学完js之后就可以给它自定义各种功能input[typebutton][value]reset 重置按钮. 重置input[typereset][value]radio 单选框 默认选中要加checkedchecked, 当标签的属性名和属性值一样的时候可以简写成checked(注意: 每个单选框都需要为指定相同的name属性的值, 才能达到单选的目的)input[typeradio][name][value]checkbox 多选框input[typecheckbox][name][value]file 获取文件.input[typefile][name][value]hidden 隐藏当前input框. 只是不显示在页面中, 后台还存在着.(钓鱼网站)input[hidden][name][value]# textarea文本域标签textarea[name]# button 按钮标签button[name][value]# select标签:下拉单选select[name]option[value]下拉多选:select[name][multiple]option[value]下拉选项组单选select[name](optgroup[label]option[value])(optgroup[label]option[value])下拉选项组多选select[name][multiple](optgroup[label]option[value])(optgroup[label]option[value])!!!注意!!!: 触发form表单提交功能的按钮有2种: button input[typesubmit] CSS介绍 CSSCascading Style Sheet层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表它就会按照这个样式表来对文档进行格式化渲染 CSS语法 1. 注释
注释是代码之母
/*单行注释*//*
多行注释1
多行注释2
多行注释3
*/通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
... 2. CSS样式组成
每个CSS样式由两个组成部分选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束 选择器 {属性1:值1;属性2:值2;属性3:值3;属性4:值4;
} CSS的三种引入方式
/*1. style标签内部直接书写*/
styleh1 {color: burlywood;}
/style/*2. link标签引入外部css文件(最正规的方式 解耦合)*/
link relstylesheet hrefmycss.css/*3. 行内式(一般不用)*/
h1 stylecolor: green老板好 要上课吗?/h1 CSS选择器 1. 基本选择器
注意样式类名不要用数字开头有的浏览器不认。标签中的class属性如果有多个要用空格分隔。
/*id选择器: 找到id是d1的标签 将文本颜色变成绿黄色*/
#d1 {color: greenyellow;
}/*类选择器: 找到class值里面包含c1的标签*/
.c1 {color: red;
}/*元素(标签)选择器: 找到所有的span标签*/
span {color: red;
}/*通配符选择器: 将html页面上所有的标签全部找到*/
* {color: green;
}
示例代码
div idd1 classc1 c2divpdiv里面得p/pspandiv里面得span/span
/divp idd2 classc1 c2ppp/p
span idd3 classc2span111/span
span idd4 classc3span222/span 2. 组合选择器
/*后代选择器: 所有被div包裹的标签中的span*/
div span {color: red;
}/*儿子选择器: 被div包裹的第一层所有的span标签*/
divspan {color: red
}/*毗邻选择器: div同级别紧挨着的下面的第一个span*/
divspan {color: green;
}/*弟弟选择器: div同级别下面所有的span*/
div~span {color: navajowhite;
}
示例代码
spanspan1/span
spanspan2/span
divdivpdiv p/ppdiv pspandiv p span/span/pspanspan/spanspanspan/span
/div
spanspan/span
spanspan/span
