html是什么?
HyperText markup language 超文本标记语言
基础标签
根标签<html> </html>
<!--根标签<html> </html>-->
<!-- 一个html文件只能有一个根标签,且必须有,供浏览器识别 -->
<!-- 开始的标签里才可以写属性,每个标签都可以有属性 -->
<!-- lang="en"属性 告诉搜索引擎爬虫,我们的网站是关于什么内容的,方便搜索引擎抓取内容 english:en 中文:zh -->
<html lang="en",zh>
</html>
结构化标签:
头标签:<head> </head>
体标签:<body> </body>
<!--
结构化标签:
头标签:<head> </head>
体标签:<body> </body>
-->
<!--<head> </head> 里面的东西写给浏览器看的,例如一些配置<meta charset="utf-8">防止乱码;标题<title> </title>等-->
<!--编码字符集: 常用 utf-8:升级版的unicode ,unicode:万国码 ,gb23122:不包含繁体 ,gbk:繁体也加入了-->
<head>
<meta charset="utf-8">
<title>新世界</title>
</head>
<!-- <body> </body> 里面的东西都是写给用户看的,可见 -->
<body>
hello! 欢迎来到新世界!
</body
<meta>单标签
介绍:
<meta>标签中的属性:
content属性:该属性用于定义name属性相关的元件信息，其中内容是为了便于搜索机器人查找信息和分类使用
name属性:该属性主要用于描述网页,属性的值有：author、robot、description、keywords等等
robot 机器人向导：用于告诉高速机器人哪些页面需要索引，哪些页面不需要索引,该属性的content值有all、none 等等
<meta content="none" name="robot" > <--!搜索机器人自动检索页面时，将不会检索到这个页面--> author 作者：用于告诉搜索机器人网页的作者
<meta content="vis.yang" name="author"> <--!告诉搜索机器人该网页的作者是vis.yang-->
keywords 关键字:告诉浏览器网页的关键字是什么
<meta content="个人主页" name="keywords"> <--!告诉浏览器该网页的关键字是个人主页-->
description 描述:告诉浏览器一些关于该网页的描述信息
<meta content="vis.yang制作" name="description"> <--!告诉浏览器该网页由vis.yang制作-->
注意:
keywords的content内容要限制在36个字
description的content内容要限制在76个字
按照搜索引擎的工作原理，搜索引擎会首先排除机器人自动检索页面中的keywords和description，并将其加入自己的数据库，然后根据关键词的密度将网站排序
<meta>标签是放在<head> </head>标签里
<head>
<meta charset="utf-8">
<!-- 这样写可以增加你网站被搜索引擎搜索到的概率 -->
<meta content="个人主页" name="keywords">
<meta content="vis.yang制作" name="description">
<title>新世界</title>
</head>
头标签和体标签都是放在根标签里的
整体:
<!-- lang="en"属性 告诉搜索引擎爬虫,我们的网站是关于什么内容的 english:en 中文:zh -->
<html lang="en",zh>
<head>
<meta charset="utf-8">
<title>新世界</title>
</head>
<body>
hello! 欢迎来到新世界!
</body>
</html>
效果:
<p> </p>标签 文字分段显示 <body>
hello! 欢迎来到新世界!
好吗?好的!
<p>好吗?好的!</p>
</body>
效果:
标题标签 <body>
<!-- 标题标签 h1至h6 表现形式:大小不一样-->
<h1>vis.yang</h1>
<h2>vis.yang</h2>
<h3>vis.yang</h3>
<h4>vis.yang</h4>
<h5>vis.yang</h5>
<h6>vis.yang</h6>
</body>
效果:
<strong> </strong> 加粗标签
<em> </em> 斜体标签
<body>
哈哈哈哈
<!-- <strong> </strong> 加粗标签 -->
<strong>哈哈哈哈</strong>
<!-- <em> </em> 斜体标签 -->
<em>哈哈哈哈</em>
<strong><em>哈哈哈哈</em></strong>
</body>
效果:
<strong style="color:blue"> </strong> 加个属性就可以变变色了 <body>
哈哈哈哈
<!-- <strong> </strong> 加粗标签 -->
<strong style="color: blue">哈哈哈哈</strong>
<!-- <em> </em> 斜体标签 -->
<em>哈哈哈哈</em>
<strong><em>哈哈哈哈</em></strong>
</body>
效果:
<body>
<!-- 利用<div> </div> 标签可以批量处理 -->
<div style="color: blue">
<strong>你好</strong>
<em>你好</em>
<strong>好吗</strong>
<em>好哈</em>
<strong>好的</strong>
<em>嗯嗯</em>
</div>
</body>
效果:
空格在html中是有特殊意义的:英文分隔符,文字分隔符,使劲按也是空一个格
真正的空格:每写一个 代表空格一个位置
< 这个符号如何在html显示:<
> 这个符号如何在html显示:>
<br>单标签:每写一个<br>换一行
<hr>单标签:一条水平线
有序列表
<body> <!-- 有序列表: <ol></ol> 列表架 <li></li> 列表项 --> <ol > <!-- <li> </li>可以有多个 --> <li>速度与激情8</li> <li>哪吒之魔童降世</li> <li>送你一朵小红花</li> <li>姜子牙</li> <li>极限特工</li> </ol> <!-- 加个type,换一种排序规则 --> <ol type="a"> <!-- <li> </li>可以有多个 --> <li>速度与激情8</li> <li>哪吒之魔童降世</li> <li>送你一朵小红花</li> <li>姜子牙</li> <li>极限特工</li> </ol> </body>
效果:
倒序:
<body>
<!--
有序列表:
<ol></ol> 列表架
<li></li> 列表项
-->
<!-- 加个属性reversed="reversed" 倒序 -->
<ol reversed="reversed">
<!-- <li> </li>可以有多个 -->
<li>速度与激情8</li>
<li>哪吒之魔童降世</li>
<li>送你一朵小红花</li>
<li>姜子牙</li>
<li>极限特工</li>
</ol>
<!-- 加个属性type -->
<!-- 加个属性reversed="reversed" 倒序 -->
<ol type="a" reversed="reversed">
<!-- <li> </li>可以有多个 -->
<li>速度与激情8</li>
<li>哪吒之魔童降世</li>
<li>送你一朵小红花</li>
<li>姜子牙</li>
<li>极限特工</li>
</ol>
</body>
效果:
<body> <!-- 有序列表: <ol></ol> 列表架 <li></li> 列表项 --> <!-- 加个属性start="2" 从第二个开始排序 --> <ol start="2"> <!-- <li> </li>可以有多个 --> <li>速度与激情8</li> <li>哪吒之魔童降世</li> <li>送你一朵小红花</li> <li>姜子牙</li> <li>极限特工</li> </ol> </body>
效果:
无序列表
<body> <!-- 无序列表: <ul></ul> 列表架 <li></li> 列表项 --> <!-- 只有type属性 disc/discircle:实心圆 circle:圆 square:实心框--> <ul type="disc"> <!-- <li> </li>可以有多个 --> <li>速度与激情8</li> <li>哪吒之魔童降世</li> <li>送你一朵小红花</li> <li>姜子牙</li> <li>极限特工</li> </ul> </body>
效果:
css装修
<!--根标签<html> </html>-->
<!-- 一个html文件只能有一个根标签,且必须有,供浏览器识别 -->
<!-- 开始的标签里才可以写属性,每个标签都可以有属性 -->
<!-- lang="en"属性 告诉搜索引擎爬虫,我们的网站是关于什么内容的 english:en 中文:zh -->
<html lang="en",zh>
<head>
<meta charset="utf-8">
<!-- 加些简单css -->
<style type="text/css">
*{
/*去边隙*/
margin: 0;
padding: 0;
}
ul{
/*去排序样式*/
list-style: none;
}
li{
/*加空格*/
margin:0 10px;
/*横向*/
float: left;
/*加个颜色*/
color:#f40;
/*加粗*/
font-weight: bold;
/*设置字体大小*/
font-size: 14px;
/*li表加高度,改与文字的间隙*/
height: 25px;
line-height: 25px;
padding: 0 5px
}
/*鼠标到达字体后给li表加个背景*/
li:hover{
/*加个圆角边框*/
border-radius:15px;
/*背景:淘宝红*/
background:#f40;
/*字体变成白色*/
color: #fff;
}
</style>
<title>新世界</title>
</head>
<body>
<!--
无序列表:
<ul></ul> 列表架
<li></li> 列表项
-->
<!-- 只有type属性 disc/discircle:实心圆 circle:圆 square:实心框-->
<ul type="discircle">
<!-- <li> </li>可以有多个 -->
<li>速度与激情8</li>
<li>哪吒之魔童降世</li>
<li>送你一朵小红花</li>
<li>姜子牙</li>
<li>极限特工</li>
</ul>
</body>
</html> 效果:
引入图片<img> </img>
效果:
加载不出时可以加点东西
效果:
<img src="file:///D:/website/images/mm.jpg" style="width: 200px" title="这是一张风景图">效果:
<a href=""> </a>标签 href: hyperText reference 超文本引用
效果:
效果:
新页面打开
效果:
<form> </form> 表单标签
<form>标签定义及用法
<form>标签是使用来创建供用户输入的html表单，在网页中很常见，比如：注册和登录页面就是用表单实现的。
<form>标签中通常会有很多子元素，用来定义各种交互控件（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< select>、< textarea>等标签。
<form>标签语法格式
<form action="提交地址" method="提交方式">
表单内容
</form>
说明：表单内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签
<form>标签属性
name：规定表单的名称，在xhtml中也废弃，使用id来代替；
action：当提交表单时向何处发送表单数据；
method：用于发送表单数据的HTTP方法，值可以是：get、post
enctype：在向服务器发送表单数据之前如何对其进行编码，method="post"时可以使用，值可以是：multipart/form-data、text/plain等；
target：在何处打开action属性中的地址，值可以是：_blank、_self、_parent、_top；
accept-charset：服务器可处理的表单数据字符集；
novalidate：提交表单时不进行验证，值为：novalidate，html5新增；
autocomplete：是否启用表单的自动完成功能，值可以是：on、off，html5新增；
accept：服务器接收到的文件的类型（html5版本也不支持）；
表单标签input的单独css选择器
input [type=text] 将仅选择文本字段
input [type=password] 将仅选择密码字段
input [type=number] 将仅选择数字字段
等等...
京公网安备 11010502036488号