html标签学习1
html:超文本标记语言
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
<!--这是一段注释。注释不会在浏览器中显示。--><!DOCTYPE html> 开头部分
head标签下主要用
meta标签 meta标签下常用
name 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
http-equiv 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
非meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com/"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
</body>
</html>
块级标签 内联标签
body标签
基础标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
<h1>hello</h1> <!--取值范围1-6 字体从大到小 块级标签-->
<b>hello</b> <!--加粗 内联标签-->
<em>hello</em> <!--斜体 内联标签-->
<sub>4</sub> <!--下角标 内联标签-->
<sup>5</sup> <!--上角标 内联标签-->
<hr> <!--下划线 块级标签-->
<br> <!--换行 块级标签-->
<p>hello</p> <!--段落，包裹的内容被换行.并且也上下内容之间有一行空白. 块级标签-->
<strike>hello</strike><!--为文字加上一条中线 内联标签-->
</body>
</html>
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
图形标签: <img>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
<img src="1.jpg" width="200" height="300"title="美女" alt="图片跑掉了">
<img src="0.jpg" width="200" height="300"title="美女" alt="图片跑掉了">
</body>
</html>
超链接标签(锚标签): <a> </a>
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
<a href="" target="_blank" >click</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="https://www.baidu.com/" title="这是什么网页？点开看看">**</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
<a href="https://www.baidu.com/">点我</a> <!--可接网址-->
<a href="1.html">点我1</a> <!--文件地址-->
<a href="#abc">点我2</a> <!--跳转到索引地址-->
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<div id="abc"></div>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
<ol> <!--有序标签-->
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul> <!--无序标签-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<dl> <!--定义标签-->
<dt>安徽省</dt>
<dd>合肥市</dd>
<dd>六安市</dd>
</dl>
</body>
</html>
表格标签 table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
<table border="1" cellpadding="100"><!--border 表格边框，cellpadding内边距，-->
<thead>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">1,2</td> <!--横向合并单元格--> <td rowspan="2">3,6</td> <!--纵向合并单元格-->
</tr>
<tr>
<td>4</td>
<td>5</td> </tr>
</tbody>
</table>
</body>
</html>
星期一菜谱作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
<table border="1">
<tr>
<td colspan="7">星期一菜谱</td>
</tr>
<tr>
<td rowspan="2">素菜</td>
<td colspan="4">青草茄子</td>
<td colspan="3">花椒扁豆</td>
</tr>
<tr>
<td colspan="4">小葱豆腐</td>
<td colspan="3">炒白菜</td>
</tr>
<tr>
<td rowspan="7">荤菜</td>
<td colspan="4">油焖大虾</td>
<td colspan="3">海参鲍鱼</td>
</tr>
<tr>
<td colspan="4">红烧肉</td>
<td colspan="3">烤全羊</td>
</tr>
</table>
</body>
</html>
html标签学习1的更多相关文章
- java struts2入门学习--OGNL语言常用符号和常用标签学习
一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...
- 论文笔记：多标签学习综述（A review on multi-label learning algorithms）
2014 TKDE(IEEE Transactions on Knowledge and Data Engineering) 张敏灵,周志华 简单介绍 传统监督学习主要是单标签学习,而现实生活中目标样 ...
- HTML标签学习总结（2）
点我:HTLM标签学习总结(1) 11. 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器. 语法: & ...
- video标签学习使用
video标签学习使用 学习前的理解 video是HTML5中的新标签,可以用来播放视频.对于不同的浏览器支持的视频格式不一样,但是具体浏览器支持的类型并不清楚. 支持的类型 视频的格式分为编码格式和 ...
- HTML基础标签学习
HTML基础学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...
- html中的一些标签学习
今天看手册学习到了HTML5很多属性.现在总结如下 <body bgcolor="BED1A2" text="FFFFFF" link="yel ...
- （转）DEDECMS模板原理、模板标签学习 - .Little Hann
本文,小瀚想和大家一起来学习一下DEDECMS中目前所使用的模板技术的原理: 什么是编译式模板.解释式模板,它们的区别是什么? 模板标签有哪些种类,它们的区别是什么,都应用在哪些场景? 学习模板的机制 ...
- HTML中的Head标签学习
在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的.它包含了像页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关 ...
- spring自定义标签学习
看到几篇很全的自定义标签,从定义到使用,写的很好. 这里我也是在那里学习的,对学习spring源码也很有帮助. 贴出来与大家共享. http://sammor.iteye.com/blog/11009 ...
- 2、head 标签学习
5秒自动刷新 <meta http-equiv="refresh" content="5,url:http://www.baidu.com" /> ...
随机推荐
- 如何开发一个maven插件
maven是当下最流行的项目管理工具,其丰富的插件为我们的工作带来了很大的便利. 但是在一些情况下,开源的插件并不能完全满足我们的需求,我们需要自己创建插件,本文就从0开始带大家一起创建自己的插件. ...
- 二：Redis：（REmote DIctionary Server）远程字典服务器
Redis是完全开源免费的,用C语言编写的,遵循BSD协议,是一个高性能的(key-value)分布式内存数据库,基于内存运行,并支持持久化的NOSQL数据库,是当前最热门的NOSQL数据库之一,也被 ...
- Jar 和 war 区别
jar包:对于学习java的人来说应该并不陌生.我们也经常使用也一些jar包.其实jar包就是java的类进行编译生成的class文件就行打包的压缩包而已.里面就是一些class文件.当我们自己使用m ...
- CSS 常用列表样式
CSS 常用列表样式 CSS没学扎实,复习记录一下.下面是一些常用的属性 list-style-image 指定一个图片作为列表项的标记 默认值none,可设置为图片的url list-style-i ...
- LeetCode 中等题解（2）
31 下一个排列 Question 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须 ...
- [head first 设计模式] 第一章 策略模式
[head first 设计模式] 第一章 策略模式 让我们先从一个简单的鸭子模拟器开始讲起. 假设有个简单的鸭子模拟器,游戏中会出现各种鸭子,此系统的原始设计如下,设计了一个鸭子超类,并让各种鸭子继 ...
- 讲武德，你们要的高性能日志工具 Log4j2，来了
Log4j 介绍过了,SLF4J 介绍过了,Logback 也介绍过了,你以为日志系列的文章就到此终结了? 不不不,我告诉你,还有一个 Log4j 2,顾名思义,它就是 Log4j 的升级版,就好像手 ...
- （msf使用）msfconsole - meterpreter
[msf] msfconsole meterpreter 对于这款强大渗透测试框架,详情介绍可看这里:metasploit 使用教程 对于msfconsole, Kali Linux 自带.只需用命令 ...
- 使用iMindMap思维导图软件的活动策划模板制定策划方案
活动策划不单单是一个头脑风暴的过程,更是一个整合各项资源.条件的过程.因此我们可以合理的使用思维导图软件来做活动策划.iMindMap(Windows系统)思维导图软件提供了快捷而方便的活动策划模板, ...
- linux（cemtos7.x）安装docker
卸载旧版本 yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest ...