小高不太行之前端——html网页制作

前言
正文
- 一、布局
- - table布局
  - div
- 二、导航栏
- 三、常用工具【表格/表单/超链接】
- - （一）表格
  - （二）表单
  - （三）超链接
- 四、媒体添加【图片/音频/视频】
- - （一）图片
  - （二）音频和视频
- 五、不一样的style
- - 背景
  - 文本
  - 其他
- 六、那个丑不拉几的网页
总结
下期预告：CSS

提示：此篇文章由一名不专业的小白写手 ——真的不太行的小高吐血制作，博各位看官一乐

前言

写这篇博文的目的如下

完成某某课程的学习笔记
吐槽我制作过程的绊脚石
手把手教小伙伴们造一个丑不拉几的网页

正文

一、布局

犹如造房子先画图纸，出报纸要分板块，一个好的网页需要（当然我的丑网页也需要）先做一个大致的布局。

table布局

将网页分块，也可以table里面嵌套table

     <table border="0" width="100%" cellpadding=""><tr><td width="10%" style="background-color: crimson;" ><h2 >10</h2></td><td width="90%" style="background-color: cornflowerblue;" ><h2 >90</h2></td></tr><table><<table border="0" cellspacing="100%" width="100%" cellpadding="10"><tr height="200px"><td width="50%" style="background-color: chartreuse;" ><h2 >20</h2></td><td width="50%" style="background-color: chocolate;" ><h2 >80</h2></td></tr></table>

运行结果如下：通过设置宽度比(我说的是主要，别杠，杠就是你对)就会产生分块，
众所周知 table不好布局，偏偏我的猪脑子当时没有看到div ，下面有请div闪亮登场

div

<div id="container" style="width:888px "><div id="tail" style="background-color:#CAA520; text-align: center"><h1 >XXXX大学工二104</h1></div><div id="header" style="background-color:#CAA520; text-align: center"><h1 style="margin-bottom: 0;">讲台</h1></div><div id="menul" style="background-color:#FFD700;height:200px;width:222px;float:left; text-align: center"><b>左四排</b></div><div id="menum" style="background-color:#FFA700;height:200px;width:444px;float:left; text-align: center"><b>中八排</b></div><div id="menur" style="background-color:#FFD700;height:200px;width:222px;float:left; text-align: center"><b>右四排</b></div>

运行结果如下：走廊和门就不加了吧

二、导航栏

我真的没有偷窥老师的源代码（真诚提示：喜欢某个设计单击右键查看网页源代码）

<nav><a href="/跳转过去的网址/">想显示在导航栏的文字</a> ||  <!-- 这个||看心情添加 --><a href="/gaogao/" >高高</a> ||<a href="/contact us/" >联系我们</a>
</nav>

运行结果如下（当然要添加一些style才可以变漂亮，详情请点击此链接移步至不一样的style)：

三、常用工具【表格/表单/超链接】

（一）表格

table border="1" cellspacing="0" cellpadding="10px"><tr><th colspan="2">重要的标签或属性</th><th>解释</th><th>应用</th></tr><tr><th rowspan="3">标签</th><td>tr</td><td>行</td><td></td></tr><tr><td>th</td><td>表头</td><td></td></tr><tr><td>td</td><td>单元格</td><td></td></tr><tr><th rowspan="5">属性</th><td>border</td><td>边框</td><td>此表边框为0</td></tr><tr><td>cellspacing</td><td>单元格之间的距离</td><td>此表距离为0</td></tr><tr><td>cellpadding</td><td>单元格内容与其边框之间的空白</td><td>此表设置为10px</td></tr><tr><td>rowspan</td><td>跨行数</td><td>标签和属性</td></tr><tr><td>colspan</td><td>跨列数</td><td>重要的标签和属性</td></tr></table>

由于实在不会在CSDN上做出来一个心仪的表格，只能码了qaq

（二）表单

<form action="reply.html" method="post" >姓名：<input type="text" name="" id="1" value="" /><br>职业：<input type="text" name="" id="2" value="" /><br>邮箱：<input type="email" name="" id="3" value="" /><br> 电话：<input type="text" name="" id="4" value=""/><br><input type="reset" value="重置" style="margin-top: 0.625rem; margin-left: 1.25rem;" /><input type="submit" value="提交" style="margin-top: 0.625rem; margin-left: 1.25rem;"/></form>

