参考实例:http://www.runoob.com/html/html-examples.html
标签列表(字母排序):http://www.runoob.com/tags/html-reference.html
标签列表(功能排序):http://www.runoob.com/tags/ref-byfunc.html
在线工具:https://c.runoob.com/front-end/61
html写出来的是展现在人们眼前的东西,也就是前端。只要工作涉及web开发就需要学,当然html超级好学(基础)。
开始用的是Adobe Dreamweaver CC 2018:http://bigsoft.zdfans.wang/DreamweaverCC2018_8904.zip
后来觉得比较麻烦,就换成IntelliJ IDEA 2018了。
破解教程:先到C:\Windows\System32\drivers\etc下hosts,添加一句0.0.0.0 account.jetbrains.com
,再用activation code即可:K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ29uY3VycmVudFVzZSI6ZmFsc2UsInByb2R1Y3RzIjpbeyJjb2RlIjoiSUkiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJSUzAiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJXUyIsInBhaWRVcFRvIjoiMjAxOS0wNS0wNCJ9LHsiY29kZSI6IlJEIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiUkMiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJEQyIsInBhaWRVcFRvIjoiMjAxOS0wNS0wNCJ9LHsiY29kZSI6IkRCIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiUk0iLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJETSIsInBhaWRVcFRvIjoiMjAxOS0wNS0wNCJ9LHsiY29kZSI6IkFDIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiRFBOIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiR08iLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJQUyIsInBhaWRVcFRvIjoiMjAxOS0wNS0wNCJ9LHsiY29kZSI6IkNMIiwicGFpZFVwVG8iOiIyMDE5LTA1LTA0In0seyJjb2RlIjoiUEMiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifSx7ImNvZGUiOiJSU1UiLCJwYWlkVXBUbyI6IjIwMTktMDUtMDQifV0sImhhc2giOiI4OTA4Mjg5LzAiLCJncmFjZVBlcmlvZERheXMiOjAsImF1dG9Qcm9sb25nYXRlZCI6ZmFsc2UsImlzQXV0b1Byb2xvbmdhdGVkIjpmYWxzZX0=-Owt3/+LdCpedvF0eQ8635yYt0+ZLtCfIHOKzSrx5hBtbKGYRPFDrdgQAK6lJjexl2emLBcUq729K1+ukY9Js0nx1NH09l9Rw4c7k9wUksLl6RWx7Hcdcma1AHolfSp79NynSMZzQQLFohNyjD+dXfXM5GYd2OTHya0zYjTNMmAJuuRsapJMP9F1z7UTpMpLMxS/JaCWdyX6qIs+funJdPF7bjzYAQBvtbz+6SANBgN36gG1B2xHhccTn6WE8vagwwSNuM70egpahcTktoHxI7uS1JGN9gKAr6nbp+8DbFz3a2wd+XoF3nSJb/d2f/6zJR8yJF8AOyb30kwg3zf5cWw==-MIIEPjCCAiagAwIBAgIBBTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE1MTEwMjA4MjE0OFoXDTE4MTEwMTA4MjE0OFowETEPMA0GA1UEAwwGcHJvZDN5MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQC9WZuYgQedSuOc5TOUSrRigMw4/+wuC5EtZBfvdl4HT/8vzMW/oUlIP4YCvA0XKyBaCJ2iX+ZCDKoPfiYXiaSiH+HxAPV6J79vvouxKrWg2XV6ShFtPLP+0gPdGq3x9R3+kJbmAm8w+FOdlWqAfJrLvpzMGNeDU14YGXiZ9bVzmIQbwrBA+c/F4tlK/DV07dsNExihqFoibnqDiVNTGombaU2dDup2gwKdL81ua8EIcGNExHe82kjF4zwfadHk3bQVvbfdAwxcDy4xBjs3L4raPLU3yenSzr/OEur1+jfOxnQSmEcMXKXgrAQ9U55gwjcOFKrgOxEdek/Sk1VfOjvS+nuM4eyEruFMfaZHzoQiuw4IqgGc45ohFH0UUyjYcuFxxDSU9lMCv8qdHKm+wnPRb0l9l5vXsCBDuhAGYD6ss+Ga+aDY6f/qXZuUCEUOH3QUNbbCUlviSz6+GiRnt1kA9N2Qachl+2yBfaqUqr8h7Z2gsx5LcIf5kYNsqJ0GavXTVyWh7PYiKX4bs354ZQLUwwa/cG++2+wNWP+HtBhVxMRNTdVhSm38AknZlD+PTAsWGu9GyLmhti2EnVwGybSD2Dxmhxk3IPCkhKAK+pl0eWYGZWG3tJ9mZ7SowcXLWDFAk0lRJnKGFMTggrWjV8GYpw5bq23VmIqqDLgkNzuoog==
配置博客:https://blog.csdn.net/Haidaiya/article/details/81230636
HTML指的是超文本标记语言:(HyperText Markup Language)而不是编程语言,有一套标记标签,使用标记标签来描述网页
尖括号包围,一般成对出现: 内容
,第一个为开始标签,第二个是结束标签。
也有单个出现的,即不需要内容:
一对标签即其中间内容称为一个元素。
<html>
<head>
<meta charset="utf-8">
<title>网页名title>
head>
<body>
<h1>一个标题(一级)h1>
<p>一个段落p>
body>
html>
声明为HTML5版本,有助于浏览器正确显示页面
元素是页面的根元素,相当于本体
元素是包含了页面的元信息
将字符声明为 UTF-8
元素为网页的标题
元素包含了
等头部元素
元素包含可见的内容
元素为一个段落,会自动换行
元素为标题,会自动换行。除了加粗以外,会提供给浏览器具体的框架,~
强力推荐:弹性盒子布局
。
- 在一个标签中添加id,就可以用函数来改变这个标签中的内容:
<p id="demo">p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
script>
- 用函数点击有个按钮或是超链接:
<script>
function Click(){
document.getElementById("id值").click(); //获取变量
}
script>
- 窗口载入后一定时间后触发:
<script language="javascript" type="text/javascript">
window.setTimeout(Click,4000);/*4000 ms*/
script>
- js中,
substr(begin,len)
返回 b e g i n begin begin开始的 l e n len len个字母,substring(begin,end)
返回 b e g i n begin begin到 e n d − 1 end-1 end−1的字母(下标从0开始)。
- js中,alert(“x”)弹出一个纯文本框。
- js中,等号为:"==",条件判断语句直接if-else 或 else if。
- 载入时调用函数:
- 获取当前网页链接:
var url=window.location.href;
- 跳转页面并传参:
<a href="http://10.7.88.17?From=Begin">SKIPa>
- js中的数组:’[]’,用下标获取变量,用length返回长度。
- js中的对象:’{}’ ,类似于c++中的map,举个例子:
var obj = {};
obj["Name"]="xxx";
obj["Score"]=98;
//obj = {"Name":"xxx","Score":98};
alert(obj["Name"]);
- 被跳转页面用
var url=window.location.href
获得url再处理得到参数:
<script>
function count(obj){ // 计算对象的size
var arr = Object.keys(obj); // 键值集合为数组
var len = arr.length;
return len;
}
function parseURL(url){ // 处理url
//alert(url);
var url = url.split("?")[1];
if(url==null)return {}; // 没有'?'
var para = url.split("&");// 参数数组: psw=123
var len = para.length;
var res = {};
var arr = [];
for(var i=0;i<len;i++){
arr = para[i].split("=");
//alert(arr[0]+"="+arr[1]);
res[arr[0]] = arr[1];
}
return res;
}
function Click(){
//...
}
function Judge(){
var url=window.location.href;
var res=parseURL(url);
if(count(res)==0){ // 没有参数
Begin();
}
else {
var str=res["From"]; // 获取对应参数
if(str==null){
Begin();
}
}
}
script>
- body部分不能完整覆盖整个网页:(因为height的100%是对于此对象的容器来说的,所以需要设置html的height)
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(-65deg, #43C6AC, #F8FFAE);
background-repeat: no-repeat;
background-size: 100% 100%;
}
-
始终浮于窗口底部:style="position:absolute;width: 100%;bottom: 0;"
-
居中,距顶部5%,左右自适应:position: relative; margin: 5% auto;
-
颜色推荐:深蓝:rgba(87,87,105,1.00); 黑:#1D1D1D;渐变背景:linear-gradient(-65deg, #43C6AC, #F8FFAE);墨绿:#081F18;
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction:column;
align-items: center;/*元素位于容器的中心*/
justify-content: center;/*项目位于容器的中心*/
background-image: linear-gradient(-65deg, #43C6AC, #F8FFAE);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.font{/*浮动字体*/
margin-bottom: 30px;
font-size: 66px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
background-image: linear-gradient(to right,
rgb(240,252,174),rgb(229,249,174),rgb(221,246,173),rgb(212,244,174),rgb(203,241,173),
rgb(197,239,173),rgb(203,241,173),rgb(212,244,174),rgb(221,246,173),rgb(229,249,174)
);
animation: sliding 1000s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes sliding {
to {
background-position: -2000vw;
}
}
- 超链接 target默认为self,打开新窗口为_black。文本
为粗体,
为斜体,
下划线,
删除线
- 表格:
表,行,格,table加边框border="1px"
,aligh=“center”居中,表头单元格用,包外面:表头行,表内容,表脚,colspan=“2”表示这个格子占2个行单元格,rowspan列单元格
- 有序列表
;
表示列表项,
加reverse表示降序 ;type改变序号;
- 下面加
做子列表;无序列表
- 表单
内为文本框等用来获取用户操作的东西,用input生成,
默认test;value="xx"为文本,placeholder=“xx”显示但不占位,maxlength="8"最大长度,size="50"拓宽文本框长度,readonly不可改;type="password"为密码框,
可扩充文本框,rows="11"定义初始行,cols同
- 快捷键:注释:单行ctrl+/,选择部分shift+ctrl+/;上下行快速复制:ctrl+alt+上/下
不可和js合作,写出
;input type=range为滑动条,min和max="100"设置值,step表示每步滑动多少,value为起始值;input number为上下加减的数字条,也有min,max,step;
- input checkbox为勾选;input radio同,三选1:三个name="a"相同即可,checked表示选中
为选项列表,不可输入,
为项;为可输入;input file为文件查看框,Multiple可选择多个
- input email 可以检查是否为邮箱;input date为年月日;input color为颜色框;input hidden为隐藏框;input type=“image” src="…"照片,设置width,height会自适应,alt设置备用:照片找不到则变成此文字;
- 链接为图像时,需要考虑响应区域:设置区域:
使用区域为:usemap="#xx";area设置区域:矩形shape=“rect” coords=“左,上,右,下”(用form后,浏览器点击查看位置)
,autoplay自动播放,controls控制台,preload=auto预载入,=metadata为载入第一帧,poster为封面;video加source,当前一个src不能播放,找下一个source
- head中加样式表: