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" /> ...
随机推荐
- java 关于 a==null 和 null==a， a.equals("123") 和“123”.equals(a)
一: a==null 和 null==a 实验 所以 a==null 和 null==a 没区别 二: a.equals("123") 和"123".equal ...
- 《.NET 5.0 背锅案》第7集-大结局：捉拿真凶 StackExchange.Redis.Extensions 归案
第1集:验证 .NET 5.0 正式版 docker 镜像问题 第2集:码中的小窟窿,背后的大坑,发现重要嫌犯 EnyimMemcachedCore 第3集-剧情反转:EnyimMemcachedCo ...
- SQL Server 2008-LinkServer操作ORACLE
链接来源:https://www.cnblogs.com/wangyong/p/Oracle.html 最近项目有需求需要通过SQL Server2008中的数据自动更新到ORACLE中,其实,一开始 ...
- linux shell简单快捷方式与通配符（元字符）echo -e文本显示颜色
1.shell常用快捷方式 ^R 搜索历史命令^D 退出^A 光标移动到命令行最前^E 光标移动到命令行最后^L 清屏^U 光标之前删除^K 光标之后删除^Y 撤销^S 锁屏^Q 解锁 2.多条命令执 ...
- BurpSuite 抓安卓app包
认准夜神安卓模拟器,下了几个其他的模拟器都没有代理的功能 一.夜神安卓模拟器设置代理 1.点击右下角的设置 2.点击设置,进入到WIFI连接选项 3.进入列表后,鼠标点击wifi位置,长按左键,会出现 ...
- python-网络安全编程第二天（文件操作）
前言 才吃完火锅嘿嘿,吃完把今天所学的内容写个博客当做笔记用哈哈! 文件操作 f=open("test.txt",w)直接打开一个文件,如果文件不存在则创建文件open模式w:以写 ...
- mysql5.5升级5.7（1）
卸载旧版本mysql 当然要记得备份数据库数据啦 1.查看需要卸载的部分: rpm -qa |grep -i mysql 2.开始卸载: yum remove mysql* 接下来是安装新版mysql ...
- 【ACwing 96】奇怪的汉诺塔——区间dp
(题面来自ACwing) 汉诺塔问题,条件如下: 1.这里有A.B.C和D四座塔. 2.这里有n个圆盘,n的数量是恒定的. 3.每个圆盘的尺寸都不相同. 4.所有的圆盘在开始时都堆叠在塔A上,且圆盘尺 ...
- Java基础教程——打印流
打印流 打印流可以把原本输出到控制台的信息输出到文件中.PrintStream是字节打印流(还有个对应的字符打印流是PrintWriter,这里不涉及) System类中有个变量: public fi ...
- 自动化运维工具之Puppet基础入门
一.简介 puppet是什么?它能做什么? puppet是一个IT基础设施自动化运维工具,它能够帮助系统管理员管理基础设施的整个生命周期:比如,安装服务,提供配置文件,启动服务等等一系列操作:基于pu ...