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" /> ...
随机推荐
- hibernate 基础知识
1.hibernate的配置文件,一般放在classpath的根目录下,默认命名为hibernate.cfg.xml,代码例子如下: <!DOCTYPE hibernate-configurat ...
- ceph各个版本之间参数变化分析
前言 本篇主要是分析ceph的版本之间参数的变化,参数变化意味着功能的变化,通过参数来分析增加,删除,修改了哪些功能,以及版本之间的变化,本篇主要通过导出参数,然后通过脚本去比对不同的版本的参数变化 ...
- PHP 使用gd库压缩图片并生成新图片返回全路径
使用gd库前,先检查是否开启了gd库 phpinfo(); 如果在php配置信息里找到了gd库,那么就是开启了,没开启的自行百度如何开启php gd库 既然开启了gd库,那么直接再php里写入以下代码 ...
- 查看mongodb状态
netstat -ntlp|grep 27017
- linux 用户组操作
1. 添加用户到...目录中useradd -M -s /目录 username 2. 添加用户属于多个组 usermod -G 本组(用户名),组1,组2... 用户名 3. mysql添加禁止登录 ...
- C#推流RTMP，摄像头、麦克风、桌面、声卡（附源码）
这段时间一直都在研究推流的技术,经过断断续续将近两个月的摸索实践,终于能稳定地推流了. 这个demo的主要功能就是将采集到的摄像头或桌面的视频.以及麦克风或声卡的音频数据推到Nginx-RTMP服务器 ...
- 最全JVM与性能调优知识点总结，看看哪些是你还没掌握的？
前言 JVM调优是每个高级程序员的必修课,在本章中,我会从发展过程以及核心价值来剖析JVM的体系结构.为了让大家更好的理解JVM的工作机制, 我会在讲解完运行时数据区之后,再通过一个类的加载过程到这个 ...
- 面试官：你说你精通SpringBoot，你给我说一下类的自动装配吧
## 剖析@SpringBootApplication注解 创建一个SpringBoot工程后,SpringBoot会为用户提供一个Application类,该类负责项目的启动: ```@Spring ...
- FL Slayer合成器功能之顶部组件介绍
本章节采用图文结合的方式给大家介绍电音编曲软件--FL Studio中的插件FL Slayer合成器中的顶部组件,它是电吉他模拟合成器,感兴趣的朋友可以一起沟通学习交流. FL Slayer(杀手)合 ...
- 如何卸载MathType 7？
作为好用的公式编辑器,一般情况下是不会将其从电脑上卸载的,但是当电脑负荷过多,导致电脑运行缓慢时,就需要考虑卸载一些软件,本节就来学习卸载MathType 7的方法. 具体操作步骤如下: 1.打开控制 ...