HTML知识点

HTML结构

主要包括<head><body>两个部分,其中要特别注意对头部的应用。
头部包含多种标签:
<title> 项目标题
<link> 引入CSS文件
<style> 为文档定义样式信息(但一般样式都写在项目对应css文件中)
<meta> 提供HTML文档的元数据,元数据不会显示在页面中但是机器是可读的。常用的meta元素被用于规定页面的描述关键词文档的作者、最后修改的日期、以及适配移动端等等。此外,meta中的name和content属性还用来帮助一些搜索引擎来索引到您的页面,是SEO常用的方法。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>网页标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="此网页描述" />
/*移动端屏幕适配*/
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
</head>
<body>
网页正文内容
</body>
</html>

块级元素与内联元素

块级元素:(独占一行,可以自己定义宽高和边距)
包括 <h1~6> <p> <div> <table> <tr> <th> <td> <form> <ul> <li> <ol> <dd> <dl> <dt>
内联元素:(不会独占一行,不能自己定义宽高、边距,要靠内容撑起来)
包括 <span> <a> <img> <input> <option> <i> <em> <b> <strong> <textarea>

内联元素转换成块级元素:使用display:block;
块级元素转换成内联元素:使用display:inline;
内联块元素:使用display:inline-block;(既可以定义宽和高,又不会独占一行)

表格与表单

  • 表格
<table>
<tr> /*-------行*/
<td></td> /*-------列*/
<td></td>
.....
</tr>
</table>

注意
colspan =”2” 横跨两列
rowspan =”2” 横跨两行
cellpadding 单元格边距(字与内边框的距离)
cellspacing 单元格间距(内外边框的间距)

  • 表单
    一定要用<form></form>包裹
<form action="" method="post">
用户名:<input type="text" name="username"/> /*文本框*/
密 码:<input type="password" name="pwd"/> /*密码域*/
<input type="submit" value="登录"/> /*提交按钮*/
<input type="reset" value="重置"/> /*重置按钮*/
<input type="checkbox" name="v1">西瓜 /*复选框*/
<input type="checkbox" name="v1">苹果
<input type="radio" name="sex"/>男 /*单选按钮*/
<input type="radio" name="sex"/>
/*下拉列表*/
选择你的出生地:
<select name="bir">
<option value="">--请选择--</option>
<option value="bj">北京</option>
<option value="bj">上海</option>
<option value="cq">重庆</option>
</select>
请留言:
<textarea cols="30" rows="10"></textarea> /*文本区 cols列数 rows行数*/
选择要上传的文件
请选择文件:<input type="file" name="myfile"/> /*上传域*/
</form>

表单效果:

更多

更多HTML基础知识可以到W3SCHOOL HTML官方教程或者菜鸟教程中继续学习。