web笔记


框架

标签

1
2
3
4
5
6
标签
文字加下划线<u></u>
文字倾斜<i></i>
文字加粗<b></b>
下小标<sub></sub>
上小标<sup></sup>

文本分布

1
2
3
4
5
6
7
8
9
有序<ol> 表示有序号 无序<ul>表示没有序号
序列格式
<ol type="">在引号里面写类型
<li>想要写的文字</li>
<li>想要写的文字</li>
</ol>
<ul>
<li>想要写的文字</li>
<li>想要写的文字</li>

1
2
3
4
5
6
7
8
9
10
<ul type="">
预排版标记<pre>在这里面空格也可以显示
格式
<pre>
文字文字

文字
</pre>
<hr >表示水平分隔线
<hr color="" size="" width="">表示分隔线的颜色粗细长度 长度可以用百分比也可用数字

滚动属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
marquee标签说明
direction滚动方向 :
left左滚动
right右滚动
up上滚动
down下滚动
behavior移动方式
scroll循环移动默认
slide只移动一个回合
alternate来回移动
scrollamount移动速度
数值取整数整数越大速度越快
loop循环
bgcolor底色
scrolldelay延时 数值单位是毫秒 1秒等于1000毫秒
width 宽度
height 高度



<marquee direction="移动方向" behavior="移动方式" scrollamount="移动速度" scrolldelay="延时"></marquee>
<video width="宽" height="高" src="视频的地址"controls="controls"这个必须要加> </video>视频标签
<audio src="" controls="controls"都必须要加不加显示不出来> </audio>音频标签
src是视频的地址
controls是用来向用户显示控件,比如像播放按钮
loop属性是当媒介文件播放后再次开始播放
width与height表示宽和高
画布标签<canvas id="" width="" height="" ></canvas>
表格标签 colspan代表跨多少列 rowspan代表跨行一般都写在td中
<table border="设置表格框尺寸大小" cellspacing="" cellpadding="">
<tr><td>Header</td></tr>一个tr代表一行td中代表写入的内容
<tr><td>Data</td></tr>第二个tr代表第二行td中写内容
</table>
<table ></table>中嵌套:
width="宽" height="高" border="表格边框" bordercolor="设置边框的颜色" border="边框的厚度" cellpadding="单元格的高度填充" cellspacing="每个单元格的间距" bgcolor="表格的背景颜色"
<table></table>中有<caption></caption>设置表格的标题
<th></th><tr></tr>差不多只不过<th></th>加粗字体


form标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				<input type="写类型" value="定义名字给自己看用户看不了" maxlength="这里写最多写入的字数"
size="表示表格的长度"/>
</form>
<form action=""></form>中还有
多行文本框
<textarea rows="列" cols="行">可写可不写 可让用户输入</textarea>
下拉列表格式
<select name="下拉列表名字">
<option value="下拉列表的值"selected="selected"这个表示默认被选中的一项>这里写自己想写的内容</option>
</select>
<input type="写复选框" name="复选框名字" id="" value="复选框值" />
<input type="元素类型" name="控件的名称" id="" value="控件的初始值" checked="checked"控件是否被选中 maxlength="最多字符" size="初始宽度"/>
<a href="填网址">填文字点击直接跳转</a>
<head>
<meta charset="utf-8"/>
<title></title>
在css中做的美化为了压缩代码直接美化制作的网页
<link rel="stylesheet" type="text/css" href="填css的名称"/>

类型有

1
2
3
4
5
6
7

text 单行文本输入框
password 密码框
radio 单选框 比如男和女只能选一个
checkbox 复选框比如选多个
reset 重置按钮
submit 提交按钮

css基本语法

  1. 选择器{样式属性:属性值;样式属性:取值;}

内部样式表

表示直接在标签内部写样式

1
<p style="">...........</p>

类选择器

在标签中加入class类型

………..

ID选择器

1
<p id="id"></p>

包含选择器

1
<p>文字文字<em>文字文字</em>文字文字</p>

子选择器

1
2
<h2>文字文字<strong>文字文字</strong>文字文字</h2>
<h3>文字文字<strong>文字文字</strong>文字文字</h3>

相邻兄弟选择器

1
2
3
4
5
6
7
8
9
10
<p>
<ul type="square">
<li>文字</li>
<li>文字</li>
</ul>
<ol type="1">
<li></li>
<li>文字</li>
</ol>
</p>

元素选择器

1
2
<h1>文字</h1>
<p>文字</p>

群组选择器

1
2
3
<h1>文字</h1>
<h3>文字</h3>
<p>文字</p> h1 h3 p所使用的都是一样的

通配选择器

在css中代表的是所有,即统配选择器

文字


文字文字文字



文字文字文字


1
<h4>文字</h4>

网页的美化a标签

1
2
3
<a href="网页">文字</a>
网页中可以写在同一个文件夹的名称也可以写网址
文字中写名称就是点击回转跳的名称

图片美化功能

1
2
3
<img class="img1" src="图片路径" >
<img class="img2" src="图片路径" >
<img class="img3" src="图片路径" >

css美化给背景颜色改为图片

1
<h1 class="imgs">文字文字</h1>

美化网页边框

评论
评论
  目录