HTML
1. HTML
1.1 HTML概述
超文本标记语言(英语:HyperText Markup Language,简称:HTML)
HTML5.0 W3C组织
谷歌 火狐 Safari Edge IE 欧朋
360极速
HTML采用的方式是标签方式
1.2 Hello World HTML
<! doctype html >
< html>
< head>
< title> 让你认识一个苟磊的前端有多菜</ title>
< meta charset = " utf-8" />
</ head>
< body>
Hello HTML!!!
恕瑞玛,你们的皇帝又驾崩了...
</ body>
</ html>
1. 这是html基本架构标签
<html>
<head></head>
<body></body>
</html>
head标签内可以完成对应当前页面的补充操作
body就是当前HTML页面
2. HTML标签有两种形式
首尾标签 结尾标签存在一个结尾表示/
<head></head> <title></title>
单边标签(单身狗标签)
<meta />
3. HTML标签不区分大小写,这里建议全小写,省事
4. body标签内容所见即所得
5. HTML标签是可以带有属性的
<hr width="100px">
属性名="属性值" 属性名='属性值' 属性名=属性值
1.3 HTML常用标签
1.3.1 排版标签
<p></p>
段落标签!!!
<hr>
分割线
<br>
换行
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 03-排版标签</ title>
</ head>
< body>
< p> 北京时间8月26日消息,据阿根廷TyC电视台报道,梅西已经通过传真告知巴萨他将离开,他将启用自己合同中每个赛季后允许其跳出合同的条款。</ p>
< p> 北京时间8月26日消息,据阿根廷TyC电视台报道,梅西已经通过传真告知巴萨他将离开,他将启用自己合同中每个赛季后允许其跳出合同的条款。</ p>
< hr width = " 100px" align = " center" >
< hr>
< hr>
< p> 北京时间8月26日消息,据阿根廷TyC电视台报道,梅西已经通过传真告知巴萨他将离开,他将启用自己合同中每个赛季后允许其跳出合同的条款。</ p>
< p> 北京时间8月26日消息,据阿根廷TyC电视台报道,梅西已经通过传真告知巴萨他将离开,他将启用自己合同中每个赛季后允许其跳出合同的条款。</ p>
< p> 北京时间8月26日消息,据阿根廷TyC电视台报道,梅西已经通过传真告知巴萨他将离开,他将启用自己合同中每个赛季后允许其跳出合同的条款。</ p>
南美挑战者 < br>
AC米兰 < br>
尤文图斯 < br>
国际米兰 < br>
巴黎 < br>
</ body>
</ html>
1.3.2 块标签
<div></div>
块标签
<span></span>
行内标签
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 04-块标签和行内标签</ title>
</ head>
< body>
< div> 麦迪</ div>
< div> 弗朗西斯</ div>
< div> 艾弗森</ div>
< div> 加内特</ div>
< div> 科比</ div>
< hr>
< span> 詹姆斯</ span> < span> 东及其</ span> < span> 哈登</ span>
</ body>
</ html>
1.3.3 基本文本标签【已淘汰】
font
font标签已淘汰,文本目前情况下修饰都是采用CSS样式
size 字体大小 1 ~ 7 1 最小 7 最大
face 字体样式,可以选择当前计算机中支持字体演示 宋体,楷体...
color 字体颜色
颜色可以使用
1. 颜色对应单词 green blue pink
2. RGB模式
R ==> Red G ==> Green B ==> Blue
0 ~ 255
#DA835B
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 05-文本标签</ title>
</ head>
< body>
< font size = " 7" face = " 楷体" color = " #adff2f" > 还能用!!!</ font> < br>
< font size = " 7" face = " 幼圆" color = " #DA835B" > 还能用!!!</ font> < br>
</ body>
</ html>
1.3.4 h1 ~ h6 标签
h1 ~ h6 使用建议
1. h1 ~ h6 所有字体全部加粗,并且单独成行!!!
2. h1 标签在页面中建议有且只有一个 SEO优化
h1 是搜索引擎重点关注标签之一
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 06-标题标签</ title>
</ head>
< body>
< h1> 无题</ h1>
< h2> 匿名</ h2>
< h3> 路见不平一声吼</ h3>
< h4> 大哥没有男朋友</ h4>
< h5> 两只黄鹂鸣翠柳</ h5>
< h6> 大哥做饭全靠吼</ h6>
</ body>
</ html>
1.3.5 a链接标签
href:
指定a标签连接的url
target:
打开新页面的指定位置
name:
用于锚点使用
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 08-锚点</ title>
</ head>
< body>
< a name = " top" > </ a>
< font size = " 5" color = " #adff2f" >
顶部 < br>
< a href = " #middle" > 中间</ a> < br>
< a href = " #bottom" > 最后</ a> < br>
</ font>
< p> 2010年南非世界杯中,梅西作为球队进攻核心,居然一球未进。在1/4决赛中,阿根廷更是以0:4的世界杯队史最大输球比分惨败给德国队,这场比赛也直接导致了马拉多纳的下课。
< a name = " middle" > </ a>
< font size = " 5" color = " red" >
中间 < br>
< a href = " #top" > 顶部</ a> < br>
< a href = " #bottom" > 最后</ a> < br> </ font>
< p> 2010年南非世界杯中,梅西作为球队进攻核心,居然一球未进。在1/4决赛中,阿根廷更是以0:4的世界杯队史最大输球比分惨败给德国队,这场比赛也直接导致了马拉多纳的下课。</ p>
< a name = " bottom" > </ a>
< font size = " 5" color = " #ff1493" >
底部 < br>
< a href = " #top" > 顶部</ a> < br>
< a href = " #middle" > 中间</ a> < br>
</ font>
</ body>
</ html>
1.3.6 img标签
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 09-img标签</ title>
</ head>
< body>
< img src = " img/VMB@MT%60H@$%60ODFGZ@ON(D_3.gif" > < br>
< img src = " img/6148eb0b325025f0cdf03d057063de9f.png" alt = " " > < br>
< img src = " https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598440996189&di=08419320e923a6d21688467ab7c1f5ac&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170602%2F9c4e68d58ece48e7b8650a6c9a5fe495_th.jpg" alt = " " >
< br>
< img src = " http://img.mobiletrain.org/templates/mobiletrain/images/qf-2019-java/liuxiaolei.jpg" alt = " 航海中路彭于晏" >
< img src = " http://img.mobiletrain.org/templates/mobiletrain/images/qf-2019-java/xingpenghui.jpg" alt = " 老黑" > < br>
</ body>
</ html>
1.3.7 列表标签
无序列表
ul
有序列表
ol
列表元素
li
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 10-列表</ title>
</ head>
< body>
< ul type = " disc" >
< font size = " 5" > < li> 烤羊肉串</ li> </ font>
< font size = " 5" > < li> 烤羊腿</ li> </ font>
< font size = " 5" > < li> 烤脆骨</ li> </ font>
< font size = " 5" > < li> 烤板筋</ li> </ font>
< font size = " 5" > < li> 烤面筋</ li> </ font>
</ ul>
< hr>
< ol type = " I" start = " 5" >
< font size = " 5" > < li> 崂山白花蛇草水</ li> </ font>
< font size = " 5" > < li> 生命之水</ li> </ font>
< font size = " 5" > < li> 风油精</ li> </ font>
< font size = " 5" > < li> 红色尖叫</ li> </ font>
< font size = " 5" > < li> 魔爪</ li> </ font>
</ ol>
</ body>
</ html>
1.3.8 表格标签
table
表格标签
tr
行
td
列
th
头
rowspan
行合并
colspan
列合并
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 11-表格标签</ title>
</ head>
< body>
< table border = " 1px" width = " 500px" align = " center" >
< tr>
< th> ID</ th>
< th> 姓名</ th>
< th> 性别</ th>
< th> 年龄</ th>
< th> 备注</ th>
</ tr>
< tr align = " center" >
< td> 1</ td>
< td> 苟磊</ td>
< td> 男</ td>
< td> 16</ td>
< td> 帅的一匹</ td>
</ tr>
< tr align = " center" >
< td> 2</ td>
< td> 昊苟</ td>
< td> 未知</ td>
< td> -20</ td>
< td> 这是啥?</ td>
</ tr>
< tr align = " center" >
< td> 3</ td>
< td> 大哥</ td>
< td> 女</ td>
< td> 18</ td>
< td> 大哥是个单身狗</ td>
</ tr>
< tr align = " center" >
< td> 4</ td>
< td> 老黑</ td>
< td> 男</ td>
< td> 78</ td>
< td> 黑的雅痞</ td>
</ tr>
</ table>
</ body>
</ html>
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 12-表格合并</ title>
</ head>
< body>
< table border = " 1px" width = " 500px" align = " center" >
< tr>
< th colspan = " 5" > 学生信息表</ th>
</ tr>
< tr>
< th> 学号</ th>
< th> 姓名</ th>
< th> 年龄</ th>
< th> 成绩</ th>
< th> 备注</ th>
</ tr>
< tr>
< td> 1</ td>
< td> 大哥</ td>
< td> 18</ td>
< td> 1000000000</ td>
< td rowspan = " 4" > </ td>
</ tr>
< tr>
< td> 2</ td>
< td> 老黑</ td>
< td> 78</ td>
< td> -5</ td>
</ tr>
< tr>
< td> 3</ td>
< td> 小黑黑</ td>
< td> 1</ td>
< td> 100</ td>
</ tr>
< tr>
< td> 4</ td>
< td> 终极黑</ td>
< td> -1</ td>
< td> 10000</ td>
</ tr>
</ table>
</ body>
</ html>
1.4 form表单【重点】
1.4.1 get和post
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 13-form测试</ title>
</ head>
< body>
< form action = " #" method = " get" >
< span> 用户名:</ span> < input type = " text" name = " userName" > < br>
< span> 密码耶:</ span> < input type = " password" name = " password" > < br>
< input type = " submit" value = " 提交" > < br>
</ form>
< hr>
< form action = " #" method = " post" >
< span> 用户名:</ span> < input type = " text" name = " userName" > < br>
< span> 密码耶:</ span> < input type = " password" name = " password" > < br>
< input type = " submit" value = " 提交" > < br>
</ form>
</ body>
</ html>
1.4.2 input标签属性总结
属性 用途 text 缺省属性,提交数据为基本文档 password 密文展示 submit 提交按钮 radio 单选操作,要求name属性必须一致,checked修饰为默认选择 checkbox 多选操作,要求name属性一致,建议name属性加[],checked修饰为默认选择 date 日期 file 文件 重置,可以搞一下用户心态 hidden 隐藏数据传递,页面不可见,可以带走一些特定数据
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 12-input标签</ title>
</ head>
< body>
< form action = " #" method = " get" >
< span> 用户:</ span> < input type = " text" name = " userName" > < br>
< span> 密码:</ span> < input type = " password" name = " password" > < br>
< span> 性别:</ span> < input type = " radio" name = " gender" value = " 1" > 男 < input type = " radio" name = " gender" value = " 0" > 女 < br>
< span> 爱好:</ span>
< input type = " checkbox" name = " hobby[]" value = " 1" checked > 王者荣耀
< input type = " checkbox" name = " hobby[]" value = " 2" checked > 英雄联盟
< input type = " checkbox" name = " hobby[]" value = " 3" > 看电影
< input type = " checkbox" name = " hobby[]" value = " 4" > 喜欢美女 < br>
< span> 籍贯</ span>
< select name = " homeland" >
< option value = " 1" selected > 南阳</ option>
< option value = " 2" > 洛阳</ option>
< option value = " 3" > 郑州</ option>
< option value = " 4" > 开封</ option>
< option value = " 5" > 周口</ option>
</ select> < br>
< span> 生日:</ span> < input type = " date" name = " birth" > < br>
< span> 头像:</ span> < input type = " file" name = " icon" > < br>
< input type = " hidden" name = " hidden" value = " 你看不见我" >
< input type = " reset" value = " 重置" >
< input type = " submit" value = " 提交" > < br>
</ form>
</ body>
</ html>
1.4.3 select下来菜单
< select name = " homeland" >
< option value = " 1" > 安阳</ option>
< option value = " 2" > 信阳</ option>
< option value = " 3" > 南阳</ option>
< option value = " 4" > 洛阳</ option>
< option value = " 5" > 濮阳</ option>
< option value = " 6" selected > 荥阳</ option>
< option value = " 7" > 原阳</ option>
< option value = " 8" > 淮阳</ option>
</ select>
1.4.4 textarea 已淘汰
< textarea name = " description" > </ textarea>
1.4.4 textarea 已淘汰
< textarea name = " description" > </ textarea>