校内实训实习日志-Day01
今天主要的学习内容是网页基础知识，包括html,css,js
知识点：
- html:基本了解了HTML的文档结构和元素语法以及分类。
- HTML不是编程语言，而是一个超文本标记语言。
- 一个HTML文档一般包含头部、样式、身体、行为。
- HTML的标签需要符合开闭原则，即有开标签+闭标签。
- 在body里面可以设置块级元素、行内块级元素、行内元素。块级元素可直接设置宽高，默认占一行；行内块级元素也可直接设置宽高，但不占一行；行内元素不可设置宽高也不占一行。
- html中的标签分类及用法：（1）文档元素：、、、
、<meta>、<link>、 <style>、<script></span><span style="color:#000000;">（定义脚本）。（2）<strong>文章元素</strong>：</span><span style="color:#f33b45;"><h1> - <h6>、<p></p>、<br>、<span></span><span>（是一个没有任何样式的段落标签）</span>、<span style="color:#f33b45;"><pre></span>（<span>有带格式的p标签,可以保留缩进、换行（用于展示代码）</span>）<span style="color:#000000;">。（3）<strong>字体样式元素</strong>：</span><span style="color:#f33b45;"><i></span><span style="color:#000000;">（斜体）</span><span style="color:#000000;">、</span><span style="color:#f33b45;"><b></span><span style="color:#000000;">（加粗）</span><span style="color:#000000;">、</span><span style="color:#f33b45;"><strong></span><span style="color:#000000;">（加粗）。（4）<strong>布局元素</strong>：</span><span style="color:#f33b45;"><div></span><span style="color:#000000;">（没有任何样式的块级元素 用来包裹内容和分割内容）。（5）<strong>框架元素</strong>：</span><span style="color:#f33b45;"><iframe></span><span style="color:#000000;">（框架元素，用来显示其他内容）、</span><span style="color:#f33b45;"><frameset>、<frame> </span>（<span style="color:#000000;">HTML5 </span><span style="color:#000000;">不再支持 </span><span style="color:#000000;"><frameset> </span><span style="color:#000000;">和 <frame></span>）<span style="color:#000000;">。（6）<strong>链接元素</strong>：</span><span style="color:#f33b45;"><a></span><span style="color:#000000;">。</span>（7）<span style="color:#000000;"><strong>多媒体元素</strong>：</span><span style="color:#f33b45;"><img></span><span style="color:#000000;">（显示图片）。（8）<strong>表单元素</strong>：</span><span style="color:#f33b45;"><from>、<input>、<textarea>、<button>、<select>、<option></span><span style="color:#000000;">（与select配合使用，下拉列表、滚动列表）</span><span style="color:#000000;">、</span><span style="color:#f33b45;"><optgroup></span><span style="color:#000000;">（组合选项）</span><span style="color:#000000;">、</span><span style="color:#f33b45;"><label></span><span style="color:#000000;">（本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验）、</span><span style="color:#f33b45;"><fieldset></span><span style="color:#000000;">表单元素半包围边框、</span><span style="color:#f33b45;"><legend></span><span style="color:#000000;">标题。（9）<strong>列表元素</strong>：</span><span style="color:#f33b45;"><ul></span><span style="color:#000000;">（无序列表）</span><span style="color:#000000;">、</span><span style="color:#f33b45;"><ol></span><span style="color:#000000;">（有序列表）</span><span style="color:#000000;">、</span><span style="color:#f33b45;"><li></span><span style="color:#000000;">（定义列表项、可在ul、ol中使用）</span><span style="color:#000000;">、</span><span style="color:#f33b45;"><dl></span><span style="color:#000000;">（代表</span>描述列表<span style="color:#000000;">）、</span><span style="color:#f33b45;"><dt></span><span style="color:#000000;">（</span>只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签<span style="color:#000000;">）、</span><span style="color:#f33b45;"><dd></span><span style="color:#000000;">（</span>作为描述列表（<dl> 元素）的子元素出现，必须后跟一个 <dt> 元素<span style="color:#000000;">）。（10）<strong>表格元素</strong>：</span><span style="color:#f33b45;"><table>、<thead></span><span style="color:#000000;">（定义表格的头）</span><span style="color:#000000;">、</span><span style="color:#f33b45;"><tbody></span><span style="color:#000000;">（</span>组合了一个或者多个 <tr> 元素，作为 <table> 元素的主体内容<span style="color:#000000;">）、</span><span style="color:#f33b45;"><tfoot></span><span style="color:#000000;">（</span>表示HTML表格的页脚<span style="color:#000000;">）、</span><span style="color:#f33b45;"><tr></span><span style="color:#000000;">（</span>一行单元格<span style="color:#000000;">）、</span><span style="color:#f33b45;"><th></span><span style="color:#000000;">（表示</span>表头部分，以粗体显示<span style="color:#000000;">）、</span><span style="color:#f33b45;"><td></span><span style="color:#000000;">（表格的</span>单元格<span style="color:#000000;">）、</span><span style="color:#f33b45;"><caption></span><span style="color:#000000;">（</span>表格的标题<span style="color:#000000;">）。（11）<strong>特殊元素</strong>：</span><span style="color:#f33b45;"><!DOCTYPE></span><span style="color:#000000;">（</span>文档类型声明<span style="color:#000000;">）、</span><span style="color:#f33b45;"><!-- --></span><span style="color:#000000;">（</span> 注释标签<span style="color:#000000;">）、</span><span style="color:#f33b45;"><hr></span><span style="color:#000000;">（</span>表示段落级元素之间的主题划分<span style="color:#000000;">）。</span></li> </ol> <ul> <li>css:认识了一些css的样式和选择器。</li> </ul> <ol> <li>css引入方式：（1）<span style="color:#000000;">内联样式 </span><span style="color:#000000;">( </span><span style="color:#000000;">样式位于元素内部 )；（2）内部样式 </span><span style="color:#000000;">( </span><span style="color:#000000;">样式位于</span><span style="color:#000000;">head</span><span style="color:#000000;">元素的</span><span style="color:#000000;">style</span><span style="color:#000000;">元素中 )；（3）外部样式 </span><span style="color:#000000;">( </span><span style="color:#000000;">独立的</span><span style="color:#000000;">CSS</span><span style="color:#000000;">文件</span><span style="color:#000000;"> )。</span></li> <li><span style="color:#000000;">margin: 外边距；padding:内边距。</span></li> <li><span style="color:#000000;">margin简写属性：margin:0;（上下左右全部为0;）；margin:10px 20px;（上下为10 左右为20）；margin：10p 20px 30px;（上为10px 左右为20px 下为30px）;margin：10px 20px 30px 40px;（上为10px 左为20px 右为30px 下为40px）。</span></li> <li>圆角属性：border-radius: 5px;。</li> <li>浮动属性：float:right/left;</li> <li>相对定位：position: relative;（相对于自身的静态位置定位）；left ：相对于原先的静态位置的left走，偏移了多少距离 （right、top、bottom类似）</li> <li>字体居中：text-align: center;</li> <li>行高等于高度时，字体上下居中</li> <li>line-height:字体行高。</li> <li>css选择器有5种：（1）.class 类名选择器；（2）#id id选择器；（3）tagName 元素名选择器；（4）* 通配符选择器；（5）html,body,.box 分组选择器。</li> </ol> <ul> <li>js:了解了js的变量、普通语句、方法的声明和使用。</li> </ul> <ol> <li>使用var命令声明变量：var 变量名=值/表达式;（<span style="color:#000000;">JavaScirpt是一种动态类型语言，故变量的类型没有限制，可以赋予各种类型的值。</span>）</li> <li><span style="color:#000000;">如果使用var重新声明一个已经存在的变量，那么此次声明是无效的。</span></li> <li><span style="color:#000000;">如果第二次声明的同时还赋值了，则会覆盖掉前面的值。</span></li> <li>可以<span style="color:#000000;">使用console.log方法，在控制台（console）显示变量a的值：console.log(a);</span></li> <li><span style="color:#000000;">标识符命名:第一个字符，可以是任意字母，以及美元符号（$）和下划线（_），但不能是数字；第二个字符及后面的字符，除了字母、美元符号和下划线，还可以用数字0-9。</span></li> <li>常量：<span style="color:#000000;">常量是一旦声明就无法改变的量。声明方式：</span><span style="color:#000000;">const a = 1;（注意：常量不能和变量同时声明相同的标识）。</span></li> </ol> <hr> <p><strong>作业：</strong></p> <ul> <li>通过js获取输入框中的vlaue值</li> </ul> <pre class="has"><code class="hljs language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取input的值 执行结果：
-
-
输入“你好”
-
- 点击某个元素，更改该元素的样式
点击链接改变颜色 执行结果：
-
未点击该链接时：
-
-
当鼠标移动到链接时：
-
-
当鼠标单击链接时：
-
- 互换变量值（不创建第三个变量）
互换变量值 请输入任意两个数：
将两个数值互换
执行结果：
-
-
输入a的值为1，b的值为2
-
- 九九乘法口诀
九九乘法表 执行结果：
-
-