一,HTML基础
<!DOCTYPE html>
用于表示这是个html文件,不需要改动
<html lang="en">
<head>
<!--head头标签-->
<!--在这里面可以对应当前的这个HTML文件-->
<!--做一些配置,以后会逐渐学到-->
<meta charset="UTF-8">
<!--表示字符编码格式为-->
<title>hello html</title>
<!--title标签-->
</head>
<body>
<!--<h1></h1>是一个标签,也可以叫做一个元素-->
<!--我是h1标题:是<h1>标签的值-->
<h1>我是h1标题</h1>
<h2>我是h1标题</h2>
<h3>我是h1标题</h3>
<h3>我是h1标题</h3>
<!--p标签,表示一个段落-->
<!--HTML文档中,不识别换行符,空格,制表符等符号-->
<br/>
<!--br表示换行-->
<!--空格-->
<p>的说法都是分开撒的 发生劳动 节风热
通过特我如果<br/>爱的发的说法是打发第三方</p>
<img src="1.jpg">
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1496974128&di=2a84c68efb7e39c349f0b5b4fe9b0934&src=http://ww1.sinaimg.cn/large/bca3622fjw1dzonghlbuaj.jpg">
<img src="2.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496984463021&di=f7c003d8d9aed749b04b62d8f1230b39&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Flarge%2F85cccab3gw1etdy1koktng20bo06hu0y.jpg">
</body>
</html>
二,HTML语义化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示语义化</title>
</head>
<body>
<!--语义化-->
<!--人与人之间的交流,同样的语气,不同的语气,会有不同的效果-->
<!--但是代码与机器之间的交流肯定不会出现语气词机器也无法听懂,这时候语义化就出现了-->
<!--通过带有语义化的标签,就可以像机器表达'语气'了-->
<!--比如Strong标签表示更强调的意思,那机器在读取该标签的内容时,就知道这里是被强调的部分-->
<!--比如q标签表示引用的话,那么机器在读取q标签内容的时候,就会知道这里是引用了他人的文字-->
<!--em-->
<em>我是em标签的内容</em>
<!--strong-->
<br/>
<strong>我是strong标签的内容</strong>
<br/>
<!--q-->
<q>老子想说啥就说啥</q>
<br/>
<!--和q一样,比q长-->
<blockquote>对方听的歌改哟配合他和她为何突然肯瑞托</blockquote>
</body>
</html>
三,HTML语义化list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加列表标签</title>
</head>
<body>
<!--ul表示无序的列表-->
<ul>
<!--li标签表示行-->
<li>我是第一行的内容</li>
<li>我是第二行的内容</li>
<li>我是第三行的内容</li>
<li>我是第四行的内容</li>
</ul>
<!--ol是有序的列表-->
<ol>
<li>石乐志</li>>
<li>石乐志</li>>
<li>石乐志</li>>
</ol>
</body>
</html>
四,HTML_TABLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示表格</title>
</head>
<body>
<!--表-->
<!--行-->
<!--单元格-->
<table style="border:2px solid #f88;"
summary="我是表的摘要">
<caption>我是这个表的标题</caption>
<!--tr表示一行-->
<tr>
<!--th表示表头-->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<!--tr表示一行,这就是第二行了-->
<tr>
<!--第二行也就表示数据了-->
<!--使td标签,表示每一个单元格-->
<td>孙悟空</td>
<td>700</td>
<td>女</td>
</tr>
<tr>
<!--第二行也就表示数据了-->
<!--使td标签,表示每一个单元格-->
<td>唐僧</td>
<td>200</td>
<td>男</td>
</tr> <tr>
<!--第二行也就表示数据了-->
<!--使td标签,表示每一个单元格-->
<td>猪八戒</td>
<td>400</td>
<td>女</td>
</tr>
<tr>
<!--第二行也就表示数据了-->
<!--使td标签,表示每一个单元格-->
<td>沙僧</td>
<td>500</td>
<td>男</td>
</tr>
</table>
</body>
</html>
五,HTML超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示超链接</title>
</head>
<body>
<a href="1_HTMLBase.html">去1</a>
<br/>
<a href="http://www.baidu.com" title="你要去百度找什么"
target="_blank">去百度</a>
</body>
</html>
六,HTML Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示表单Form</title>
</head>
<body>
<!--form就是表单-->
<!--form的属性:-->
<!--method:get/post,是网络请求的两种方式,get不需要请求体-->
<form method="get" action="1_HTMLBase.html">
<!--子标签-->
<!--lable标签就是用来给用户一个提示-->
<label for="name">姓名:</label>
<!--type属性表示,input这个标签要以什么形式展示给用户-->
<!--id属性标识一个标签就像身份证号标识一个人一样通过id的户型的值,就可以找到对应的标签,id属性在同一文件中不可重复-->
<input id="name" name="aaa" type="text">
<br/>
<label>密码:</label>
<input type="password">
<br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<!--大段的文本,可以使用TEXTarea标签-->
<!--属性:-->
<!--rows:几行-->
<!--cols:几列-->
<textarea rows=" 4" cows="5">地方噶的说法都是激发开关机考虑过卡解决国际奥克斯的感觉克鲁塞德金刚骷髅岛放假哦脾气无额为退热
</textarea>
</body>
</html>
七,HTML单选框和复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示单选框和复选框</title>
</head>
<body>
<!--radio是单选框-->
<!--让多个radio称为一组-->
<!--这样点击一号按钮后,再点击二号按钮,
一号按钮就会被重置为未选择状态,也就是说,
只能有一个按钮被选择,通过设置一样的name属性,
可以将多个按钮设置为一组-->
<label for="1">男</label>
<input id="1" name = "1" type="radio" >
<input name = "1" type="radio">
<input name = "1" type="radio">
<input name = "1" type="radio">
<input name = "1" type="radio">
<input id="2" type="checkbox">
<input id="3" type="checkbox">
</body>
</html>
八,HTML下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示下拉菜单</title>
</head>
<body>
<!--选择标签-->
<select>
<!--每一个item就是一个选项-->
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
</body>
</html>
九,CSSBase及嵌入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示CSS基本使用</title>
<!--style标签中,写的就是css的样式代码了-->
<!--type属性,就是告诉浏览器,我这下面就是CSS代码-->
<style type="text/css">
/*P就是选择器*/
/*大括号{}和大括号{}所包含的内容叫做声明*/
p{
/*color就是属性*/
/*bluevoilet就是值*/
color: blueviolet;
}
</style>
</head>
<body>
<p>我是p标签中的文字</p>
</body>
</html>
十,CSS外联式文件导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示CSS文件导入</title>
<style type="text/css">
/*导入css文件到当前这个html文档中*/
/*这样当前html文档中的代码就可以使用*/
/*在FIRSTCSS.css文件中定义的样式*/
@import url(FirstCSS.css);;
</style>
</head>
<body>
<!--可以用div来划分区域,可以理解为一块一块的比如这块显示的是排行榜的内容,另一块里显示的是推荐的内容-->
<div>我是div中的文字</div>
</body>
</html>
十一,CSS外联式文件导入2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示导入CSS文件2</title>
<!--通过link标签也可以将css文件导入到html文档中-->
<!--rel:表示被连接的文件是用来做什么的-->
<!--stylesheet表示被连接的文件是一个样式表,也就是装的都是样式-->
<link rel="stylesheet" href="FirstCSS.css" type="text/css">
</head>
<body>
<div>我是div的内容</div>
</body>
</html>
十二,CSS内联式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示内联式CSS样式</title>
</head>
<body>
<!--当我们想要为某段文字是设置一个样式,但是有不想使用含有语义化的标签(比如强调)
仅仅是想给某段文字改咯 颜色什么的那么可以将该段文字放在SPAN标签中-->
<span></span>
<!--两个P标签,都是DIV的子标签-->
<!--两个SPAN标签,都是div的后代标签,
但是不是子标签-->
<!--两个p标签之间,可以理解为兄弟标签-->
<div>我是
<p>
<!--什么事内联式CSS样式-->
<!--将css样值代码,直接写在标签的styel属性中-->
<!--这种写法叫做内联式css-->
一个<span style="color: #ff8888; font-size: 30px">
大
</span>
的
</p>
标题
<p>
一个<span>大</span>的</p>标题</div>
</body>
</html>
十三,CSS各种选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示CSS选择器</title>
<style type="text/css">
/*标签选择器*/
/*会作用于所以的div标签 */
div{
} /*类选择器*/ /*可以用过标签的class属性指定*/ /*指定了class属性为classDemo的标签*/ /*就会有claccdemo这个类选择器的样式*/ /*classdemo就是类选择器的名字,名字可以随意起*/ .classDemo{ color: coral; font-size: 30px; } /*id选择器,通过#符号指定*/ /*iddemo就是下面这个id选择器的名字*/ /*id属性为idDemo的标签,*/ /*就会拥有idDemo这个选择器生命中的样式*/ /*因为id属性在一个HTML文档中是唯一存在的/*/ /*所以id选择器也只会作用于一个标签*/ /*而类选择器可以被多个标签使用*/ /*id这个属性一般是留给写js的人使用的*/ /*写js的程序员可以通过id属性找到对应的标签*/ /*然后通过一系列方法操作这个标签*/ /*所以写HTML时一般用class类选择器而不是用id选择器*/ #idDemo{ color: aqua; font-size:30px; } </style>
</head>
<body>
<p class="classDemo">我是p1:我用来展示类选择器的作用,我的颜色和字体的大小是被改变了的</p>
<p>我是p2:我没变过,我是来证明p1变了</p>
<span class="classDemo">我路过</span>
<h1 id="idDemo">我是h1标题,我用来展示id选择器</h1>
</body>
</html>
HTML及标签
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
