前端开发网页设计(一) ：HTML学习
2024-04-17 23:58:16
HTML学习： 超文本标记语言
安利前端开发工具：Hbuilder ！
源码下载资源： 链接：https://pan.baidu.com/s/1rqBH922fu97yePLk0jMe0g 提取码：naej
HTML学习：
- head标签
- body标签
- 图片标签
- 超链接标签
- 表格标签
- 内嵌和框架标签
- 表单
1.HTML的head标签
<html>
<head> <!--head标签中主要配置浏览器的配置信息-->
<title>HTML学习</title><!--网页标题标签-->
<meta charset="utf-8"/><!--编码格式(HTML5)-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--HTML4-->
<meta name="keywords" content="内容"/><!--网页关键字-->
<meta name="description" content="内容"/><!--网页描述-->
<meta name="author" content="内容"/><!--网页作者-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><!--网页自动跳转(5s)--> </head>
<body>this is my first html</body>
</html>2.HTML的body标签(文本标签)
html
<html>
<head>
<title>HTML的body标签-文本标签学习</title>
<meta charset="utf-8"/>
</head>
<body>
<!--标题标签 -->
<!--align: center left right -->
<h1 align="center">HTML学习很简单</h1>
<h2>HTML学习很简单</h2>
<h3>HTML学习很简单</h3>
<h4>HTML学习很简单</h4>
<h5>HTML学习很简单</h5>
<h6>HTML学习很简单</h6>
<!--600px为占屏幕宽度 若40%为占浏览器窗口宽度比率等等 20px为高度 -->
<hr width="600px" size="20px" color="red" align="left"/>
<!--<p></p>段落标签，每个段落自动换行-->
<p> 我是一个段落<br /><!-- <br/>换行 空格符--><b>学习HTML真的很简单</b> <!--<b></b>加粗--><i>学习HTML真的很简单</i> <!--<i></i>斜体--><u>学习HTML真的很简单</u> <!--<u></u>下划线--><del>学习HTML真的很简单</del> <!--<del></del>删除线-->
<i><b><u>学习HTML真的很简单</u></b></i> <!-- i、u、b、del随意嵌套，没有指定顺序-->
</p>
</body>
</html>
2（补）.HTML的body标签(列表标签)
<html>
<head>
<title>列表标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>列表标签学习</h3>
<hr /><h3>我热爱的城市:</h3>
<ul><!-- <ul>表示无序列表 前面默认黑圈-->
<li>武汉</li><!-- 每一个<li>代表一行-->
<li>新疆</li>
<li>内蒙古</li>
</ul><h3>我的爱好:</h3>
<ol type="I"><!-- <ol>表示有序序列表 type可为(1,a,A，I)-->
<li>写代码</li><!-- 每一个<li>代表一行-->
<li>打游戏</li>
<li>看电影</li>
</ol><dl><!-- <dl>表示自定义列表--><dt>我热爱的课程:</dt> <!--<dt>可以认为是顶头标题-->
<dd>java课程</dd>
<dd>数据结构与算法</dd>
<dd>javaweb</dd><dt>我热爱的地方</dt>
<dd>武汉</dd>
<dd>新疆</dd>
<dd>内蒙古</dd></dl>
</body>
</html>
3.HTML的图片标签
<html>
<head>
<title>图片标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>图片标签学习</h3>
<hr /> <!--使用本地资源:图片位于本地电脑中-->
<img src="img/1.jpg" height="200px"/> <!--只设置宽度，长度默认比例变化，单位px也可以是%-->
<img src="img/2.jpg" height="200px"/>
<!--title表示鼠标放上去现实的内容 alt表示图片加载失败显示的内容-->
<img src="img/3.gif" height="200px" title="风景图片" alt="加载失败"/>
<hr /> <!--使用网络资源:-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564041564093&di=615775dde0787c6867bb527206dc9414&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20111207%2FImg328215620.jpg" width="200px"/>
<!--各图片之间不回自动换行-->
</body>
</html>
4.HTML的超链接标签
<html>
<head>
<title>超链接标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>超链接标签学习</h3>
<hr />
<!--:
target:指明要跳转的网页资源的显示位置
_self 在当前页中刷新显示
_blank 在新的标签页中显示
_top 在顶层页面中显示
_parent 在父级页面中显示
注意:访问方式可以是文字也,可以是图片.-->
<a href="图片标签学习.html" >图片标签学习</a><br />
<a href="body标签学习(列表标签).html" target="_blank"><img src="img/3.gif" height="100px"/</a>
<hr />
<a href="http://www.taobao.com" target="_self">淘宝一下 </a>
<hr />
<a href="http://www.taobao.com" target="_top"><img src="img/4.png"/></a>
<hr />
<a href="http://www.baidu.com" target="_partent">百度一下</a>
<!--
锚点学习:作用:在一张网页中进行资源跳转
使用:先使用超链接标签在指定的网页位置增加锚点.
点击含有描点标签的位置，自动调到当前页面指定内容处-->
<a href="锚点学习.html">锚点学习</a>
<a name="锚点名" ></a>
<a href="#锚点名" >访问方式</a>
</body>
</html>5.表格标签
<html>
<head>
<title>表格标签学习</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>表格标签学习</h3> <hr />
<!-- <table>标签中有如下属性：border:给表格添加边框width:设置表格的宽度height:设置表格的高度cellpadding:设置内容居边框的距离cellspacing:设置边框的大小 style="border-bottom:none;"表示此table的底线不要 style="border-top:none;"表示此table的顶线不要 -->
<table border="1px" cellpadding="10px" cellspacing="0px">
<!--一个<tr>表示一行，height表示行高-->
<tr height="50px">
<!--<th>和<td>区别仅仅在于：th的内容是加粗和居中的-->
<!--一个<td>表示一列，weighet表示列宽-->
<th width="100px">科目</th>
<th width="100px">分数</th>
<th width="100px">级别</th>
<th width="150px">说明</th>
</tr>
<tr height="50px"> <td>java</td> <td>100</td> <td>8</td><td>面向对象的语言</td>
</tr>
<tr height="50px"><td>C语言</td><td>100</td><td>8</td><td>面向过程的语言</td> </tr> </table> <hr /> <h4>单元格的合并学习:</h4> <table border="1px" cellspacing="0"> <tr height="35px"> <td width="100px"></td> <td width="100px"></td> <td width="100px"></td> <!-- colspan表示列合并 rowsapan表示行合并 需要删掉被合并过来的行或者是列--><td width="200px" colspan="2" rowspan="2"></td> </tr> <tr height="35px"><td colspan="2"></td> <td></td>
</tr>
<tr height="35px"> <td></td> <td></td> <td rowspan="2"></td> <td></td> <td></td>
</tr>
<tr height="35px"> <td></td> <td></td> <td></td> <td></td>
</tr>
</table>
</body>
</html><!-- <pre>表示这里面内容的样式会浏览器原样输出</pre>
&It;>分别表示<、> 不会让浏览器误认为是标识符
一个大表格可以分成多个小table来拼接而成
中间的部分table需要去顶线和底线，这样处理之后不会看出是拼接而成-->
6.内嵌和框架标签
内嵌标签：(iframe)
<html><head><title>内嵌标签学习</title><meta charset="UTF-8"/></head><body><h3>内嵌标签学习</h3><hr /><!--内嵌标签:iframesrc:要显示的网页资源路径可以是本地(相对路径)也可以是网络资源(URL)注意:默认当前页面打开及加载src指向的资源width:设置显示区域的宽度height:设置显示区域的高度name:设置内嵌区域的名字,结合超链接标签的target属性使用.作用:在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.--><a href="http://www.baidu.com" target="_if">百度一下</a><a href="http://www.so.com" target="_tt">360搜索</a><br /><iframe src="" width="48%" height="400px" name="_if"></iframe><iframe src="" width="48%" height="400px" name="_tt"></iframe></body>
</html>
框架学习(frameset)
<html><head><title>框架标签学习：</title><meta charset="UTF-8"/></head><!--注意:第一步一定要删除body标签框架标签学习:framesetrows:按照行进行切分页面cols:按照列进行切分页面子标签:frame:进行切分区域的占位,一个frame可以单独加载网页资源.src:资源路径(本地或者网络)name:区域名,结合超链接使用--><!--row表示水平划分--><frameset rows="10%,*,10%"><frame src="frameset/top.html" /><!--这里是将第二个frame当成了一个新网页，然后重新进行再次划分 cols表示纵向--><frameset cols="10%,*"><frame src="frameset/left.html" /><frame src="frameset/right.html" name="_right"/></frameset><frame src="frameset/bottom.html" /></frameset>
</html>
网页显示效果：
进行改良:将left页面中变为简单的导航：即超链接
<html><head><title></title><meta charset="UTF-8"/></head><body><ul><li><a href="http://www.baidu.com" target="_right">百度一下</a></li><li><a href="http://www.taobao.com" target="_right">淘宝网</a></li><li><a href="http://www.jd.com" target="_right">京东网</a></li></ul></body>
</html>
7.form 表单
<html><head><title>form标签学习</title><meta charset="UTF-8"/></head><body>
<!--form表单标签学习:作用:收集并提交用户数据给指定服务器属性: action:收集的数据提交地址也就是URLmethod:收集的数据的提交方式get :适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.post:适合大量数据,安全,隐式提交注意1:表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据注意2:form标签会收集其标签内部的数据注意3:form表单的数据提交需要依赖于submit提交按钮.-->
<h3>form标签学习</h3>
<hr />
<form action="#" method="get"><!--form表单总体分为三大块 input 、textarea 、selectinput中 type属性有："text" 文本输入框"password" 密码输入框"radio" 单选框 checked="checked"表示默认为这个"checkbox" 多选框 checked="checked"表示默认为这个"hidden"隐藏表现(表示此内容需要一起提交到服务器，并且对用户不可见)"button"按钮"submit"提交表单其中name/id 和 value可以理解成键值对；name与服务器交互 ；id与css/js交互-->
<!--要注意表单中所有数据，name:value是键值对，value才是数据 这里value:"王五" 表示不输入的情况下 显示王五-->
用户名:<input type="text" name="uname" id="uname" value="王五"/><br />
密码: <input type="password" name="upwd"/><br /><!--注意这里男/女 的name为相同标识-->
性别 : 男<input type="radio" name="sex" value="1" checked="checked"/> 女<input type="radio" name="sex" value="0"/><br />
<!--checkbox中 name标识应该唯一，不然多选就失去了存在的必要-->
爱好:
吃饭<input type="checkbox" name="fav" value="1" checked="checked"/>
睡觉<input type="checkbox" name="fav" value="2"/>
打豆豆<input type="checkbox" name="fav" value="3"/><br />籍贯:
<select name="address"><!--单选下拉框-->
<!--这里name标识需要在select中 select="selected"表示默认--><option value="" selected="selected">--请选择--</option><option value="1">北京</option><option value="2">上海</option><option value="3" >武汉</option>
</select>
<br />
<!-- 文本域:textarea:声明一个可以书写大量文字的文本区域name:数据提交的键名,js和css也会使用rows:声明文本域的行数cols:声明文本域的列数-->
文本域:<br />
<textarea name="intro" rows="10" cols="30"></textarea><br />普通按钮:<br /><input type="button" id="" value="普通按钮" />
隐藏标签:
<!--作用是这里面的数据也要随着用户提交发起 一起提交到服务器，但是这些数据对用户需要隐藏--><input type="hidden" name="hidden" id="" value="哈哈" /><input type="submit" value="登录"/></form></body>
</html>
HTML实战一个注册页面(纯HTML)
<html><head><title>注册页面</title><meta charset="UTF-8"/></head><body><h3>注册页面</h3><hr /><form action="#" method="get"><table border="1px" cellspacing="0" cellpadding="5px"><tr height="35px"><td width="70px">用户名:</td><td width="200px"><input type="text" name="uname" id="uname" value="" /></td></tr><tr height="35px"><td>密码:</td><td><input type="password" name="pwd" id="pwd" value="" /></td></tr><tr height="35px"><td>邮箱:</td><td><input type="text" name="mail" id="mail" value="" /></td></tr><tr height="35px"><td>手机号:</td><td><input type="text" name="phone" value="" /></td></tr><tr height="35px"><td>性别:</td><td>男<input type="radio" name="sex" id="sex" value="1" checked="checked"/>女<input type="radio" name="sex" id="sex" value="0" /></td></tr><tr height="35px"><td>爱好:</td><td><input type="checkbox" name="fav" id="fav" value="1" />唱歌<input type="checkbox" name="fav" id="fav" value="2" />打球<input type="checkbox" name="fav" id="fav" value="3" />旅游</td></tr><tr height="35px"><td>籍贯:</td><td><select name="address" id=""><option value="1">武汉</option><option value="2">孝感</option><option value="3">汉口</option></select></td></tr><tr height="35px"><td>个人介绍:</td><td><textarea name="intro" rows="4" cols="20"></textarea></td></tr><tr height="35px"><td colspan="2" align="center"><input type="checkbox" name="agree" id="agree" value="1" />是否同意本公司的协议</td></tr><tr height="35px"><td colspan="2" align="center"><input type="submit" value="注册" /></td></tr></table></form></body>
</html>
前端开发网页设计(一) ：HTML学习相关推荐
- 15个前端开发/网页设计师必备的Bookmarklet
15个前端开发/网页设计师必备的Bookmarklet Bookmarklet(书签工具)是节省网页设计/前端开发时间的最佳工具.仅需点击一下,它就能提供很多信息或帮助.Bookmarklet是使用一 ...
- 如何高效的学习前端的网页设计？
如何高效的学习前端的网页设计? 那我就针对"高效"为你做一些推荐. 如果你喜欢看图文类的教程 那么推荐你菜鸟教程这个网站 https://www.runoob.com/ 对新手入门 ...
- 如何成为一名牛逼Web前端开发人员？入行学习完整指南
经过如此多的试验和测试,而不是说你从头开始创建了所有内容,接着,你在网页上创建了第一个登录表单时,你感觉如何? 经过了多次更改后,将布局分配给第一个Web应用程序时感觉如何? 当成功处理了数千个用户的 ...
- 零基础的前端开发初学者应如何系统地学习？前端技能汇总 Frontend Knowledge Structure
本文转自 张帅 于知乎<零基础的前端开发初学者应如何系统地学习?>中的回答. 知乎原文:https://www.zhihu.com/question/19834302 GitHub项目:前 ...
- WEB前端之网页设计③----最新最全详解/如何在网页上创建表格
WEB前端之网页设计③--最新最全详解/如何在网页上创建表格 一.表格效果图1: <table border="0px" cellspacing="1px" ...
- 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...
- 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
- 【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
最新文章
- ORACLE 12C PDB部分功能测试
- 超融合服务器虚拟化优缺点,超融合是什么 意思？为什么必须是软硬件一体？...
- 网站优化不仅仅只为排名而在！
- python书籍推荐知乎-python入门书籍(爬虫方面)有哪些推荐？
- 矩阵的特征值、特征向量及其代码求解实现
- chrome jsonView插件安装
- 《算法竞赛入门经典》 习题4-1（象棋 Xiangqi ACM ICPC Fuzhou 2011，UVa1589）——仅提供大体方法
- 机器学习算法Python实现：tfidf 特征词提取及文本相似度分类
- ssl1715-计算面积【差积】
- 查看本机ssh公钥，生成公钥
- VC制作 Windows服务 安装包
- GPT2模型训练，50w个多轮中文对话语料
- 计算机应用中英文缩写ai表示,2010黑龙江省全国计算机等级考试二级VB笔试试卷及参考答案考试重点和考试技巧...
- 解决gdb报错：Failed to import the site module，No module named '_sysconfigdata_m'
- 钉钉自动打卡-智能填表
- 超级灰色按钮克星更新v1.3.1112.40
- 商标有效期、续展期、宽展期分别是什么意思？
- 智能手环功能模块设计_智能手环毕业设计
- 【网络流24题23】火星探险问题
- 统计并输出空格或回车、数字字符和其他字符的个数。