网页工程师三种语言
html : 放内容
CSS：做装饰，类似做排版
javascript：做特效
www.w3school.com.cn 在线实验，学习原理
www.runoob.com 学各种协议、语言
webstorm：最强大的web开发ide
html网页结构
由html版本声明、html头部<head> </head>、html主体<body> </body>几个部分组成
(1人评价)
该课程属于 100天晋升Web安全工程师 请加入后再学习
ctrl + / :添加注释
图片链接
src：来源路径
alt：加载不出图片的时候显示 出来的字
width：宽
height：高
新窗口打开链接：target="_blank"
不加就在原网页跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 网页头部 -->
<title>全职猎人</title>
<style>
</style>
</head>
<body>
<!-- post不显示账号密码*** -->
<form action="login.php" method="post">
<div>
<!-- 标题超链接 -->
<a href="https://baike.baidu.com/item/%E5%85%A8%E8%81%8C%E7%8C%8E%E4%BA%BA/27763?fr=aladdin"
target="_black">
<!-- 图片相对路径 宽 高 图片文字-->
<img src="../lieren/css/标题.jpg" alt="全职猎人" width="200px" height="90px"
title="全职猎人百度百科" id="top">
</a>
</div>
<div>
<!-- 表单元素 账号密码 默认内容 -->
账号:<input type="text" value="qiya">
密码:<input type="password">
<!-- 单选框 默认加文字-->
<input type="button" value="普通按钮">
<input type="submit" value="登录">
<!-- 文本域 -->
<textarea>幻影旅团</textarea>
<p>
<!-- 下拉表单 -->
<select>
<option>杰诺·揍敌客</option>
<option>席巴·揍敌客</option>
<option>库洛洛·鲁西鲁</option>
<option>奇犽·揍敌客</option>
<input type="submit" valoe="提交">
</select>
</div>
<div>
<!-- 单选按钮 单一选项 默认选中奇犽-->
伊路米·揍敌客:<input type="radio" name="shouxin" checked="checked">
糜稽·揍敌客:<input type="radio" name="shouxin">
亚路嘉·揍敌客:<input type="radio" name="shouxin">
</div>
<hr>
<div>
<!-- h3单标签 -->
<h2>人物</h2>
<!-- 无序列表 -->
<ul>
<!-- 超链接 嵌套li标签 字体样式 -->
<a href="https://baike.baidu.com/item/%E5%A5%87%E7%8A%BD%C2%B7%E6%8F%8D%E6%95%8C%E5%AE%A2" target=_black><li style="color: pink">奇犽</li></a>
<a href="https://baike.baidu.com/item/%E6%9D%B0%C2%B7%E5%AF%8C%E5%8A%9B%E5%A3%AB/5975035" target="_black"><li style="color: green">小杰</li></a>
<a href="https://baike.baidu.com/item/%E8%A5%BF%E7%B4%A2" target="_black"><li style="color: purple">西索</li></a>
</ul>
</div>
<div>
<!-- h4单标签 -->
<h3>人物介绍</h3>
<!-- 定义列表 -->
<dl>
<!-- 超链接 -->
<a href=https://baike.baidu.com/item/%E5%A5%87%E7%8A%BD%C2%B7%E6%8F%8D%E6%95%8C%E5%AE%A2 target="_black" title="奇犽百科">
<!-- 图片绝对路径 -->
<img src="https://bkimg.cdn.bcebos.com/pic/8cb1cb1349540923b9016d2d9058d109b3de497c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto" alt="奇犽" width="80px" height="60">
</a>
<!-- 主体 -->
<dt style="color: pink">奇犽</dt>
<!-- 主体内容介绍 -->
<dd>杀手世家揍敌客家族的三少爷。12岁那年，打伤了母亲及二哥后离家出走，并参加猎人试验。在第287期猎人试验中一路过关斩将，但在最终试验却失去资格。
</dd>
</dl>
<dl>
<a href="https://baike.baidu.com/item/%E9%85%B7%E6%8B%89%E7%9A%AE%E5%8D%A1/1072842">
<img src="https://bkimg.cdn.bcebos.com/pic/adaf2edda3cc7cd9b1f53a8a3b01213fb90e918c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto" alt="酷拉皮卡" width="80px" height="60px" title="酷拉皮卡百度百科"></a>
<dt style="color: skyblue">酷拉皮卡</dt>
<dd>
为了夺回同伴们的眼球（火红眼）及打倒灭族凶手幻影旅团，参加了第287期猎人试验并成为职业猎人，在猎人试验中与小杰、奇犽、雷欧力成为好友。
</dd>
</dl>
<dl>
<a href="https://baike.baidu.com/item/%E8%89%BE%E8%90%A8%E5%85%8B%C2%B7%E5%B0%BC%E7%89%B9%E7%BD%97"><img src="https://bkimg.cdn.bcebos.com/pic/d01373f082025aafa02fa2d0f8edab64034f1a8f?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt="艾萨克·尼特罗" width="80px" height="60px" title="艾萨克·尼特罗百科"></a>
<dt style="color: orange">艾萨克·尼特罗</dt>
<dd>
猎人协会及审查委员会会长。主要负责猎人的管理。拥有极长的寿命，最强的念能力使用者。在蚂蚁篇中为了消灭嵌合蚁而牺牲
</dd>
</dl>
</div>
<hr>
<div>
<h5 style="text-align: center">
<img src="C:\Users\ShouXin\Desktop\案例网页\lieren\css/头像.jpg" width="1%px" height="1%">全职猎人
</h5>
<a href="#top">回到顶部</a>
</div>
</form>
</body>
</html>
表单 form
meta标签是给搜索引擎看的，也是爬虫常用来爬取资料所使用到的
HTML：用于承载网页的内容（文本 图片 语言 视频）
CSS：用户实现网页内容的装饰（字体 颜色 布局）
JavaScript：用于实现网页内容的特效（交互 弹出 滑动）
WEB前端开发工具：
webstorm sublime text dreamaweaver
加内容之前，先排版
html项目流程：
1、先通过DIV进行排版，将不同内容隔离在不同的DIV块中。
2、在每个独立的DIV模块里面，填充HTML内容
3、为了让页面更好看，引入CSS样式表；
4、为了让页面更酷炫，引入JavaScript脚本。
<tr>表示一行
<td>表示数据
<p><a name="顶部">这里是顶部</a></p>
<pre></pre>实现保留空格分行，也可用于缩进的文本
meta定义文档的元数据；可以提供关键词给搜素引擎
复制某行语句：ctl+d
删除某行语句：ctl+x
html用于承载网页的内容（文本、图片、语音、视频）
CSS用于实现网页内容的装饰（字体、颜色、布局）
JavaScript用于实现网页内容的特效（交互、弹出、滑动）
W3C：网页标准化委员会
HTML网页结构由HTML版本声明、HTML头部、HTML主体等几个部分组成。
webstorm里，<html (键入>，自动补齐</html)
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
