黑马程序员技术交流社区
标题:
前端基础知识与您分享
[打印本页]
作者:
18279139787
时间:
2019-6-6 23:53
标题:
前端基础知识与您分享
本人是-杭州黑马前端五期的一位基础班学员，以下就是个人的笔记分享给大家，希望对新学员或多或少能有所帮助：（仅针对新手，因为这些也是本人从零基础开始记的）
-------------------------------------------------
html部分
框架：
<html> 跟标签
<head> 头部
<title></title> 标题
</head>
<body>
内容
</body>
</html>
----注：多运用div标签，会对将来的布局有很大帮助！
<!-- 这是html注释 ctrl+/ -->
{<h3>友情链接：</h3>
<a >百度</a><br />
<a >新浪</a>
<a href="#">我的作品地址</a>
<!-- 注释 -->
<hr />------- 特殊字符 -------<br />
<form action="xxx.php" method="yhxx" name="123"><!--form 最大的表单域-->
<label>用户名： <input type="text" placeholder="输入用户名" autofocus /></label><!--label标签用于绑定一个表单元素，获得输入焦点--><br /><br />
密 码： <input type="password" maxlength="6" /><br /><br />
性 别： <input type="radio" name="xb" checked="checked">男<input type="radio" name="xb">女<input type="radio" name="xb1">未知<br /><br />
爱 好： <input type="checkbox" name="ah" />足球<input type="checkbox" name="ah" />篮球<input type="checkbox" name="ah" />乒乓球<br /><br />
搜 索：<input type="button" value="搜索">
<input type="submit" value="提交">
<input type="reset" value="重置"><br />
<input type="image" src="123.png"><br /><br />
上传头像：<input type="file" multiple><br /><br />
留言板：<textarea>请输入留言</textarea><br /><br />
籍 贯：<select>
<option>点击选择你的籍贯</option>
<option>北京</option>
<option>上海</option>
<option>广东</option>
<option>江西</option>
<option>国外</option>
</select>
</form><hr />
<header>语义：定义页面的头部 页眉</header>
<nav>语义：定义导航栏</nav>
<footer>语义：定义页面底部 页脚</footer>
<article>语义：定义文章</article>
<section>语义：定义区域一小块</section>
<aside>语义：定义其所处内容之外的内容 侧边</aside>
<input type="text" placeholder="输入明星" list="star" name="" />
<datalist id="star">
<option>刘德华</option>
<option>刘若英</option>
<option>刘晓庆</option>
<option>郭富城</option>
<option>张学友</option>
<option>郭靖</option>
</datalist><hr />
<!--.................................................................-->
<fieldset>
<legend>用户登入</legend><!--标题-->
用户名：<input type="text" >
密 码：<input type="password" >
</fieldset><hr />
<!--.................................................................-->
<fieldset>
<legend>HTML5新增的input type 类型 哪些表单</legend>
<form action="">
邮箱：<input type="email" > <!--
aa@aa.com
格式 --><br>
手机：<input type="tel" > <!-- 手机格式 数字 --><br>
数字：<input type="number" > <!-- 只能是数字 --><br>
url ：<input type="url" > <!-- 网址格式 --><br>
搜索：<input type="search" > <!-- 搜索 --><br>
区域：<input type="range" > <!-- 区域 滑块 --><br>
时间：<input type="time" > <!-- 小时 分钟 --><br>
年月日：<input type="date" > <!-- 获得年月日 --><br>
月份：<input type="month" > <!-- 获得年月 --><br>
星期：<input type="week" > <!-- 获得周 --><br>
颜色：<input type="color" > <!-- 获得颜色 --><br>
<input type="submit" name="">
</form>
</fieldset><hr />
<!--.................................................................-->
<h4>自动记录完成</h4>
1.autocomplete 首先需要提交按钮 <br>
2.这个表单您必须给他名字
<form action="">
姓名：<input type="text" autocomplete name="ai">
<input type="submit" name="">
</form><br>
昵称：<input type="text" required accesskey="s"><hr>
<!--..................................................................-->
<form action="">
<h3>表单综合总结</h3>
<fieldset>
<legend>学生档案</legend>
<label> 姓 名：<input type="text" placeholder="请输入学生姓名" ></label><br /><br />
<label>手机号：<input type="tel" placeholder="请输入手机号"></label><br /><br />
<label>邮 箱：<input type="email" placeholder="请输入邮箱"></label><br /><br />
<label>所属学院：<input type="text" placeholder="请选择学院" list="xy" >
<datalist id="xy">
<option>一学院</option>
<option>二学院</option>
<option>三学院</option>
<option>四学院</option>
</datalist></label><br /><br />
<label>出身年月：<input type="month" ></label><br /><br />
<label>成 绩：<input type="type" placeholder="请输入成绩"></label><br /><br />
<label>毕业时间：<input type="date" ></label><br /><br />
<input type="submit" > <input type="reset" >
</fieldset>
</form><hr />
<audio src="bgsound.mp3" autoplay="autoplay" controls ></audio><br /><!--音频支持 ogg mp3 wav -->
<video src="mp4.mp4" autoplay controls ></video><hr /><!--视频支持 ogg mp4 webm-->}
<h1>CSS</h1><!--层叠样式表-->
<hr width="500" color="red" ><!--宽度和颜色-->
<h1> 大 </h1>
<p class="baicai" >白菜</p> <!-- 引用类样式 class是类的意思 -->
<p class="luobo" >萝卜</p><hr>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span><hr>
<div class="font20 pink font-weight">亚瑟</div>
<div class="font20 orange font-weight">刘备</div>
<div class="font30 pink">吕布</div>
<div class="font30 orange">貂蝉</div>
<div id="big">妲己</div><hr>
<div><a href="#">秒杀</a> </div><hr>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
<li>第六个</li>
<li>第七个</li>
</ul>
-------------------------第二部分--------------------
<body>
<h3>行内样式表适合于样式比较少的情况</h3>
<div style="color: pink";>今天很期待学习CSS</div><!-- 直接写在内容里面(少用) -->
<div class="a1">今天不期待学习CSS</div>
<div class="a1">今天不期待学习CSS</div>
<div class="a1">今天不期待学习CSS</div><hr>
<h3>块级标签</h3>
<div class="a2">123</div><p>123</p><div class="a2">123</div><hr>
<h3>行内标签</h3>
<span>123123123</span>
<span>456</span>
<span>789</span><hr>
<h3>行内块元素</h3>
<!-- 行内元素中的（img）（input）（td）是可以设置宽高和对齐的，称行内块元素 -->
<input type="text">
<input type="text">
<input type="text"><hr>
<h3>显示模式</h3>
<div class="a3">123</div>
<div class="a3">456</div>
<div class="a3">789</div>
<span class="a4">abc</span>
<span class="a4">efg</span>
<span class="a4">hij</span>
<a class="a0" href="#">123</a><a class="a0" href="#">123</a><hr>
<h3>交集选择器</h3>
<div class="red">熊大</div>
<div>熊二</div>
<div>熊熊</div>
<p>小明</p>
<p>小红</p>
<p class="red">小强</p><hr>
<h3>并集选择器</h3>
<div class="a5">刘德华</div>
<p class="a5">张学友</p>
<span class="a5">郭富城</span>
<h1 class="a5">凤姐</h1>
<h1 class="a5">凤哥</h1>
<h1 class="daye">凤大爷</h1><hr>
<h3>后代选择器</h3>
<p>王者荣耀</p>
<div class="jianlin">
<p>王思聪</p>
</div>
<div>
<p>王宝强</p>
</div><hr>
<h3>子元素选择器</h3>
<ul class="nav">
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li><hr>
<h3>属性选择器（一）</h3>
<a href="#" title="我是一个百度">百度</a>
<a href="#" title="我是一个新浪">新浪</a>
<a href="#">搜狐</a>
<a href="#">网易</a>
<a href="#">土豆</a>
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="submit">
<input type="submit">
<input type="submit">
<input type="reset">
<input type="reset">
<input type="reset">
</ul><hr>
<h3>属性选择器（二）</h3>
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div><hr>
<h3>伪元素选择器（一）</h3>
<p class="a6">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p><hr>
<h3>伪元素选择器（二）</h3>
<div class="a7">今年</div><hr>
<h3>背景颜色图片及其平铺</h3>
<div class="a8">
</div><hr>
<h3>多张背景图片</h3>
<div class="a9">
</div><hr>
<h3>凹凸文字效果</h3>
<div class="a10">我是凸起的文字</div>
<div class="a11">我是凹下的文字</div>
</body>
------------------------------css部分---------------------------------------
css是来改变html结构样式的，结构再好没有css的配合如同没有灵魂的丧尸
css分三种书写样式
1.行内样式，直接书写在html标签里，多用于临时性修改样式时使用
2.内部样式，写在html头部head里面，多用于调用样式较少单页面使用
3.外部样式，写在外部专用css文件里，需要用link引入，使用广泛，可多个相同样式页面共同调用
------------------------
<style type="text/css">/*这是CSS注释 ctrl+/*/
h1{color: rgba(225,0,0,0.5);/*颜色和透明度，rgba分别代表红绿蓝透明*/
text-align: center;/*文字水平对齐*/
text-shadow: 5px 5px 3px rgba(225,0,0,0.5)}/*字体影子水平垂直清晰*/
h3{color: blue;/*color字体颜色*/
font-style: italic;}/*让字体倾斜*/
p{
font-size: 24px;/*font-size字号*/
color: #e609e6;text-indent: 2em;/*颜色*/
text-indent: 2em;/*段落首行缩进，2em代表空两格*/
font-family: "方正行楷简体";/* font-family字体*/
/*font: italic bold 14px "方正行楷简体"（font 综合写法，必须保留字号和字体属性才能生效）*/
}
di{font-weight: 700;}/*字体加粗的效果*/
em{font-style: normal;}/*让倾斜的字体不倾斜*/
.baicai{color:#0021ff;
font:20px "方正行楷简体";}/*声明类样式，最好用相对应的意思命名*/
.luobo{color:#17ba13;
font:20px "方正行楷简体";}/*声明类样式，如标志是logo就用.logo*/
span{
font-size: 100px;
}
.blue{
color: blue;
}
.orange{
color: orange;
}
.red{
color: red;
}
.green{
color: green
}
.font20{font-size: 20px;}/*多类名选择器，可以多次使用*/
.font30{font-size: 30px;}
.pink{color: pink}
.font-weight{font-weight: bold;}
#big{color: pink} /*ID选择器使用方式，只能用一次*/
/**{color: red}*/ /*通配符选择器*/
a:link {font-size:26px; /*未访问的链接，按顺序1*/
color: gray;
font-weight: 700;}
a:visited {font-size:26px; /*已访问的链接，按顺序2*/
color: orange;
font-weight: 700;}
a:hover {font-size:26px; /*鼠标移动到链接上，按顺序3*/
color: red;
font-weight: 700;}
a:active{font-size:26px; /*选定的链接，按顺序4*/
color: green;
font-weight: 700;}
li:first-child{color: pink;}/*结构伪类选择器，选择“首个”*/
li:last-child{color: purple;}/*选择最后一个*/
li:nth-child(4){color: skyblue;}/*从头开始，选择第四个，数字代表第几个(even代表偶数/odd代表奇数，，，n代表所有，2n代表2的倍数就是所有偶数，2n+1代表2的倍数加1就是所有奇数)*/
/*li:nth-last-child(even){color: red}从尾开始*/
:target{color: red;/*选取当前活动的目标元素 目标伪类选择器*/
font-size: 30px;}
p{line-height: 35px;/*行间距*/
letter-spacing: 8px;}/*字间距*/
</style>
-------------------------------------
body{
/*background-color: #ccc;*//*背景颜色*/
/*background-image: url(images/ms.jpg);*//*选择背景图片*/
/*background-repeat: no-repeat;*//*背景图片不平铺*/
/*background-position: center -30px;*//*背景图片水平居中垂直靠上*/
/*background-attachment: scroll; 默认的是 scroll 滚走的*/
/*background-attachment: fixed;*/ /*背景图片固定*/
background: #ccc url(images/bj3.jpg) /*no-repeat*/ fixed center -30px;/*背景简写*/
}
h3{
text-align: center/*文字水平对齐（居中）*/
}
.a1{
color: red;/*颜色*/
}
.a2 {background: pink;/*块级颜色*/
width: 100px;/*块级宽度*/
height: 100px;/*块级高度*/
}
span{
background-color: pink;/*行内颜色*/
}
input{
width: 200px;/*宽度*/
height: 30px;/*高度*/
}
.a3{
width: 100px;/*宽度*/
height: 100px;/*高度*/
background-color: pink;/*行内颜色*/
display: inline;/*块级标签转换为行内标签模式*/
}
.a4{
width: 100px;/*宽度*/
height: 100px;/*高度*/
background-color: hotpink;/*行内颜色*/
display: block;/*行内标签转换为块级标签*/
}
a.a0{
width: 50px;/*宽度*/
height: 20px;/*高度*/
background-color: deeppink;/*行内颜色*/
display: inline-block;/*行内标签转换为行内块标签*/
}
.red{
color: red;/*颜色*/
}
p.red{ /*交集选择器，既是...又是...的意思*/
font-size: 30px;/*字号*/
}
div.red{ /*交集选择器，使用较少，div.red中间不能有空格*/
font-size: 15px;/*字号*/
}
div.a5,p.a5,span.a5,.daye{ /*并集选择器，中间用逗号隔开*/
color: blue;/*颜色*/
font-size: 18px;/*字号*/
}
.jianlin p { /*后代选择器，中间用空格隔开*/
color: red;/*颜色*/
}
.nav li { /*后代选择器,中间用空格隔开，可以选择儿子、孙子、重孙子*/
color: red;
}
.nav > li { /*子元素选择器，中间用>隔开，只选择儿子*/
color: pink;/*颜色*/
}
a[title] { /*属性选择器，用中括号来表示*/
color: red;/*颜色*/
}
input[type=text] { /*属性选择器，属性值完全等于val*/
color: red;/*颜色*/
}
div[class^=font]{ /*属性选择器，class^=font 表示 font 开始位置就可以了*/
color: pink;/*颜色*/
}
div[class$=footer]{ /*属性选择器，class$=footer 表示 footer 结束位置就可以了*/
color: skyblue;/*颜色*/
}
div[class*=tao] { /*属性选择器，class*=tao 表示 tao 在任意位置都可以*/
color: green;
}
p.a6::first-letter { /*伪元素选择器，用::隔开，选择第一个字*/
color: red; /*颜色*/
font-size: 50px;/*字号*/
}
p.a6::first-line { /*伪元素选择器，用::隔开，选择第一行*/
color: green;/*颜色*/
}
p.a6::selection { /*伪元素选择器，用::隔开，选中的文字可以变换样式*/
color: red;/*颜色*/
}
div.a7::before { /*伪元素选择器，用::隔开，在盒子div的内部前面插入*/
content: "俺"/*内容*/
}
div.a7::after { /*伪元素选择器，用::隔开，在盒子div的内部后面插入*/
content: "18岁"/*内容*/
}
div.a8 {
width: 600px;
height: 500px;
background: rgba(0,0,0,0.7);/*背景颜色和透明度*/
background-image: url(images/wo.jpg);
background-repeat: no-repeat; /*背景图片不平铺*/
/*background-size: 100%;*/ /*背景缩放，也可以px改，尽量只改一个值*/
background-size: cover; /*自动调整比例，充满背景区域，比较常用*/
/*background-size: contain;*/ /*自动调整比例,宽和高有一边先充满背景区域停止*/
/*background-repeat: repeat-x;*/ /*背景图片横向平铺*/
/*background-repeat: repeat-y;*/ /*背景图片纵向平铺*/
/*background-position: left top;*/ /*左-上 背景图片位置默认的是左上角*/
/*background-position: right bottom;*/ /*右-下 背景图片位置在右下角*/
/*background-position: center; 居中 背景图片位置在中间*/
/*以上都是方位名词，共五个*/
/*background-position: 30px 30px; 位置的精确单位*/
/*background-position: center 30px;*/ /*混搭型位置调整,按顺序排列*/
}
div.a9{
width: 600px;
height: 600px;
background: url(images/mao.jpg) no-repeat left top,/*第一张图用（，）隔开*/
url(images/gou.jpg) no-repeat right bottom hotpink;/*最后一张图再加背景颜色*/
}
div.a10{
width: 700px;
height:150px;
background-color: #ccc;/*背景颜色*/
}
div.a11{
width: 700px;
height:150px;
background-color: #ccc;/*背景颜色*/
}
div.a10{
color:#ccc;
font: 700 80px "微软雅黑" ;
}
div.a11{
color:#ccc;
font: 700 80px "微软雅黑" ;
}
div.a10{
text-shadow: 1px 1px 3px #000, -1px -1px 3px #fff;/*字体影子和颜色*/
}
div.a11{
text-shadow: 1px 1px 3px #fff, -1px -1px 3px #000;/*字体影子和颜色*/
}
注：由于本人写的是基础笔记，很多是自己看pink老师视频记入下来的，边学边写，所以很多的类名因为不太了解重要性，就大多数都是随意取名的，建议大家写类名最好是能见名思意的那种，养成好习惯对将来自己的工作是有很大的帮助的，目前基础班课程还未结束，课程笔记都写在了本子上，就没有传上来了，后面还有浮动和定位没有来得及写上，那么就记录到此吧！
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
