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

随机推荐

linux网络配置及IP绑定
在学习时,参考了这篇文章:http://blog.csdn.net/collection4u/article/details/14127671:在这篇文章中作者讲述了VMware中虚机的三种网络模式: ...
dns服务器报错解决
搭了个dns服务器,配置完毕老是报错,这里总结一下常见思路: ①关闭firewalld ②关闭selinux ③/var/named里面的配置文件所属用户组是否是root:named ④named.c ...
Microsoft.XMLHTTP基本用法
客户端调用XMLHTTP的过程很简单,只有5个步骤:1.创建XMLHTTP对象2.打开与服务端的连接,同时定义指令发送方式,服务网页(URL)和请求权限等.客户端通过Open命令打开与服务端的服务网页 ...
HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
深入理解dispatch_sync
关于GCD的基础知识,之前写过一篇博客,详见GCD基础知识.虽然之前已经梳理过了,但对很多知识点的理解仍然不够透彻…写这篇博客的原因是在阅读AFNetworking代码时遇到一些奇怪的代码. 如下: ...
Mother's Milk
链接分析:我们用vis[i][j][k]来记录A,B,C三个状态是否被访问过,同时用s[i]来记录C的所有可能值,当i==0时,如果j合法,则标记s[k]=1,最后统计所有为1的s即可 /* PRO ...
[JSOI 2007] 字符加密
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1031 [算法] 将字符串倍长 , 构建后缀数组 , 然后按要求输出即可时间复杂度 ...
Memcached使用总结之:使用Python操作memcache
Python连接memcached的库有很多,处于简单以及高效的原则,最终选择了pymemcache,优点完全实现了memcached text协议对于send/recv操作可以配置timeout支持 ...
IOCP编程小结（上）
前段时间接手了一个网络游戏前端连接服务器的开发工作,由于服务器需要在windows平台上部署,并且需要处理大量的客户端连接,因此采用IOCP来做为服务器端的编程模型就成了不二选择.虽然我对服务器开发并 ...
C++实现合并两个已经排序的链表
/* * 合并两个已经排序的链表.cpp * * Created on: 2018年4月11日 * Author: soyo */ #include<iostream> using nam ...

02html基础