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" /> ...
随机推荐
- ceph的df容量显示计算
显示数据 [root@lab201 ~]# ceph df GLOBAL: SIZE AVAIL RAW USED %RAW USED 1092T 404T 688T 63.01% POOLS: NA ...
- 2018.1.15复习_ css+js
[1]几个常见的css标签:--------------------------------------------------background-color; 设置背景颜色background-p ...
- 还是畅通工程(最小生成树 并查集 Prim Kruskal)
Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府"畅通工程"的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只 ...
- day01-系统基础信息模块
前言:2015年,由于大规模采用云平台虚拟机部署应用,每套应用系统的MySQl.接口机.WEB服务器.文件服务器需要经常进行版本升级.配置更新.安全补丁加固.iptables调整.配置核实,大量的手工 ...
- cProfile分析程序性能
Python标准库中提供了三种用来分析程序性能的模块,分别是cProfile, profile和hotshot,另外还有一个辅助模块stats.这些模块提供了对Python程序的确定性分析功能,同时也 ...
- 解决adober reader已停止工作的问题
公司电脑出现打开pdf阅读器后没到1分钟就闪退,应该是adobe做了什么正版审核策略,让安装了这个软件的电脑自动连接到adobe服务器验证导致. 解决方法:在C:\Windows\System32\d ...
- H5系列之常用的语义元素
H5添加了几个新标签,带有语义化的标签,像我们的div 和 span 标签,你说他两能干嘛呢, 好像他两什么事都能干.举个例子,你家里的房子,有几个房间,如果不分房间的话,是不是你 今天睡这里,明天睡 ...
- iOS中字符串转float类型失真的解决办法
最近在做项目的过程中,偶然遇到了一个问题,就是字符串和浮点类型的转换.以往都是通过[NSString stringWithFormat:@"%d",goodcount]这种方式转换 ...
- python3错误AttributeError: 'TestSequenceFunctions' object has no attribute 'seq'
对比了两段代码发现,原来是setUp要用用大写才能被正确引用. 修改后,代码运行成功.
- 新手上路之JDK8的下载、安装与PATH环境变量的配置
有些东西不常用总是会忘记,所以想把它写下来,方便以后自己想用的时候找得到:同时也进一步加深自己的记忆.接触JAVA的时间不长,言语或内容有不当之处,欢迎大佬们指正. 每一个学习JAVA的人都会经历的过 ...