02_html

1、几个标签

1.1 meta标签

meta标签的属性有name和http-equiv，其中name属性用于描述网页，对应于content(网页内容)。

<meta name="kaywords" contect="">向搜索引擎说明你的网页的关键词

<meta name="description" contect="">告诉搜索引擎你的站点的主要内容

http-equip属性用于重定向，如：

<meta http-equiv="refresh content="5;http://www.baidu.com"

1.2 link标签

link标签可以用于引用外部的css，还可以引用title图片(icon)如：

<link rel="icon" href="1.icon">

2、HTML表格

2.1 创建表格的基本语法

2.2 表格中的属性

利用表格制作细线表格，HTML如下：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>细线表格</title>

</head>

<body>

	<table width="500px" height="300px" bgcolor="grenn" cellspacing="1px">

		<tr bgcolor="white">

			<td></td>

			<td></td>

			<td></td>

			<td></td>

		</tr>

		<tr bgcolor="white">

			<td></td>

			<td></td>

			<td></td>

			<td></td>

		</tr>

		<tr bgcolor="white">

			<td></td>

			<td></td>

			<td></td>

			<td></td>

		</tr>

		<tr bgcolor="white">

			<td></td>

			<td></td>

			<td></td>

			<td></td>

		</tr>

	</table>

</body>

</html>

2.3 单元格合并

表标题标签 <caption> </caption>

表头标签 <th> </th>和上面td、tr标签类似

单元格合并 colspan/rowspan

实例：实现下面的表格

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>单元格合并</title>

</head>

<body>

	<table width="300px" height="200px" border="1px" valign="center" cellspacing="0">

		<caption align="center">学科</caption>

		<tr>

			<td>目录</td>

			<td colspan="2" align="center">课程</td>

		</tr>

		<tr>

			<td rowspan="2">Web</td>

			<td>html基础教程</td>

			<td>css基础教程</td>

		</tr>

		<tr>

			<td>javascript基础教程</td>

			<td>PHP基础教程</td>

		</tr>

	</table>

</body>

</html>

3、表单

表单的作用主要是用于数据信息的采集。

表单的组成：

提示信息
表单控件
表单域

3.1 表单语法

<form name="form_name" action="url" method="get|post">…</form>

name:定义表单的名称
method：定义表单结果从浏览器传送到服务器的方式，默认为：get
action:用来指定表单处理程序的位置(服务器端脚本处理程序)

组合表单：

<fieldset>标签没有必需的或唯一的属性

<legend>标签为fieldset元素定义标题

3.2 input控件

3.3 textarea控件

<textarea cols="每行中的字符数" rows="显示的行数">

       文本内容

</textarea>

3.4 selection控件

实例：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>信息注册</title>

</head>

<body>

	<form action="1.php" method="get">

		<fieldset>

			<legend>信息注册</legend>

			用户名：<input type="text" name="username"><br>

			密 码：<input type="password" name="password"><br>

			籍贯：<select name="address" id="">

				<optgroup label="上海">

					<option value="">1</option>

					<option value="">2</option>

					<option value="">3</option>

				</optgroup>

				<optgroup label="北京">

					<option value="">3</option>

					<option value="">4</option>

					<option value="">5</option>

				</optgroup>

				<optgroup label="广州">

					<option value="">6</option>

					<option value="">7</option>

					<option value="">8</option>

				</optgroup>

			</select><br>

			性别：<input type="radio" checked="checked" name="sex"> 男<input type="radio" name="sex"> 女 <br>

			爱好：<input type="checkbox" name="hobby">打篮球

			<input type="checkbox" name="hobby">打游戏

			<input type="checkbox" name="hobby">睡觉

			<input type="checkbox" name="hobby">逛街

			<br>

			请上传你帅气的头像：<input type="file">

			<br>

			介绍自己：<textarea name="introduction" id="" cols="30" rows="10"></textarea>

			<br>

			<input type="submit" value="提交">

			<input type="reset" value="重置">

			<br>

			<input type="image" src="im.jpg">

		</fieldset>

	</form>

</body>

</html>

4、标签语义化

4.1 标签语义化的概念

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

4.2 标签语义化的意义

网页结构合理
有利于SEO：和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
便于团队开发和维护

02html基础的更多相关文章

Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介快速入门系列--HTML-02基础元素快速入门系列--HTML-03高级元素和布局快速入门系列--HTML-04进阶概念示例 ...
02- HTML网页基础知识与浏览器介绍
1.认识网页网页主要由文字,图像和超链接等元素构成.当然,除了这些元素,网页还可以包含音频,视频,以及flask等. 如图所示就是一个网页: 网页是如何形成的呢? 它是由前端人员写的代码,经过浏览器 ...
第五模块：WEB开发基础第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法下载windows x64版本下载之后解压,得到以下东西为了方便,我们直接在这个目录中 ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
Golang，以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
[C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法目录简介匿名方法的参数使用范围委托示例简介在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

随机推荐

webpack与grunt/glub 的比较
webpack.grunt.glub 都是前端打包的工具: grunt/gulp 的工作方式是:在一个配置文件中,指明对某些文件进行压缩.组合.检查等任务的具体步骤,然后在运行中输入相应的命令. we ...
sql server filter table name
https://stackoverflow.com/questions/26577464/how-to-find-a-table-in-sql-server-if-only-the-partial-t ...
DedeCms如何调用Discuz论坛主题等数据方法总结
DedeCms如何调用Discuz论坛主题等数据方法总结同时使用Dedecms和Discuz论坛的朋友,难免要在网站内调用论坛的内容.使用Discuz论坛的JS调用方式,对搜索引擎不够友好,下面我们 ...
CentOS 7中ip命令将逐渐取代 ifconfig
首先看下图: 要安装ip,请点击这里下载iproute2套装工具 .不过,大多数Linux发行版已经预装了iproute2工具. 你也可以使用git命令来下载最新源代码来编译: $ git clone ...
RDA PQ工具使用（Adi Analysis）
PQ工具“ColorAdjustTool.exe”,请注意芯片的选择: RDA512C选择533 RDA8501选择331 RDA8503选择131 工模菜单 COLOR LUT: R/G/B/Y/ ...
BackTrack5(BT5)各版本下载
BT5R3(最新版本)http://www.nigesb.com/backtrack-5-r3-released.html BT5R2KDE版32位: http://ftp.halifax.rwth ...
3.9-3.10 分布式协作服务框架Zookeeper
一.zookeeper概述一个开源的分布式的,为分布式应用提供协调服务的Apache项目. 提供一个简单的原语集合,以便于分布式应用可以在它之上构建更高层次的同步服务. 设计非常易于编程,它使用的是 ...
015--python集合和字符串
一.集合关系测试交集: 两个都有 .intersettion() 或用 & 符号差集: 列表a有,列表b没有 .difference() 或用 - 符号并集: 两列表合并 ...
Linux 命令 -- tar
tar 命令 tar命令可以为linux的文件和目录创建档案.利用tar,可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向档案中加入新的文件.tar最初被用来在磁带上创建档案,现 ...
UVaLive 7454 Parentheses (水题，贪心)
题意:给定一个括号序列,改最少的括号,使得所有的括号匹配. 析:贪心,从左到右扫一下,然后统计一下左括号和右括号的数量,然后在统计中,如果有多了的右括号,那么就改成左括号,最后如果两括号数量不相等, ...

02html基础