第二堂课
[toc]
特殊字符的含义：
 :表示空格 <: 表示小于 >: 表示大于
补充：四级英语词汇：less than:小于；great than:大于
列表标签：
列表分为有序列表和无序列表
<p>常见的编程语言</p>
<ol>
<li>Java</li>
<li>JavaScript</li>
<li>python</li>
</ol>
由上述代码可见：有序列表前面是有一个序列号的，按顺序排序
引入一个问题： 那么前面这个序列号能不能是按其他的一个顺序来呢，比如说：按字母，罗马数字？
ol标签的type属性：
这个属性可以将列表前面的序列号改变成其他类型。 **注意：**序列号的类型只有五种，a A i I 1 除了这五种以外没有其他的类型
代码如下(其中一种类型的代码)：
<p>新海诚《灾难三部曲》</p>
<ol type="I" >
<li>《你的名字》</li>
<li>《言庭之叶》</li>
<li>《铃芽之旅》</li>
</ol>
ol标签的reversed属性
他的作用是倒序，反过来排序 **注意：**这个倒序仅仅指序列号倒序，而序列号对应的内容顺序是不变的。
**新词汇：**reversed 反转，倒序的意思
ol标签的start属性
他的作用是决定从第几个开始排 用法：start:从第几个开始排(不管序列号是什么类型的写数字就行)
代码如下：
<!-- ol标签的start属性 -->
<!-- 作用是决定次列表从第几个开始排 -->
<ol type="I" start="5">
<li>龙猫</li>
<li>天空之城</li>
<li>深海</li>
</ol>
ul无序列表
ul列表和ol最大的区别就是它是无序的 ul只有一个属性就是type属性
ul标签的type属性
ul标签创建的列表没有序列号，代替序列号的默认是一个实心圆。
ul标签有三个type属性的值：
1.dics:ul标签默认的一种图案就是实心圆 2.squre:实心方块符 3.circle:空心圆
ul标签的使用场景：页面中的导航栏
代码如下：
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none; /*取消列表圆点*/
}
li{
margin: 0 10px;
float: left;
color: #f40;
font-weight: 200;
font-size: 20px;
height: 25;
line-height: 25px;
padding: 0,5;
}
li:hover{
color: #fff;
background-color: #f40;
border-radius: 40px;
}
</style>
<ul>
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
img标签：
img是图片标签。
图片路径：
1.网上的url网址 2.本地的相对路径 3.本地的绝对路径
图片属性：alt
她是一个图片占位符。 作用：当图片显示不出来的时候，就会出现alt属性里面的内容
图片属性：title
她是一个图片提示符。 作用：当鼠标光标放在图片上的时候下方会出现一行文本信息(自定义)提示用户这张图片是什么想表达什么意思
表单元素form:
代码如下：
<form action="" method="get">
<p>用户名： <input type="text" name="Username"></p>
<p> 密码： <input type="password" name="password"></p>
<input type="submit" value="提交">
</form>
注意点：
1.单独的一个form标签在页面上是没有展示效果的，要借助于他的子组件input标签。 2.form标签的作用： 自我理解：是把input标签里面的各个属性的value值传入进去，打包给后端服务器。
form标签的属性
<form action="" method="get">
method属性：表示数据用什么方式去发送 action属性：表示数据接收方的地址
input标签的属性
1.txte:表示输入文字是文本类型 2.password：表示输入的文字是密码类型(内容不可见) 3.submit：提交按钮，默认按钮显示的文本是提交(这个文本可通过value值来修改) 4.radio:单选框按钮(要设置选项的name属性，如果属性一直计算机才会知道这几个选项是同一道题) 5.checkbox:复选框按钮(要设置选项的name属性，如果属性一直计算机才会知道这几个选项是同一道题) 6.input的checked属性：为了用户体验方便，这个属性会默认选中一个选项或者多个选项，在提交的时候让用户体验提升
下拉菜单
代码如下：
<form action="" method="get">
<select name="promvce">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<input type="submit" value="交付">
</form>
