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" /> ...
随机推荐
- php 与 docker php-fpm 共存问题
需求: 本地一个 php7 的 php-fpm,现在需要运行 php5.2版本的程序, 服务器安装的 nginx 解析域名,碰见 php 文件交给 php5的 php-fpm; 注意: fastcgi ...
- Hadoop大数据平台之Kafka部署
环境:CentOS 7.4 (1708 DVD) 工具:Xshell+Xftp 1. 使用xftp将kafka上传到/usr/local目录下,将kafka解压并重命名. 2. 编辑kafka/co ...
- Camtasia处理音频制作BGM
我们在剪辑自己录制的视频时经常会需要同时对音频进行处理,camtasia是一个可以对视频的音频或者单独的音频文件进行处理的软件,那我们就来看看到底如何使用camtasia 2019(Win)来处理音频 ...
- 使用IDM批量抓取音效素材下载
IDM下载器的站点抓取功能,能够抓取网站上的图片.音频.视频.PDF.压缩包等等文件.更重要的是,能够实现批量抓取操作,省时省力.今天就来看一下,如何用IDM巧妙的批量抓取音效素材. 1.进入音效合辑 ...
- ssh命令的常用使用场景
目录 一.最简单的登陆 二.登陆+执行命令 三.端口转发 四.参考 一.最简单的登陆 就是简单登陆一下主机,默认端口22 ssh {hostname}@{host_ip} ➜ Charles ssh ...
- 推荐系统实践 0x07 基于邻域的算法（2）
基于邻域的算法(2) 上一篇我们讲了基于用户的协同过滤算法,基本流程就是寻找与目标用户兴趣相似的用户,按照他们对物品喜好的对目标用户进行推荐,其中哪些相似用户的评分要带上目标用户与相似用户的相似度作为 ...
- 【AcWing 99】激光炸弹——二维前缀和
(题面来自AcWing) 一种新型的激光炸弹,可以摧毁一个边长为 R 的正方形内的所有的目标. 现在地图上有 N 个目标,用整数Xi,Yi表示目标在地图上的位置,每个目标都有一个价值Wi. 激光炸弹的 ...
- LeetCode周赛#209
1609. 奇偶树 #广搜 #二叉树的层次遍历 题目链接 题意 如果一棵二叉树满足下述几个条件,则可以称为奇偶树 : 二叉树根节点所在层下标为 0 ,根的子节点所在层下标为 1 ,根的孙节点所在层下标 ...
- Java基础教程——内部类
内部类 内部类(inner class)是定义在另一个类中的类 内部类的好处: |--1.隐藏机制:内部类封装性更好,隐藏在一个类之中,同一包中的其他类也不能访问 |--2.内部类可以访问外围类的私有 ...
- java实验类的实现
1 //1.矩形类的定义及应用 2 package classwork_5; 3 4 public class juxing1 { 5 private double a,b;//长,宽 6 priva ...