一、HTML常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html常用标签</title>
</head>
<body>
<!--<p>我要努力学习前端</p>
<h1>leikuan</h1>
<h3>leikuan</h3>
<h5>leikuan</h5>
你是我的<br/>
<hr/>
<span>
<strong> leikuan leikuan</strong>
</span>
<em>zmj</em>
<div>
<u>zmj</u>
<s>zmj</s>
</div>
zmj
<hr/>
我要学好前端<br/>
>大于号<br/>
<小于号<br/>
"引号<br/>
©版权符号<br/>
<hr/>
图片属性
<img src="images/lixian.jpg" width="400px" height="400px" alt="图片加载失败" title="李现图片" border="2px" />
超链接、锚点
<a href="http://baidu.com" target="_blank" title="百度" >百度</a>
<hr width="200px" align="center" color="red" size="2px" />
<address> 格式标签
这是第一个周复习 努力加油
</address>
<hr/>
<!--预文本标签pre-->
<!--
<pre>
我是你
你是我
那我是谁
</pre>
文本格式化标签
<b>leikuan</b>
<strong>加粗</strong><br/>
<em>leikuan</em>
<i>斜体 </i><br/>
<u>下划线</u><br/>
<del>删除</del>
<small>小号字</small>
3<sup>5</sup>
H<sub>2</sub>O
<ins>插入</ins>
列表标签：无序列表标签（ul）、有序（ol）、自定义（dl）-->
<h3>你喜欢吃什么水果？</h3>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<hr/>
<h3>你喜欢吃什么蔬菜？</h3>
<ol type="a">
<li>小白菜</li>
<li>胡萝卜</li>
<li>西红柿</li>
<li>莲菜</li>
</ol>
<hr/>
<dl>
<dt>专业</dt>
<dd>前端</dd>
<dd>后台</dd>
<dd>JAVA</dd>
</dl>
</ul>
</html>
二、表格、内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格、内联框架</title>
</head>
<body>
<!--表格的基本结构（其标签都为双标签）-->
<!--表格的练习-->
<!--<table border="2px" width="500px" height="300px" align="center" cellspacing="0px">
<caption>学生信息表</caption>
<tr align="center">
<th colspan="3">学生信息表</th>
<th colspan="2">成绩</th>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>专业</th>
<th>课程</th>
<th>分数</th>
</tr>
<tr align="center">
<td>球球</td>
<td>男</td>
<td rowspan="2">计算机</td>
<td rowspan="3">程序设计</td>
<td>68</td>
</tr>
<tr align="center">
<td>喃喃</td>
<td>女</td>
<td>89</td>
</tr>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>会计</td>
<td>68</td>
</tr>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>建筑</td>
<td>建筑设计</td>
<td>68</td>
</tr>
</table>-->
<!--table布局的练习-->
<!--内联框架-->
<iframe width="100%" height="200px" src="http://baidu.com" name="topiframe"></iframe>
<iframe src="others/menu.html" width="820px" height="400px" name="leftiframe" ></iframe>
<iframe width="500px" height="400px" src="http://sina.com.cn" name="rightiframe"></iframe>
</body>
</html>
三、form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<label>姓名：<input type="text"/></label><br/>
密码：<input type="password"/><br/>
确认密码：<input type="password"/><br/>
密码提示问题：
<select>
<option>请选择一个问题</option>
<option>爸爸叫什么名字</option>
<option>妈妈叫什么名字</option>
</select><br/>
密码显示答案:<input type="text"/><br/>
性别：<input type="radio"name="sex"/>男 <input type="radio" name="sex"/>女<br/>
年龄：<input type="text"/><br/>
籍贯：
<select>
<option>请选择</option>
<option>海南</option>
<option>陕西</option>
</select>
省/直辖市
<select>
<option>海口</option>
<option>三亚</option>
<option>西安</option>
</select>
市<br/>
爱好：<input type="checkbox" />上网<input type="checkbox" />体育<input type="checkbox" />学习<br/>
个人介绍：<br/>
<textarea rows="5px" cols="10px"></textarea><br/>
上传头像：<input type="text"/><input type="file"/><br/>
<input type="submit"/><input type="reset"/>
<!--元素集-->
<fieldset>
<legend>健康信息</legend>
身高：<input type="text"/><br/>
体重：<input type="text"/>
</fieldset>
</body>
</html>
四、HTML5新增的类型与属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5新增input类型与属性</title>
</head>
<body>
<!-- 电子邮件： 搜索：URL类型： 颜色： 数字： 范围： 日期： 周 ：月：-->
<form action="01html常用标签.html" method="post" >
电子邮件：<input type="email" multiple/><br/>
搜索：<input type="search"/><br/>
URL类型：<input type="url" multiple/><br>
颜色：<input type="color"/><br/>
数字：<input type="number"min="0" max="100" step="5" ><br/>
范围：<input type="range" min="0" max="100" value="10" step="5"/><br/>
日期：<input type="data"/><br/>
周：<input type="week"/><br/>
月：<input type="month"/><br/>
用户名：<input type="text" placeholder="请输入用户名" autofocus required name="name"/><br/>
密码：<input type="password" maxlength="12" minlength="6"/><br/>
<input type="submit"/><input type="reset"/>
</form>
</body>
</html>
五、HTML5新增的结构标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5新增的结构标签</title>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<article>内容
<section>标题</section>
</article>
<aside>侧边栏</aside>
<footer>页眉</footer>
<figure>
<img src="images/guangtouqiang.jpg" alt="图片加载失败" title="光头强图片" width="200px" >
<figcaption>光头强系列</figcaption>
</figure><br/>
<details>
<sammary>新闻</sammary>
<p>新闻 ，是指报纸、电台、电视台、互联网等媒体经常使用的记录与传播信息的 一种文体。
是记录社会、传播信息、反映时代的一种文体。新闻概念有广义与狭义之分。
广义上:除了发表于报刊、广播、互联网、电视上的评论与专文外的常用文本都属于新闻，
包括消息、通讯、特写、速写(有的将速写纳入特写之列)等等; 狭义上:消息是用概括的叙述方式，以较简明扼要的文字，
迅速及时地报道附近新近发生的、有价值的事实，使一定人群了解。
新闻一般包括标题、导语、主体、背景和结语五部分。前三者是主要部分，后二者是辅助部分。
写法以叙述为主兼或有议论、描写、评论等。新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的重要事件。
您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。</p>
</details>
你是<mark>大长腿</mark>吗？
<hr/>
<meter value="60" min="0" max="100" ></meter><br/> /*手机电量*/
<progress value="60" max="100" ></progress>
</body>
</html>
六、datalist、video、audio、embed、canvas标签（有一些还不太理解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<!--选项列表-->
<input type="text" list="start"/>
<datalist id="start">
<option>leikuan</option>
<option>雷宽</option>
<option>蔡依林</option>
<option>易烊千玺</option>
<option>李现</option>
</datalist>
<!--视频-->
<video src="" ></video>
<!--音频
1.audio支持的三种格式
ogg
mp3
wav
注意：loop 属性值 正数（代表播放次数） 负数或者不加任何属性值（代表无限播放）-->
<audio src="images/1.mp3" controls autoplay muted loop></audio>
如果浏览器不支持某种格式的播放，可以将一种音频转换成3种中的格式
<audio controls >
<source src="images/1.mp3"/>
<source src="images/1.ogg"/>
您的浏览器不支持音频播放
</audio>
<!--插件、嵌入的东西-->
<embed src="1.mp4">
<!--画布canvas-->
<!--（不太懂）
1.canvas 必须配合js在网页上绘制图像
2.画布是一个矩形区域，可以控制每一个像素
3.canvas拥有多种绘制路径、矩形、圆形...
颜色的表示方式：
1.直接用颜色名称："red" "green"
2.十六进制颜色值："#eeeeff"
3.rge(1-255,1-255,1-255)
属性：
fillStyle 填充绘画的颜色、渐变或模式
strokeStyle 用于笔触的颜色、渐变或模式
shadowColor 用于阴影的颜色
shadowOffsetX 水平距离偏移量
shadowOffsetY 垂直距离偏移量
shadowBlur
createLinearGradient 矩形
createRadialGradient 圆形
方法：
getcontext（）;返回一个对象，这个方法封装了很多的绘图方法和属性，但是现在只提供了"2d"的绘图环境
rect：创建矩形
fillrect：绘制填充矩形
-->
<canvas id="mycanvas" width="400px" height="400px">
您的浏览器版本太低
</canvas>
<script type="text/javascript">
//代码块
var canvas=document.getElementById("mycanvas");
var obj=canvas.getContext("2d");
//obj.rect(0,0,100,100);
//阴影：
obj.shadowColor="rgb(11,25,9)";
obj.shadowOffsetX=3;
obj.shadowOffsetY=3;
obj.shadowBlur=3;
//渐变：
//var colorobj=obj.createLinearGradient(0,0,100,0);
//圆的渐变
var colorobj=obj.createRadialGradient(50,50,10,50,50,50);
colorobj.addColorStop(0,"red");
colorobj.addColorStop(0.5,"blue");
colorobj.addColorStop(1,"green");
//obj.rect(0,0,100,100)
obj.fillStyle=colorobj;
//obj.fillStyle="red";
obj.strokeStyle="green";
obj.fillRect(0,0,100,100);
obj.strokeRect(100,100,100,100);
</script>
</body>
</html>
七、引入CSS方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入CSS层叠样式表方式</title>
</head>
<!-- <style> 内部样式表
p{
color: black;
font-size: 50px;
}
</style>-->
<style> /*外部导入样式*/
@import url(css.css);
</style>
<body>
<!--
1.内联方式（行内样式）
例如：<p style="color: red;font-size: 50px">我要努力学好前端</p>
2.内部样式表（属性多时使用）
例如：<style>
p{
color: black;
font-size: 50px;
}
</style>
3.外部样式表（当css多时使用）
例子：<link rel="stylesheet" href="css.css"/>
要先在建立一个后缀为css的文件描述属性
stylesheet:样式调用
4.导入式样式表
<style>
@import url(css.css);;
</style>
-->
<!--<p style="color: red;font-size: 50px">我要努力学好前端</p>-->/*内联方式*/
<p>我要努力学好前端</p>
<!--<link rel="stylesheet" href="css.css"/>-->
</body>
</html>
八、CSS基础选择器和合并选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础选择器和合并选择器</title>
<style>
/*元素选择器 通用选择器 类选择器 ID选择器 合并选择器*/
/* p{
color: red;
}
{
color: red;
}*/
.lei{
color: red;
}
#jiao{
color: red;
}
p,div{
color: red;
}
</style>
</head>
<body>
<p class="lei">leikuan</p>
<div id="jiao">zhoumingjiao</div>
</body>
</html>
九、背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div{
width: 1200px;
height: 1200px;
background-color: green; /*背景颜色*/
/*background-image: url("images/lixian.jpg"); !*背景图片*!*/
/*background-repeat: no-repeat; !*图片是否重复*!*/
/*background-repeat: repeat-x;*/
/*background-size: cover;*/ /*背景图片大小*/
/*background-size: contain;*/
/*background-position: center; !*背景图片位置*!*/
/*background-attachment: scroll; !*背景附和 *!*/
/*背景简写 所有属性写在一起*/
background: url("images/lixian.jpg") no-repeat 50px 60px;
}
</style>
</head>
<body>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
<div>leikuan</div>
</body>
</html>
十、字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style>
pre{
color: red; /*颜色*/
/*font-size: 20px; /*字体大小*/
/*font-style: italic; /*字体样式 正常、斜体*/
/* font-family: 微软雅黑; /*文本使用某个字体*/
/*font-weight: bolder; /*文字的粗细*/
/*
font简写
1.必须按照官方的给定的顺序给值（style weight size family）
2.font-size和font-family不可缺少
*/
font: italic bold 20px "黑体";
}
</style>
</head>
<body>
<h1>前端简介</h1>
<pre>
前端开发是创建Web页面或app等前端界面呈现给用户的过程。
</pre>
</body>
</html>
十一、颜色透明度和内容溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色透明度和内容溢出</title>
<style>
div{
width: 800px;
height: 800px;
background-color: black;
color: red;
opacity: 1; /*字的间距*/
/*!*overflow: hidden;*! 溢出元素隐藏*/
/*!*overflow: auto;*! 自动*/
overflow: scroll; /*显示滚动条*/
white-space: nowrap; /*内容同一行显示 不换行*/
/*text-overflow:ellipsis;*/ /*文字溢出时，省略号表示*/
}
</style>
</head>
<body>
<div>
前端开发是创建Web页面或app等前端界面呈现给用户的过程。<br/>
前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。<br/>
它从网页制作演变而来，名称上有很明显的时代特征。
在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，
用户使用网站的行为也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程。
前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
它从网页制作演变而来，名称上有很明显的时代特征。
在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，
用户使用网站的行为也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发是创建Web页面或app等前端界面呈现给用户的过程。
前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
它从网页制作演变而来，名称上有很明显的时代特征。
在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，
用户使用网站的行为也以浏览为主。
随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
</div>
</body>
</html>
十二、文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
h3{
text-align: center; /*内容方式*/
/*text-align: right;*/
/*text-align: left;*/
}
p{
text-decoration: none; /*有无装饰文字*/
/*text-decoration: underline;*/
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
text-indent: 2em;/*文本的缩进*/
}
span{
/*文本的大小写*/
text-transform: capitalize; /*第一个单词的首字母大写*/
/*text-transform: lowercase;*/ /*全部字母小写*/
/*text-transform: uppercase; /*全部字母大写*/
}
/*p{*/
/* background-color: red;*/
/* width: 100px;*/
word-wrap: break-word;!/*可设置过长的文本会自动换行*/
/*}*/
div{
height: 200px;/*设置对象的行高*/
background-color: red;
font-size: 20px;
line-height: 200px;
}
div{
background: orange;
height: 100px;
}
p{
background: orange;
}
img{
width: 100px; /*内容垂直对齐方式*/
vertical-align: middle;
}
</style>
</head>
<body>
<!--<p>Introductiontothefrontend</p>-->
<!--<div>前端开发是创建Web页面或app等前端界面呈现给用户的过程。</div>-->
<p>this is paragraph!!!<img src="images/lixian.jpg"/></p>
</body>
</html>
十三、列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表属性</title>
<style>
.text{
/*list-style-image: url("images/2.jpg");*/
/*list-style-type: circle;*/
/*list-style: url("images/2.jpg") inside disc;*/
list-style: url("images/21.jpg") inside disc; /*当找不到图片时，用后面的图形如disc来代替*/
}
li{
list-style-position: inside;
width: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<h3>大家喜欢吃什么水果？</h3>
<ul class="text">
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</body>
</html>
十四、 CSS3新增选择器（关系）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
.parent span{ /*后代选择器*/
color: red;
}
.parent>span{ /*子代选择器*/
color: red;
}
p+span{ /*相邻兄弟xuanzq*/
color: green;
}
p~span{ /*通用兄弟选择器*/
color: orange;
}
</style>
</head>
<body>
<!--<div class="parent">
<span>子元素span</span>
<div>
子元素div
<span>孙子代元素span</span>
</div>
</div>
<span>外部元素span</span>-->
<span>这是p上的span元素</span>
<p>这是一个p元素</p>
<span>这是第一个紧邻的span元素</span>
<span>这是第二个span元素</span>
<span>这是第三个span元素</span>
</body>
</html>
十五、CSS属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css属性选择器</title>
<style>
a[href]{
color: red; /* 具有href的属性的a元素*/
}
p[class="p1"]
{
color: blue; /*具有属性和属性值的p标签*/
}
p[class~="p1"]{
color: orange;/*具有属性和包含属性值的p标签*/
}
p[class^="p"]{
color: aqua; /*有属性且开头是p的标签*/
}
p[class$="4"]{
color: blue; /*有属性且结尾是p的标签*/
}
a[href*="baidu"]
{
color: black; /*有属性且包含属性值是p的标签*/
}
div[class|="set"]{
color: blueviolet; /*有属性且有链接符以开头属性值开头的标签*/
}
</style>
</head>
<body>
</body>
</html>
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
