HTML入门(0基础)-你要的这里全都有-带你进入HTML的世界:)
程序员文章站
2022-04-29 10:54:56
...
前言
此篇博客作为HTML的引入文章,大概20分钟即可看完,看了这篇文章后可以让您快速上手HTML。
HTML简介
- HTML是用来描述网页的语言。
- HTML:Hyper Text Markup Language(超文本标记语言)。
- 超文本是指页面可以包含图片、链接、甚至音乐、程序等非文字元素。
- HTML不是一种编程语言,而是一种标记语言(markup language)。
- 标记语言是一套标记标签(markup tag)。
- HTML使用标记标签来描述网页。
Hello World
一个HTML文件的基本框架。
标签语法
- HTML有两种标签,一种叫又开始有结束的标签,如<div></div>。另外一种叫字节数标签,如<br>。
- HTML标签不区分大小写。
- HTML标签可以嵌套,但不能交叉嵌套。
- HTML标签必须正常关闭。
- HTML中属性必须有值,且必须加双引号。
- HTML注释不能嵌套
注释标签
<!-- 这里是注释 -->
因为我认为注释十分重要,所以把它放在最前面。
常用标签
为方便展示,我写在下方代码块中。 * 标题标签:
* 语法:<h1></h1> ~ <h6></h6>
* 作用:起标题
效果:
- div标签:
* 语法:<div></div>
* 作用:无实际意义,布局
* 注释:通常会把其他标签写在div标签中,以此达到“分块”的效果,div标签会自动换行。
- 段落标签:
* 语法:<p>
* 作用:起段落
- 转义字符:
* 语法:以&符开头,以;结束
* 常用
* 空格: (普通空格)  (中文空格)
* 大于号:>
* 小于号:<
* 版权号:©
- 列表:
* 有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
* 无序列表
<ul>
<li></li>
<li></li>
<li></li>
</il>
效果:
注:此外还有一些其他基础标签
i i
标签 | 作用 |
---|---|
<b></b> | 加粗 |
<i></i> | 斜体 |
<pre></pre> | 预格式(可以让你的代码文本不串行) |
<del></del> | 删除线( |
<ins></ins> | 下划线(让你的文本有下划线) |
<span></span> | 内联元素,与div相似,但不会换行 |
重点标签
- 图片标签:
<img src="图片路径" alt="图片丢失时的提示文本" title="鼠标悬停时的提示">
* 路径问题:
* 目标文件与当前文件在同包,直接使用
* 目标文件与当前文件不在同包,先找目标文件的父包,再找目标文件
* 返回上一级的代码: ../
* 也可以使用绝对路径
效果如图:
- 超链接:
<a href="目标地址链接" target="链接以何种方式打开(_self|_blank)">此处可以是文本|图片</a>
效果如图:
- 表格
* 表格
* 语法:
<table border="边框粗细">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
* 跨行跨列 rowspan(跨行) colspan(跨列)
效果如图:
- 表单
* 表单
* 语法:
<form action="提交后目标网页路径" method="get或者post">
<input type="选项卡类型" name="名称" value="初始显示的值" checked="是否选中">
</form>
* 使用form标签制作表单
* 使用input标签制作表单项
* type:表单项类型
* text:文本框
* password:密码框
* reset:重置
* submit:提交
* file:文件域
* hidden:隐藏域
* radio:单选按钮
* checkbox:多选按钮
* checked:默认选中(只有type为radio与checkbox时可用)
* name:名称,有了name属性才可以提交数据到目标的页面
* value:值,给表单框一个初始 显示的值
* 使用select option制作下拉列表
* action属性:表单提交的路径(位置)
* method属性:get|post get可以在导航栏看见name post不能
效果如图:
- 下拉菜单
* 语法
<select>
<option></option>
<option></option>
<select>
效果如图:
其他
至此,HTML的大部分知识您已经了解,你只需要稍加亿些细节(如给标签添加属性)即可掌握HTML5。
希望本篇文章可以将您带入HTML的世界:)
注释:
如果本篇文章含有错误部分,请在留言区留言。上一篇: win下开发跨平台GUI程序的另类选择
下一篇: 高性能WEB开发之Web性能测试工具推荐