文章目录
一、HTML5 (HBuilder软件)
web前端——1——>html4和html5常用标签——>表单标签,视频音频标签,超链接标签,有序无序标签,盒子模型
——2——>css和css3
——3——>JavaScript——>DOM,BOM
——4——>jQuery——>jQuery选择器和常用方法
超文本标记语言,弱语言,1989被研制出来
开发工具可以考虑 HBuilder
注释 Ctrl+shift+/ < !-- -->
< meta charset=‘‘utf-8’’ / >
水平分隔符线 < hr/>
< strong> 标签会使字体加粗,即使分两行写也不会换行
< em>斜体
标签可嵌套
二、表单标签
1.注释(ctrl+shift+/)
<!-- -->
2.弱语言(小错误不报错)
<meta charset="utf-8" />
标题标签h1~h6,字体加粗,独占一行
水平分隔符(一条线)<hr / >
加粗标签< strong >不换行
斜体< em >
图片标签< img src=“摸头.gif”/ > 不换行
换行标签< br />
段落标签 < p > 换行且有间距
视频标签 < video src=“aaa.mp4” > 此时只有一个视频框而没有暂停播放音量,需添加属性来控制 controls=“controls”
音频标签 < audio src=“22.mp3”>
< marquee direction=“up">滚动的公告向上</ marquee >,down则向下
还可以添加width=“400px",height ,behavior=”slide“会使滚动最终禁止,scroll会使循环,alternate会使在范围内反弹
3.表单标签
input、select、textarea
<input />
<input type="date"/>
出现一个文本框,
属性有 type取值可以
》date为年月日
》datetime-local为年月日时间
》text 为纯文本输入
》password 可以将密码隐藏
网页的空格可以用  进行 表示
》file 为文件上传
》radio为单选,点击即可选择,如果只能选一个则将两边增加 name属性,使两边name属性的值一样
》placeholder 属性为提示信息,则input框中有提示信息,如“请输入3位数字”
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
》按钮的值为button,还需要增加value属性及值显示内容
submit,reset
注意:input的value值为默认,submit的value值显示在按钮上可跳转页面
常用< form>标签套< input > 标签进行组合,type为reset表示重置
form标签的action属性可以设置值为跳转网页,method属性=“get”进行请求
method属性有两种请求(跳转到另一个地址,带参数的请求)
get请求:会将用户输入的数据直接显示在地址栏上
post请求:发送的数据以某种加密形式,不在地址上显示(敏感信息)
在input的name属性="a"时,跳转页面保存的key值为type属性的”text“文本等等同理
disabled=“disabled”表示禁用
<input type="button" value="登录">
中间标签 < center > < center/>
》checkbox 复选框
》color 选颜色
select表单标签,常用于组合标签,
在select中添加属性multiple=“multiple”
<select>
<option>选项1</option>
<option>选项2</option>
</select>
下拉选项的菜单
如果想刷新就默认选中,则在option那添加属性 selected=“selected”
textarea 为文本框标签(留言板)
文本域标签中,rows=“高度”,cols=‘宽度“,宽度高度填数字,固定高度宽度,超数则自适应出现滚动条
三、正则表达式(RegexTool工具)
将输入框的提示信息进行限制,比如字符为中文三个
在input标签中的pattern属性=正则表达式,required=“required”(会提示不能为空还有填写为符合要求的内容)
在input里面有邮箱类型type=“email”可以直接限制邮箱格式
四、正则破解
1在网页中可以右键选择“审查元素”,然后通过点击edit进行编辑,则可以改变元素的现在要求(如必须输入2位中文)----发生一次性破坏
2表单元素进行编号的只读状态则在< input>标签中增加属性readonly=“readonly”
3当form和input组合时,可以将input的内容提交过去,但是其他提交不了
type="hidden" 表示不显示在网页的进行提交name和value(即展示给程序员看)
五、超链接标签和有序无序标签
提交和超链接都可以将网页跳转,但提交是按钮,超链接可以是文字。
<a href="www"></a> 点击后会有不一样颜色,在原来网页位置打开
href属性:存放URL地址
target属性 为值 "_blank" 时则会在点击a标签时重新打开新的窗口
默认值为"_self" 时则在当前窗口打开
无序标签ul里面的li为小黑圆点
有序标签ol里面的li为顺序123…
快捷键
1、ul>li{中国}*3 然后按tab键 则出现三次中国的无序
六、表格标签
每一个方格用一个td表示,tr表示一行,所有行构成一个table
即table表格里有多个tr行,每个tr行有多个td
初始table没有颜色,需要进行table里面的border属性设置颜色=“1px” 即线框的粗细
width属性进行宽度设定
小方格之间去掉间隙则用 cellspacing="0px"
用< center> 将table标签整个包含,则可以进行 居中
表头可以用 < th > 标签,即将< td> 标签进行加粗居中
还有另一种表示方式,就是把表头放入< thead> 标签中作为头部,把下面每一行放入< tbody> 标签中,表示数据部分
在td标签中可以通过align属性=“center或left或right”进行居中,左,右对齐(同一属性属于就近原则)
七、表格行与列合并
cellpadding属性:指定单元格之间的填充距离(即内边距)
table>(tr>td*2)*3 表示三行两列的表格
在table后面加{}则表示添加内容,加[]则表示添加属性
左右两个td进行合并则,在第一个td里添加属性colspan=“2”,然后删去第二个td
将上下两行合并,则用属性rowspan=“2”写在第一行的td里,删去第二行对应的td
多个< br> 可以使得换行的间隙增加
input的type类型属性为CheckBox表示复选框,添加checked=“checked”进行默认选中
八、frameset(仅用于布局)
ol>(li>a[href=#]{潇洒走一回})*6
指的是ol有序标签有6个li标签,每个标签有个a标签,href是属性,潇洒走一回是内容
frame标签不能独立存在,可拖动将屏幕分开,frame需放在frameset里面
横向切 rows=“20%,*” 分上下
纵向切 cols=“20%,*” 分左右
“先横后竖”进行划分
<frameset>
<frameset> <frame /> </frameset> 包含关系
<frame />有结束标记
如果需要加内容,需要单独写一个网页
然后把有内容的网页引入布局的网页
<frame src="dingbu.html"/>
©表示版权符号
九、字体标签
特殊符号
空格
版权符号 ©
小于号 <
大于号 >
如果输入3<4则会在网页输出3<4
font标签
字体大小属性size,单位为px,可表示为 size=“60px”
字体颜色属性color,指令可以为单词、#244形式、
十、table布局
简写技巧
table【border=1】【cellspacing=0px]>(tr>td*3)*1
表示
<table border="1" cellspacing="0px">
<tr> 行
<td></td> 列
<td></td>
<td></td>
</tr>
cellpadding可以调整table的内边距