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 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

随机推荐

YTU 2481: 01字串
2481: 01字串时间限制: 1 Sec 内存限制: 128 MB 提交: 103 解决: 72 题目描述对于长度为7位的一个01串,每一位都可能是0或1,一共有128种可能.它们的前几个是 ...
java 开发面试题小整理(二)
51.Anonymous Inner Class(匿名内部类)是否可以继承其它类?是否可以实现接口? 答:可以继承其他类或实现其他接口,在Swing编程和Android开发中常用此方式来实现事件监听和 ...
HDU - 1874 畅通工程续（最短路径）
d.已知起点和终点,请你计算出要从起点到终点,最短需要行走多少距离. s.最短路径 c.Dijkstra单源最短路 /* Dijkstra单源最短路权值必须是非负单源最短路径,Dijkstra算法 ...
一个小bug，关于fuse_mount_sys
在mount.c 中的 int fuse_mount_sys 函数中,如果注销掉 fd的open语句,此时fd一般为0. 然后,用普通用户运行ssfs且不加-f参数,一切显示正常 fuse_moun ...
java前端学习步骤
前端说的比较好的知乎:https://www.zhihu.com/question/22759296 网站开发绝杀技:https://ke.qq.com/course/20945?from=qqcha ...
并不对劲的bzoj4650:loj2083:uoj219:p1117:[NOI2016]优秀的拆分
题目大意 "优秀的拆分"指将一个字符串拆分成AABB的形式十次询问,每次给出一个字符串S(\(|S|\leq3*10^4\)),求它的所有子串的优秀的拆分的方案数之和题解此题 ...
python利用mongodb上传图片数据 : GridFS 与 bson两种方式
利用mongodb保存图片通常有两种方法,一种是将图片数据转化为二进制作为字典的键值对进行保存,另一种是利用mongodb提供的GridFS进行保存,两者各有利弊.性能方面的优劣未曾测试,无法进行评价 ...
JAVA interrupte中断线程的真正用途
Java线程之中,一个线程的生命周期分为:初始.就绪.运行.阻塞以及结束.当然,其中也可以有四种状态,初始.就绪.运行以及结束. 一般而言,可能有三种原因引起阻塞:等待阻塞.同步阻塞以及其他阻塞(睡眠 ...
HBase之一：HBase原理和设计
一.简介 HBase —— Hadoop Database的简称,Google BigTable的另一种开源实现方式,从问世之初,就为了解决用大量廉价的机器高速存取海量数据.实现数据分布式存储提供可靠 ...
整合ssh的时候出现空指针java.lang.NullPointerException
转自:https://blog.csdn.net/koudailidexiaolong/article/details/9468857 HTTP Status 500 - type Exception ...

02html基础