技术文章 | Technical articles

前端培训—html源码笔记 第二天

一、 列表

1.1 无序列表 ul(Unordered List)-li(List Item)

属性:type属性值有且只有以下三个:

disc  默认实心圆

square 实心方块

circle  空心圆

<!-- ul-li固定嵌套 -->

<!-- ul中可以嵌套任意多个li标签 -->

<!-- li标签和div一样,可以放任何标签和内容的 -->

<!-- 无序列表项目符号默认实心圆 -->

<ul type="disc">

 <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

 <li>习近平向“2019·中国西藏发展论坛”致贺信</li>

 <li>“一带一路”在制造债务陷阱? 他们有话说</li>

10   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

11   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

12  </ul>

13 

14  <!-- 设置无序列表项目符号为实心方块 square -->

15  <ul type="square">

16   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

17   <li>习近平向“2019·中国西藏发展论坛”致贺信</li>

18   <li>“一带一路”在制造债务陷阱? 他们有话说</li>

19   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

20   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

21  </ul>

22 

23 

24  <!-- 设置无序列表项目符号为空心圆 circle -->

25  <ul type="circle">

26   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

27   <li>习近平向“2019·中国西藏发展论坛”致贺信</li>

28   <li>“一带一路”在制造债务陷阱? 他们有话说</li>

29   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

30   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

31  </ul>

1.2 有序列表 ol(Ordered List)  li(List Item)

属性type有且只有五个属性值:

1    默认,阿拉伯数字

A | a   大小写英文字母

I | i   大小写罗马数字

<!-- 有序列表 ol-li -->

<!-- 属性type  项目符号默认是数字 1234。。。 -->

<!-- reversed  h5属性  倒叙  会有浏览器差异性 IE不识别 -->

<ol type="1" reversed="reversed" start="3">

 <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

 <li>习近平向“2019·中国西藏发展论坛”致贺信</li>

 <li>“一带一路”在制造债务陷阱? 他们有话说</li>

 <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

 <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

10  </ol>

11 

12  <!-- 属性type = A  项目符号为大写字母 -->

13  <ol type="A" start="1000">

14   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

15   <li>习近平向“2019·中国西藏发展论坛”致贺信</li>

16   <li>“一带一路”在制造债务陷阱? 他们有话说</li>

17   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

18   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

19  </ol>

20 

21 

22  <!-- 属性type = a  项目符号为小写字母 -->

23  <ol type="a" reversed start="3">

24   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

25   <li>习近平向“2019·中国西藏发展论坛”致贺信</li>

26   <li>“一带一路”在制造债务陷阱? 他们有话说</li>

27   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

28   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

29  </ol>

30 

31 

32 

33  <!-- 属性type = i  项目符号为小写罗马数字 -->

34  <ol type="i" reversed start="3">

35   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

36   <li>习近平向“2019·中国西藏发展论坛”致贺信</li>

37   <li>“一带一路”在制造债务陷阱? 他们有话说</li>

38   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

39   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

40  </ol>

41 

42 

43  <!-- 属性type = I  项目符号为大写罗马数字 -->

44  <ol type="I" start="99">

45   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

46   <li>习近平向“2019·中国西藏发展论坛”致贺信</li>

47   <li>“一带一路”在制造债务陷阱? 他们有话说</li>

48   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

49   <li>习近平:不敢有丝毫自满,但怀有无比自信</li>

50  </ol>

注意:

a> 有序列表和无序列表的type属性值不能通用

b> li标签可以通用有序和无序列表的type

修改列表项目符号的颜色:

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style type="text/css">

 ul{

  color: red;

 }

 span{

10    color: #000;

11   }

12  </style>

13 </head>

14 <body>

15  <ul type="square">

16   <li><span>习近平:不敢有丝毫自满,但怀有无比自信</span></li>

17   <li><span>卡特获颁美中关系卓越领袖奖 三任美国总统的选择</span></li>

18   <li>640家公司致信特朗普:要求放弃对华加征更多关税</li>

19   <li>演员王劲松:演员背台词都要被夸了?多不要脸呐</li>

20   <li>小区物业服务正常了,业委会却集体请辞……</li>

21  </ul>

22 </body>

 

1.3 自定义列表 Definition List

   <dl>

 <dt>定义项1</dt>

 <dd>描述项11</dd>

 <dd>描述项12</dd>

 <dd>描述项1n</dd>

 <dt>定义项m</dt>

 <dd>描述项m1</dd>

 <dd>描述项m2</dd>

10   <dd>描述项mn</dd>

11  </dl>

案例:

<dl>

 <dt>北京</dt>

 <dd>首都</dd>

 <dd>北方的经济、政治、文化中心</dd>

 <dd>天安门、故宫、八达岭长城</dd>

 <dd>全聚德烤鸭</dd>

 <dt>上海</dt>

 <dd>魔都</dd>

10   <dd>南方经济文化中心</dd>

11   <dd>东方明珠、外滩</dd>

12  </dl>

 

1.4 列表的嵌套

Ul-li    ol-li   dl-dt-dd都是固定嵌套

但是li dd中可以像div一样作为容器嵌套任何东西

<ul>

 <li><h4>碳酸饮料</h4>

  <ol>

   <li>可乐</li>

   <li>雪碧

    <ol type="A">

     <li>肯德基</li>

     <li>啃得起</li>

    </ol>

10     </li>

11    </ol>

12   </li>

13   <li><h4>功能饮料</h4>

14    <ul>

15     <li>脉动</li>

16     <li>红牛</li>

17     <li>健力宝</li>

18    </ul>

19   </li>

20   <li><h4></h4>

21    <ul>

22     <li>红茶

23      <ul>

24       <li>大红袍</li>

25       <li>铁观音

26        <ul>

27         <li type="I">哈哈哈</li>

