初学HTML(一) | Personal Blog

初学HTML(一)

发表于

1.安装编译器

HBuilder

2.html的框架

1
2
3
4
5
6
7
8
9
10
<html>  
  <head>  
    <title>
  
    </title>  
  </head>  
  <body>  

  </body>  
</html>

3.html的段落

在 <body> 中添加如下代码

1
<p>Hello World!</p>

<p></p> 中的内容代表着一整段

4.html的字体大小

在 <body> 中添加如下代码

1
2
3
4
5
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>

h后面的数字代表着不同级别的标题大小

5.html的换行

在 <body> 中添加如下代码

1
<br/>

<br/>是一种单标签，并不是以标签对的形式存在的，在<br/>之后网页会进行换行操作

6.html的分隔线

在 <body> 中添加如下代码

1
<hr/>

同样，<hr/>也是一种单标签

7.html的a标签

在 <body> 中添加如下代码

1
<a href="这里写网址">这里写链接名</a>

这是a标签的最简单的形式，仅有一个属性，这样就可以在网页中插入类似超链接的元素了
例如：
<a href="https://ONLYUNIVERSE.github.io">我的博客</a>

==注：a标签可以在其他标签内使用==

8.html的标题

在<title>中添加标题即可

9.html的注释

<!--注释 -->
其中的字符不会在网页上展示

10.html之图片处理

在 <body> 中添加如下代码

1
<img src="图片路径" alt="图片提示" height="高度px" width="宽度px"/>

同样的，img标签也是单标签，末尾须加/
在src属性下输入图片地址，alt属性在鼠标悬浮是会弹出提示，px代表像素单位

11.html各种表单元素

在 <body> 中添加如下代码

1
2
3
4
5
6
7
8
9
10
11
<form>
  <label for="与其关联的ID号">提示内容</lable>
  <input id="给它一个独一无二的id名" type="text"/>
  <input id="给它另一个独一无二的id名" type="password"/>
  <input id="再给它来一个独一无二的id名" name="共同的名字" type="radio"/>
  <input id="再给它来一个独一无二的id名" name="共同的名字" type="radio"/>
  <input id="再给它来一个独一无二的id名" name="共同的名字" type="radio"/>
  <input id="每一个id名都得不一样" name="另一个共同的名字" type="checkbox">
  <input id="每一个id名都得不一样" name="另一个共同的名字" type="checkbox">
  <input id="每一个id名都得不一样" name="另一个共同的名字" type="checkbox">
</form>

label 相当于前面的提示性语言
input 表单形成一个输入框

type属性规定了输入框中能输入的内容的格式；例如说密码输入框、单选框、多选框
name属性让它们紧紧联系在一起