运行结果如下（原谅我的草率表单，post会报错，光此代码块不完整黑脸）：

（三）超链接

一个标签解决问题，故不赘述

<a href="" >XXXXX</a>

四、媒体添加【图片/音频/视频】

（一）图片

如果你不打算只用系统颜色设计你的网页的话，那插入图片就要划重点了，当然选择什么图片是一项充满艺术挑战的事情 ,我不配haha
在背景，每个单独的标签后都可以添加图片，毕竟html是可以嵌套的

<img src="suiyi.jpg/png" alt="Computer man" width="00" height="00">

要提前把图片存到img目录下哦,为了保持路径简单，建议ctrl+F2重命名

（二）音频和视频

由于孩子有点懒，所以说还没有study, 各位看官海涵，小的日后补上
更新如下：因为如果给视频音频添加暂停，放大等功能涉及到了script部分，而目前我掌握甚少，不敢班门弄斧, 后续二更。故暂提供菜鸟教程对于这一部分的解释链接：https://www.runoob.com/try/try.php?filename=tryhtml5_video_js_prop

五、不一样的style

因为在网页设计中主要还是靠CSS渲染，所以这里对style 就挑重点作一个介绍

背景

属性	释义
background-color	背景颜色
background-image	背景图片

文本

属性	释义
text-align	文本位置
text-color	文本颜色

其他

其他的想起来再加吧

属性	释义
width	宽度
height	高度
color	颜色

六、那个丑不拉几的网页

http://127.0.0.1:8848/selfIntroduction/index.html

一更如下：
根据评论区的朋友说明，现在没有服务器所以链接无法点击，所以小高只能先录一个屏，因为主要是体现方法加之艺术气息实在贫乏，所以网页甚丑，各位见谅。
http://m.v.qq.com/play.html?cid=&vid=j3233nni03c&vuid24=tYB8N6k2jLxhLkxr7SNeug%3D%3D&url_from=share&second_share=0&share_from=copy

总结

以上就是小高对于html的初步认识，并且通过布局，导航栏设置，插入表格表单和一些花里胡哨的图片，再通过设置不一样的style最终制作出了一个依然丑不拉几的网页，

下期预告：CSS

小高不太行之前端——html网页制作相关推荐

小高不太行之前端——CSS样式 I
小高不太行之前端--CSS样式(基础)上提示:下篇马上问世,在赶了在赶了提示: 文章目录小高不太行之前端--CSS样式(基础)上前言一.基础知识 (一)插入方法[外部/内部/内联] 1.外部 ...
小高不太行之前端--JSON
小高不太行之前端–JSON 文章目录小高不太行之前端--JSON 前言一.JSON 语法 (一)JSON 语法规则二.JSON 对象 (一)对象语法 (二)访问对象值三.JSON 数组 (一) ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE htm ...
【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYP ...
【前端实例代码】使用 HTML CSS 和 JavaScript 实现具有彩色发光霓虹灯效果的数字时钟|前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+vuejs+elementui 制作一个响应式后台管系统网页界面~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: ...
HTML前端静态网页制作
在制作网页之前,首先先分析网页是那些部分组成,可以从以下的代码看出,分为头部.导航栏.logo部分.文字部分等等这些组成.多的不说,直接上代码,本次静态网页代码分为html和css部分. <!D ...
html怎么设置荧光边框,前端｜网页制作秘密武器之发光边框
1．引言学习前端,我们除了要学会如何制作静态的网页,我们还要学会一些特殊的效果,运用我们所学的知识,制作出属于我们的有个性的东西,接下来,就让我们一起来学习一下荧光边框边框的制作方法吧. 代码讲 ...
用DIV+CSS技术设计的个人网页（web前端期末网页制作课作业）HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

小高不太行之前端——html网页制作

小高不太行之前端——html网页制作

前言

正文

一、布局

table布局

div

二、导航栏

三、常用工具【表格/表单/超链接】

（一）表格

（二）表单

（三）超链接

四、媒体添加【图片/音频/视频】

（一）图片

（二）音频和视频

五、不一样的style

背景

文本

其他

六、那个丑不拉几的网页

总结

下期预告：CSS

小高不太行之前端——html网页制作相关推荐

最新文章

热门文章