HTML基础
2018-09-06 本文已影响0人
ZplD
一、开发软件
- 谷歌浏览器/火狐浏览器(两个皆能查看网页源代码,区别在于谷歌里面是英文,火狐里面是中文)
- 记事本/HBuilder(编写HTML的软件)
二、HTML的基本框架
在HBuilder中直接创建文件会出现基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
html的整个框架包括head(头部)和body(身体),可以把html比作房子,那么body即为这栋房子的基本架构,而head(或者说是CSS)则是装修,而标签就是用来构造这个基本架构
三、HTML的基本标签
- 标签的基本语法
<标签名>文本</标签名>
- 标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
- 段落标签
<p>段落</p> //自动换行
4.加粗,倾斜,下划线
<b>加粗文本</b>
<i>倾斜文本</i>
<u>加下划线的文本</u>
5.换行,水平线
因为HTML语言是不会自动换行的,需要类似p标签才会自动换行
</br> // 换行
</hr> // 一条水平线
6.超链接标签
<a href="">文本</a> // href里面填写要跳转到的页面的链接,如果填写的是#则回到原本的页面
7.图片标签
<img src=""/> // src中放本地图片的地址,或者网上的图片的链接
8.列表标签
- 无序标签
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
# ul代表无序列表,一个li为一个列
- 有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
# 有序列表会标出该列是第几列
9.表格标签
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
# tr为行,td为单元格,该代码生成3*3表格
10.div和span标签
<div></div> // 常用来布局
<span></span> // 常用来放置文本
11.表单控件
- 表单结构
<form action="" method="">
</form>
# action为表单中内容提交到的网页,method为提交方法
- input
#基本语法
<input type="" value="" />
#文本框,显示一个可以输入的文本框
<input type="text"value="" /> // value的值为文本最初显示的值
#密码文本框,显示一个可以输入密码的文本框
<input type="password" />
#按钮控键,显示一个可点击的按钮
<input type="button"value="" /> // value为按键里面显示的文本
#提交按键,一个可以提交表单内容到action的按钮
<input type="submit" value=""/> // value不写的话默认为提交
#重置按键,一个可以重置表单的按钮
<input type="reset" value="" />
#多选框
<input type="checkbox" name='sex'/>男
<input type="checkbox" name="sex" checked="checked"/>女
//哪个标签里面有checked="checked",默认打钩,可多选
#单选框
<input type="radio" name='sex'/>男
<input type="radio" name="sex" checked="checked"/>女
//不可多选
#下拉框
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
//显示一个可下拉选择的框体,option内的内容为下拉框显示的内容
