时间:2018/12/27
其效果如下图所示:
总结用到的技术点:
标题标签:<h>
粗体标签: <strong>
斜体标签: <i>
下划线标签: <u> <ins>
删除线标签:<s> <del>同样可以实现该功能
段落标签<p>
在p标签中的文本会自动换行，不在p标签中的，不会自动换行
粗体<b> <strong>都可以实现 加粗的效果
区别：
b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容
推荐使用strong
斜体:
<i>和<em>都可以表示斜体效果 区别：
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性
em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用
另外标签同样可嵌套使用.
预格式:
有时候，需要在网页上显示代码，比如java代码
就需要用到pre
<p>这里是没有用预格式的情况：</p>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
<br/>
<br/>
<p>使用预格式的情况:</p>
<pre>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</pre>
而其显示效果是这样的
这里是没有用预格式的情况：
public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World"); } }
使用预格式的情况:
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}删除标签:
<del> 即使delete的意思 当然<s>同样可以实现相同的效果 不推荐使用因为 HTML并不鼓励使用 部分浏览器并不支持
下划线:
<ins> <u>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
图像列表表格的设计
具体实现效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>德玛西亚之力 陈飞</title>
</head>
<body>
<table border="1" width="800px">
<tr bgcolor="#a9a9a9">
<td><strong>技能名</strong></td>
<td><strong>触发</strong></td>
<td><strong>技能属性</strong></td>
<td><strong>技能效果</strong></td>
<td>图标</td>
</tr>
<tr>
<td><b>坚韧</b></td>
<td><b>被动</b></td>
<td colspan="2">盖伦如果在9秒内不受到任何伤害,之后的每秒都会回复自己最大生命值的<br>0.4%.小兵的伤害不会中断坚韧效果</td>
<td><img src="images/skill1.png"> </td>
</tr>
<tr>
<td><b>致命打击</b></td>
<td><b>Q</b></td>
<td>冷却时间: 8</td>
<td>盖伦移除身上所有减速效果，并获得30%移动速度加成，持续1.5/2/2.5/3/3.5秒。<br>在接下来的4.5秒内，他的下次普通攻击会造成30/55/80/105/130(+1.4AD)物理伤害，并沉默目标1.5秒</td>
<td><img src="images/skill2.png"> </td>
</tr>
<tr>
<td><b>勇气</b></td>
<td><b>W</b></td>
<td>冷却 : 24/23<br>/22/21/20</td>
<td><b>被动</b>：击杀一个单位会永久提供0.25护甲和魔法抗性加成，最大致：30<br>
<b>主动</b>：盖伦获得一个持续2/3/4/5/6秒的防御护盾，减少即将到来的30%伤害。
</td>
<td><img src="images/skill3.png"> </td>
</tr>
<tr>
<td><b>审判</b></td>
<td><b>E</b></td>
<td>冷却: 9</td>
<td>盖伦快速地旋舞大剑，持续3秒，在持续期间对周围敌人总共造成物理伤害——14/18/22/26/30加上他总攻击力的34/35/36/36/38%,
5次（英雄每升3级加1次）。<br />E【审判】会在攻击单个敌人时造成33%额外伤害。<br />取消E【审判】会返还相当于剩余持续时长的冷却时间。<br />
E【审判】可以暴击，并造成额外伤害。</td>
<td><img src="images/skill4.png"/></td>
</tr>
<tr>
<td><b>德玛西亚正义</b></td>
<td><b>R</b></td>
<td>冷却: 120/100<br>/80</td>
<td><b>被动</b>：最近获得最多击杀数的敌人会成为<b>大反派</b>。盖伦的E【审判】和普攻会对<b>大反派</b>造成额外真实伤害，伤害值为<b>大反派</b>1%的最大生命值。</td>
<td><img src="images/skill5.png"/></td>
</tr>
</table>
</body>
</html>其中 colspan 是合并单元格的标签 border=“1” 是表格边界距离 在<img>中引用文件的时候 当前文件夹下不必添加/ 斜杠线。
如果是本地文件，只需把图片放在同一个目录下即可
src直接使用文件名，不需要/
如果图片在上级目录的话， 则只需要填写 ../ 即可返回上级目录.
其他目录图像的话：
src使用图片所在的绝对路径，并在前面加上file://
如file:// c:/example.gif
设置图像的大小. <img width=" “ height=” “>
img不能够自己居中，需要放在其他能够居中的标签中实现这个效果，比如h1标签,p标签.
经常采用的手段是放在div中居中
表格：
边界border 以及表格的 rowspan合并行 合并的是tr colspan合并的是td列
列表：
<ul> 和 <ol> 有序无序的标签 其中的区别是 unorderList
块元素：
div 和span标签 div标签是块元素 会自动换行 而span是内联元素 不会自动换行
Font字体：
size=“+2” “-2” 是根据默认的字体大小增大或者缩小。
内联框架：
<iframe>
文本框：
<input type="text" size="50px" placeholder="请输入账号" >
<br>
<br>
<input type="text" size="50px" value="带默认值的文本框">
<br>
<br>
<input type="password" placeholder="请输入密码">-->placeholder是提示默认
form表单：
关于method = get和post的区别
get和post的区别
get
是form默认的提交方式
如果通过一个超链访问某个地址，是get方式
如果在地址栏直接输入某个地址，是get方式
提交数据会在浏览器显示出来
不可以用于提交二进制数据，比如上传文件
post
必须在form上通过 method="post" 显示指定
提交数据不会在浏览器显示出来
可以用于提交二进制数据，比如上传文件
单选框:
今天晚上学习什么？
<br>
java<input type="radio" name="select">
<br>
C++<input type="radio" name="select" checked="checked">效果：
分组的话用同一个name 则只会同一时间选择一个选项。 另外checked属性的默认选择
另外 value属性也要设置 在得到该单选框选择的值时会用到
复选框：
type=“checkbox” 其中没有分组的概念 因为复选本身就是多选的
下拉选择框：
<select size="2" multiple="multiple">
<option>苍井空</option>
<option>小泽玛利亚</option>
<option>波多野结衣</option>
</select>multiple的意思是 可以使用ctrl或者shift来选择多个选择。 size 设置下拉框的大小显示数目
selected=”selected“ 是默认选择属性
文本域：
标签<textarea> 可以设置cols 和rows属性
<textarea cols="30" rows="8">
abcaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
def
dsad
dsad
sad
sad
sa
</textarea>
普通按钮(button）：
普通按钮不能进行提交。
提交按钮(submit):
重置按钮(reset):
图像按钮的提交：
<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="image" src="http://how2j.cn/example.gif">
<input type="reset">
</form>在设置input标签中 type=image 可以设置图像的提交 1
扫一扫
1201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
