新手小白HTML代码入门
新手小白HTML代码入门
前言
第一次写博客，希望能为刚入门的提供帮助
一、HTML是什么？
HTML全称Hyper Text Markup Language，中文名叫做超文本标记语言，主要作用是做数据展示
二、使用步骤
1.创建文件
用Sublime Text 3创建一个文件并保存为XXX.html，输入！，点击tab,就会出现如图的代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body></body>
</html>
接下来我们来解读一下这串代码中的各个标签什么意思
<!DOCTYPE html> 文件头---------页面响应的数据类型
<html lang="en">language(语言）--------表示页面所显示的语言类别
比较常用的有2种en—英文和zh-cn—中文
<head>------表示HTML的头的部分
<meta charset="UTF-8">---------表示你所输入的代码在那些国家可以使用
其中UTF-8------Unicode码为全世界的通用码
而
2.表单
form----表单
该标签一般不会单独使用会和input标签联合使用
属性：action=“url” url表示路径
路径分为绝对路径和相对路径
绝对路径：从盘符开始 要表达的文件路径 路径+文件名称
相对路径：当前源文件和目标文件的相对路径位置
file:///E:/code/2.html?kirito=kirito&pwd=123
?目标文件结束标识
&属性连接符
2.1请求方式
所谓的传输方式，简单举个例子。你在登陆一个网站的时候，当你在登录界面输入了你的账号和密码后就会跳出你的账号的个人中心，那么你的账号是如何被调用出来的呢？当你在输入自己的账号和密码并点击登录以后，它就会向数据中心发送请求。
而请求方式呢分为2种，一种为Get 请求，一种为Post请求
这两种请求虽说都能从数据中心种得到你的账号信息，但是安全性却是不一样的，Get 请求是不安全，而 Post请求是安全的。
Get 请求会使表单数据在页面地址栏中是可见的，如图
Post请求就不会
2.2Target属性
3.Img标签 表示页面上的图片
Src属性-----表示图片的替代文本
<img src="data:image/1.jpg" alt="美女" width="100%" height="100%">
Width 宽度
Height高度
该两个属性可以控制图片的大小 单位可以使用XXpx 100%
Map —地图 计算机语言 映射
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="data:image/1.jpg" alt="美女" usemap="#one"><map id="one" name="one"><area shape="circle"coords="240,92,10"href="https://www.baidu.com/" ></area></map></body>
</html>
4.表格布局
表格布局：通过表格来对网站进行整体的布局，这种布局目前来讲已经被淘汰了
主要使用的就是表格的标签
Table ----表格
Tr ----表行
Th ----表头
Td -----表元
示例：
<font color="purple"><table width="1600px"><tr><td>首页</td><td>玄幻小说</td><td>修真小说</td><td>都市小说</td><td>穿越小说</td><td>网游小说</td><td>科幻小说</td></tr></table></font>
效果图如下
5.列表
列表分为两种：无序列表和有序列表
5.1无序列表
<ul><li></li>
</ul>
适应场景 ： 论坛新闻项 展开闭合 导航
5.2有序列表
<ol><li></li>
</ol>
属性：
reversed
reverse------反转
type类型中可以使用数字 字母 以及罗马数字
5.3定义列表
<dl><dt>今天</dt><dd>The day of today</dd><dt>明天</dt><dd>The day after today</dd>
</dl>
6.字体的控制
size color
加粗
斜体
下标
上标
弹幕 altemate来回滚动
<marquee>这波操作666！</marquee>
<marquee behavior="alternate">我来回滚动</marquee> <marquee behavior="scroll">我单方向循环滚动</marquee><marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee> <marquee behavior="slide">我只滚动一次</marquee> <marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee> <marquee scrollamount="100">我速度很快.</marquee> <marquee scrollamount="50">我慢了些。</marquee> <marquee scrolldelay="30">我小步前进。</marquee> <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
7.html5中的标签 音频和视频
7.1视频
<video src="video/final.mp4" controls="controls"></video>
7.2音频
<audio src="music/Pianoboy高至豪 - The truth that you leave.mp3" controls="controls"></audio>
8.常用但意义不明确的标签
在html5中给
注意：如果要使用frameset标签那么它不能和body标签连用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<frameset rows="15%,*,15%"><frame src="2.html"></frame><frameset cols="25%,*"><frame src="3.html"></frame><frame src="4.html"></frame></frameset><frame src="6.html"></frame>
</frameset>
</html>
尾声
HTML总结：
Html4.0版本-----XHTML-----HTML5
Html4.0版本中，语法和规范都不够严谨，不严谨也可以显示出窗口内容，但是语法不够规范。不是所有的用户都能够看到正确的页面，所以w3c联盟提出了一个版本来规划html的语法、文本头、或者是DTD的命名等等
-----XHTML1.0-----部门-----XHTML2.0 语法上做升级------HTML5一个功能上做升级
最后为大家奉上一个小编用上述知识做成的一个简易的网站
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>天天读书网</title>
</head>
<P><div Align="center"><a href="">将天天读书网设为首页</a> <a href="">收藏天天读书网</a> 账号：<input type="text"> 密码：<input type="text"><input type="button"value="登录"/> <a href="">忘记密码</a> <a href="">用户注册</a></div>
<P><div Align="center"><input type="text"><input type="button"value="搜索"/></div></P>
<font color="purple"><table width="1600px"><tr><td>首页</td><td>玄幻小说</td><td>修真小说</td><td>都市小说</td><td>穿越小说</td><td>网游小说</td><td>科幻小说</td></tr></table></font>
<p><h1><div Align="center"> <font color="black" ><a name="C1">超神机械师</a></font></div></h1></p>
<body text="red" link="green" alink="orange" vlink="yellow" bgcolor="#E0FFFF">
<font color="red"><table width="1600px"><tr><td>作 者:齐佩甲</td><td>类 别:网游小说</td><td>最后更新 :2020-11-28 21:07:00</td><td>最 新:1458 信息锚点（一）</td><td>动 作:加入书架, 投推荐票, 直达底部</td></tr></table></font><font color="black"><p>简介：<p>韩萧，《星海》骨灰级代练，被来自东（zuo）方(zhe)的神秘力量扔进穿越大军，携带玩家面板变成NPC，回到《星海》公测之前，毅然选择难度最高的机械系。<p>战舰列队纵横星海，星辰机甲夭矫如龙，幽能炮毁天灭地，还有无边无际的机械大军，静静待在随身仓库里。<p>一人，即是军团！<p>如果不是玩家出现，本书就是正经严肃的穿越异界题材……<p>作为NPC，正常NPC对玩家功能一应俱全……发布任务？好感度调节？传授技能？为什么会有选择成为玩家跟随者选项啊，把这项给我抠掉！哦，可以解除的啊。<p>电竞第一美女？只想学技能？告辞，洒家卖身不卖艺！<p>哎等等，这群玩家我怎么都认识啊！<p>得，现实世界也回到了十年前。</p></font>
<p><h2><div Align="center"> <font color="black" ><a name="C1">目录</a></font></div></h2></p> <table width="1800px"><tr><td><a href="4.html">第一章</td></a><td><a href="5.html">第二章</td></a><td><a href="6.html">第三章</td></a><td><a href="7.html">第四章</td></a><td><a href="8.html">第五章</td></a></tr></table><table width="1800px"><tr><td><a href="9.html">第六章</td></a><td><a href="10.html">第七章</td></a><td><a href="10.html">第八章</td></a><td><a href="10.html">第九章</td></a><td><a href="10.html">第十章</td></a></tr></table></body>
</html>
然后我们和某个阅读网站对比一下
我们可以发现虽然运用上述的知识是可以做一个简单的网站的，但是和网上的网站对比就会发现自制的网站相对来讲美观程度比网上的要差很多，这是因为HTML只是单纯的给出一个网站的样子，而另外一些比如说像两边留白居中这种需要用到css，后续我会继续讲解。
新手小白HTML代码入门相关推荐
- 新手小白一行代码快速生成HTML代码块
1.HTML下有head和body标签 html>head+body 2.HTML下有head和body,head下有title和meta html>head>title+meta^ ...
- 新手小白如何选择入门吉他？注意这几点告别选择困难，附上初学者高性价比吉他品牌推荐！
通常决定一把吉他好坏是由不同的因素共同决定的,而并非是某一个特定因素就可以完全影响的.根据多年弹琴和教学经验整理了几点购琴建议,希望可以给初学者们一些参考~ 1.品牌选择 很多时候品牌是和品质是直接挂 ...
- 新手小白如何选择入门第一把吉他，注意这几点不踩坑，初学者入门吉他推荐
作为入门的第一把吉他,选择质量优良的是非常有必要的,这样能使学习者保持学习的兴趣,提高学习效率.对于新手来说吉他不是并不是越贵越好,要适合,在预算范围里面选最好的.通常决定一把吉他好坏是由不同的因素共 ...
- 新手小白纠结要做角色建模还是场景建模比较好？
经常有很多同学在纠结要做角色建模还是场景建模比较好? 先从难度来说:因人而异,有的人觉得做场景容易有的人觉得很难,这个其实很大一部分和实力没有关系,更多的是你对哪个更有兴趣更适合你,所以你学起来会相对 ...
- 小明Q1投影仪好不好？适合新手小白使用吗？
最近,光峰科技旗下的投影仪品牌小明发布了最新款迷你投影仪--小明Q1.目前正在预售当中,今天就让小编和大家一起来看看小明Q1投影仪好不好?小明Q1投影仪性价比如何?适合租房党购入吗?是否能成为新手小白 ...
- 数据分析从零开始，新手小白如何入门？
数字化,包括Digital.Digitalization.Digital-business-transformation三层含义,即数字式.数字化.数字业务转型.随着越来越多的生活与互联网息息相关,出 ...
- 新手python爬虫代码_新手小白必看 Python爬虫学习路线全面指导
爬虫是大家公认的入门Python最好方式,没有之一.虽然Python有很多应用的方向,但爬虫对于新手小白而言更友好,原理也更简单,几行代码就能实现基本的爬虫,零基础也能快速入门,让新手小白体会更大的成 ...
- 新手小白用记事本编写Java入门程序需要注意的常见问题
Java入门程序-常见问题 1.文件扩展名是否打开 对新手小白来说,文件扩展名是经常容易忘记的.在我们用记事本编写一个好入门程序,然后保存的时侯,需要修改文件的格式为.java,但是如果没有打开文件的 ...
- 适合新手小白入门的前端书籍
总所周知,学习前端肯定离不开书籍的辅导,很多新手小白不知道该怎么选择,以及是否选对了书籍,本文就以过来人身份,给大家推荐一下新手小白学习过程中需要或可以用到的书籍. 一,html+css阶段: 1.& ...
最新文章
- Ruby Fiber指南（三）过滤器
- 中国癌症大数据出来了！每年126万例癌症死亡本可避免
- mysql 去重复屈居_mysql去重复关键字distinct的用法
- 不同类型特征变量之间相关性分析
- OpenGL基础9：纹理
- PADS 改变图纸和图页边界大小
- Sentinel数据处理-基于snap软件
- Python基础学习之正则表达式（完整版）
- 网易云音乐前端性能监控实践
- 大学生计算机自我鉴定500字,大学生计算机专业的自我鉴定范文
- 每日习字｜2020-05-30
- mmkv原理，Android多进程从头讲到尾，成功定级腾讯T3-2
- 2022蓝帽杯初赛wp
- 支持向量机（SVM）——线性支持向量机
- 【KCTF2020秋季赛】异常信号 WriteUp
- Js二代身份证号码正则验证
- Android美食大赏——做一名合格的吃货
- Linux内核--ISA总线原理
- 【JavaScript】——浅谈js（JavaScript）
- suse系统修复忘记密码解决方法