(1人评价)
HTML编程原理与实践

从零开始构建商业化Web前端页面

价格 99拼币
承诺服务
该课程属于 100天晋升Web安全工程师 请加入后再学习

网页工程师三种语言

html : 放内容

CSS:做装饰,类似做排版

javascript:做特效

 

www.w3school.com.cn  在线实验,学习原理

www.runoob.com     学各种协议、语言

webstorm:最强大的web开发ide

 

html网页结构

由html版本声明、html头部<head>   </head>、html主体<body>  </body>几个部分组成

 

 

[展开全文]

图片链接

src:来源路径

alt:加载不出图片的时候显示 出来的字

width:宽

height:高

新窗口打开链接:target="_blank"

不加就在原网页跳转

[展开全文]
Zhzh20 · 2021-05-30 · 6. HTML链接 0

<!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>

 

[展开全文]

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>

 

[展开全文]

授课教师

拼客学院院长
拼客学院-老王

课程特色

视频(12)
下载资料(1)

学员动态

wangstudy 加入学习
a887156411 加入学习
罗憬福 加入学习
以空 开始学习 11. HTML项目一