28        </ul>

29       </li>

30      </ul>

31     </li>

32     <li>绿茶</li>

33     <li>大麦茶</li>

34    </ul>

35   </li>

36   <li>

37    <dl>

38     <dt>奶制品</dt>

39     <dd>牛奶

40      <ul>

41       <li>蒙牛</li>

42       <li>伊利</li>

43      </ul>

44     </dd>

45     <dd>羊奶</dd>

46    </dl>

47   </li>

48  </ul>

二、 表格table

2.1 表格基本知识

table表格

tr 

td(th) 单元格

<!-- table>tr*n>td*m + Tab -->

<table border="1" bordercolor='blue' height="200" width="400" cellspacing="0" cellpadding="10" bgcolor="yellow" summary="这是某公司年度报表">

 <caption>某公司年度报表</caption>

        <!-- 注意:caption标准中规定一个表格只能添加一个标题,但是由于浏览器差异性,一个表格 添加多个标题caption也可以显示 -->

 <tr background="./images/aaa.jpg">

  <th width="100">公司名称</th>

  <th width="100">毛利润</th>

  <th width="100">支出</th>

  <th width="100">净利润</th>

10   </tr>

11   <tr>

12    <th>爱创客</th>

13    <td>1000</td>

14    <td rowspan="2">11</td>

15    <td>-1</td>

16   </tr>

17   <tr>

18    <th>北大</th>

19    <td>100</td>

20    <!-- <td>1</td> -->

21    <td>99</td>

22   </tr>

23   <tr>

24    <th>清华</th>

25    <td colspan="3">50</td>

26    <!-- <td>80</td>

27    <td>-30</td> -->

28   </tr>

29  </table>

30 

31 

heightwidth  设置 表格的宽高

align 设置水平对齐方式,用在table中设置表格整体水平对齐方式,用在trtd设置文本水平居中

属性值:left  center  right

valign 设置单元格文本垂直对齐方式,属性值 middle  top  bottom

borderbordercolor  设置边框的厚度和颜色

cellspacing  设置边框与边框之间的距离  默认是2个像素

cellpadding  设置单元格文本距离边框的距离

bgcolorbackground  设置表格或者单元格的背景颜色或背景图片

summary 设置表格的描述信息

colspan 设置列合并,同一行中的单元格合并;左右合并

rowspan 设置行合并,连续多行单元格合并,上下合并

 

2.2 表格区域划分

 thead:

 tbody:

 tfoot:

 三个使用顺序: thead  à  tfoot à tbody

 目的:这样浏览器就可以在收到所有数据前呈现页脚了

 tbody如果不写,浏览器会默认添加

<table  border="" width="500" height='200'>

 <thead>

  <tr>

   <th>data</th>

   <th>data</th>

   <th>data</th>

  </tr>

 </thead>

 <tfoot>

10    <tr>

11     <th>data</th>

12     <th colspan="2">data</th>

13    </tr>

14   </tfoot>

15   <tbody>

16    <tr>

17     <td></td>

18     <td></td>

19     <td></td>

20    </tr>

21    <tr>

22     <td></td>

23     <td></td>

24     <td></td>

25    </tr>

26    <tr>

27     <td></td>

28     <td></td>

29     <td></td>

30    </tr>

31   </tbody>

32  </table>

 

三、 表单form

1.1 表单介绍

表单用来收集用户数据,并将其提交到对应地址

表单form属性:

action  设置表单数据提交的地址

method  设置请求方式

target 页面打开方式

表单控件介绍:

input  输入框

textarea  文本域,多行输入框

select  下拉列表

 

1.2 input控件介绍

属性type的属性值:

text       文本输入框(默认)

password   密码输入框

radio  单选框  

checkbox 复选框

单选框和复选框name值必须一致

属性: checked 默认被选中的选项

file  文件域

浏览器差异性

image 图像域 具有和submit同样提交的功能

submit 提交按钮

reset 清空或重置信息

button 普通按钮

  <form action="think.php" method="get" target="_blank">

<table cellpadding="10px">

<tr>

<td>姓名:</td>

<!-- placeholder:文本提示信息 -->

<td><input type="text" id="" name="" value="" placeholder="请输入您的姓名" /></td>

</tr>

<tr>

<td>个人密码:</td>

<td><input type="password" id="" name="" value="" placeholder="请输入您的密码" /></td>

</tr>

<tr>

<td>性别:</td>

<td><input type="radio" id="" name="sex" value="" checked="checked" /><input type="radio" id="" name="sex" value="" checked /><input type="radio" id="" name="sex" value="" />未知 </td>

</tr>

<tr>

<td>个人兴趣:</td>

<td><input type="checkbox" id="" name="hobby" value="" />篮球 <input type="checkbox" id="" name="hobby" value="" checked="checked" />足球  <input type="checkbox" id="" name="hobby" value="" />桌球  <input type="checkbox" id="" name="hobby" value="" checked/>学习</td>

</tr>

<tr>

<td>上传个人简历:</td>

<td><input type="file" id="" name="" value=""/></td>

</tr>

<tr>

<td>上传个人头像:</td>

<td><input type="image" src="./images/ccc.jpg" id="" name="" value=""/></td>

</tr>

<tr>

<td><input type="submit" value="提交数据" /></td>

<td><input type="reset" id="" name=""  value="清空数据"/> <input type="button" id="" name=""   value="普通按钮" onclick="alert('哈哈哈!小逗比,要下课了,准备好吃饭!嗯呢')" /></td>

</tr>

</table>

</form>

 项目实战视频教程,请添加微信“haomei0452”免费领取


微信个人号二维码.jpg

关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg

上一篇文章: 前端培训项目实战—华为荣耀商城
下一篇文章: 前端培训机构—css源码笔记(一)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>