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

随机推荐

antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
HDU1693 Eat the Trees —— 插头DP
题目链接:https://vjudge.net/problem/HDU-1693 Eat the Trees Time Limit: 4000/2000 MS (Java/Others) Mem ...
【Java】DateUtil（1）
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...
[Selenium] 使用Firefox Driver 示例
//导入Selenium 库和FirefoxDriver 库 package com.learningselenium.simplewebdriver; import org.openqa.selen ...
空间数据索引RTree完全解析及Java实现
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MongChia1993/article/details/69941783 第一部分空间数据的背景介 ...
lnmp-详细编译安装步骤
CentOS 7.0编译安装Nginx1.6.0+MySQL5.6.19+PHP5.5.14 一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这 ...
Python 赋值、浅拷贝和深拷贝
初学Python,和C++还是有许多不同.直接赋值.浅拷贝和深拷贝,这三种拷贝对象的操作之间还是有许多的区别.Python语言的版本为2.7,在Pycharm中进行实验. 一.直接赋值用下面的代码来 ...
B. Arpa’s obvious problem and Mehrdad’s terrible solution
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
（二十八）分类信息的curd-分类信息删除
删除分类步骤分析: 1.在list.jsp上编写删除连接 /store/adminCategory?method=delete&cid=?? 2.在delete方法中获取cid 调用ser ...
Ribbon整合Eureka，出现 No instances available for XXX 异常
请观察这里的片段有没有问题? @Bean @LoadBalanced public RestTemplate restTemplate() { return new RestTemplate(); } ...

02html基础