一.HTML基础知识
-
概念
HTML,全称为:Hyper Text Markup Language 超文本标记语言。
标记语言就是一套标记标签,HTML就是使用标签来描述网页的。
标记语言并不是编程语言。
-
标签
-
HTML标签是由尖括号包围的,比如<html>,</html>
-
标签可分为两类:
一类是成对出现的,比如<div></div>,称为开始标签和结束标签
一类是单独出现的,比如</br>
-
开始标签中可以定义属性,属性是由键值对构成的,值需要使用引号引起来(单引号双引号都可以),但以后一般不在标签中定义属性,一般使用CSS
-
标签不区分大小写,但一般建议使用小写。
-
二.标签学习
-
注释
``
-
文件标签
-
html
:html页面的根标签
-
head
:头标签,用于指定html页面的一些属性,以及引入外部资源,如
<meta charset="utf-8">
定义网页编码格式为utf-8 -
title
:标题标签(会在浏览器的标题出现)
-
body
:定义文档的主体,也就是网页可见的页面内容
-
<!DOCTYPE html>
:html5中定义该文档是html文档
-
-
文本标签
-
<h1> - <h6>
标题标签,从h1到h6,字体依次递减
-
<p>
paragraph,段落的缩写,段落标签
-
<br>
换行标签
-
<hr>
显示一条水平线
属性有:
- color:颜色
- width:宽度
- size:高度
- align:对齐方式
- center:居中对齐
- left:左对齐
- right:右对齐
-
<b>
字体加粗
-
<i>
字体倾斜
-
<font>
字体标签
-
<center>
文本居中
属性有:
- color:颜色
- size:大小
- face:字体
-
-
图片标签
-
<img>
属性:
- src:指定图片的位置
-
-
列表标签
- 有序列表
ol
li
- 无序列表
ul
li
- 有序列表
-
链接标签
-
a
定义一个超链接
属性:
- href:指定访问的url
- target:指定打开url的方式
- _self:默认值,在当前页面打开
- _blank:在空白页面打开
-
-
div和span
-
div
块级标签,每一个div占满一整行
-
span
行内标签,文本信息在一行展示
-
-
表格标签
-
<table>
定义表格,表格内容包裹在
<table></table>
中间属性有:
- width:宽度
- border:边框
- cellpadding:定义内容和单元格的距离
- cellspacing:定义单元格之间的距离
- bgcolor:背景色
- align:对齐方式
-
tr
定义表格的行
属性有:
- bgcolor:背景色
- align:对齐方式
-
td
定义表格的列
属性有:
- colspan:合并列
- rowspan:合并行
-
th
定义表格的标题栏,文字会加粗
-
<caption>
定义表格的标题,会在表格的顶部显示出来
-
<thead>
创建单独的表头
-
<tbody>
表示表格的主体
-
<tfoot>
创建一个单独的表格页脚
-
-
表单标签
-
form
用于定义表单,采集用户数据。
属性:
-
action:指定提交数据的URL
-
method:提交的方式
比较常用的两种是:get和post
表单项中的数据想要被提交,必须指定其name属性
-
-
input
可以通过type属性,改变元素的显示样式
type属性:
-
text:文本输入框
- placeholder:指定输入框的提示信息。
-
password:密码输入框
-
radio:单选框
注意点:
- 要想多个单选框实现单选效果,则多个单选框的name属性必须一样
- 一般会给每一个单选框提供value属性,指定被选中后提交的值
- check属性,可以设置默认选中值
-
checkbox:复选框
注意点:
- 一般会给每一个单选框提供value属性,指定被选中后提交的值
- check属性可以设置默认选中值
-
file:文件选择框
-
hidden:隐藏域,用于提交一些信息
-
按钮:
- submit:提交按钮,用于提交表单
- button:普通按钮
- image:图片提交按钮
-
label:指定输入项的文字描述信息
lable的for属性一般会和input的id属性值对应,一旦对应了,点击label,input输入框就会获得焦点
-
select:下拉列表
子元素:option,指定列表项
-
textarea:文本域
属性:
- cols:指定列数,也就是每一行有多少个字符
- rows:默认多少行
-
-
网友评论