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

随机推荐

一步一步学Silverlight 2系列（24）：与浏览器交互相关辅助方法
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
Oracle dbf文件删除后，启动服务ORA-01157问题
有一个数据库硬盘空间满了,查看发现一个dbf超大,并且不在规定的路径下,知道是一个非重要数据文件,于是删除. 后来重启数据库时, SQL> startupORACLE instance star ...
接口_简单get接口_第一个接口
import flask,json # print(__name__) ##__name__代表当前这个python文件 server = flask.Flask(__name__) #把咱们当前的这 ...
LA-2678 (尺取法)
题意: 在一个长度为n的序列中,找到最短的长度序列,使其和大于等于s; 思路: two pointer ,水题; Ac代码: #include <bits/stdc++.h> /* #in ...
[Selenium] 操作 HTML5 中的 Canvas 绘制图形
测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...
Linux命令排查线上问题常用的几个
排查线上问题常用的几个Linux命令 https://www.cnblogs.com/cjsblog/p/9562380.html top 相当于Windows任务管理器可以看到,输出结果分两部分, ...
SPOJ_705_New Distinct Substrings_后缀数组
SPOJ_705_New Distinct Substrings_后缀数组题意: 给定一个字符串,求该字符串含有的本质不同的子串数量. 后缀数组的一个小应用. 考虑每个后缀的贡献,如果不要求本质不同 ...
年少和 Smart の日常比赛 R3
在洛谷上参加了个比赛....写写题解 rank3....共5人...(捂脸没有注明是官方代码的均是我比赛时本人提交的代码 T1 洗牌题目描述小明把 n (n 为偶数)张牌按编号顺序 1, 2, ...
CSS counter计数器(content目录序号自动递增)详解
一.CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用,而content属性貌似专门用在before/after伪元素上的.于是,就有了,“计数器↔伪元素↔content属 ...
CodeForces 718A Efim and Strange Grade (贪心)
题意:给定一个浮点数,让你在时间 t 内,变成一个最大的数,操作只有把某个小数位进行四舍五入,每秒可进行一次. 析:贪心策略就是从小数点开始找第一个大于等于5的,然后进行四舍五入,完成后再看看是不是还 ...

02html基础