前端学习笔记_002_初识HTML

最新推荐文章于 2024-08-13 20:57:25 发布

阿十三

最新推荐文章于 2024-08-13 20:57:25 发布

阅读量177

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/A_thirteen/article/details/108325779

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

初识HTML_2

1、认识表格。
2、认识列表。
3、认识表单。

1、认识表格Table

表格Table常用于表格数据的显示，而不用于页面布局。

表格由三部分组成：

  1、表格标签（<table> </table>）
  2、行标签（<tr> </tr>）
  3、单元格标签（<th> </th>（字体居中加粗）或<td> </td>）

表格属性

属性名	含义	常用属性值
border	设置表格的边框像素（默认border=“0”）	像素（px）
cellspacing	单元格之间的间距	px（默认2px）
cellpadding	单元格与内容之间的间隔	px（默认1px）
width	表格宽度	px
height	表格高度	px
aligh	表格在网页中的对齐方式	left、center、right

表格标题caption

<table>
	<caption>表格标题</caption>
</table>

合并单元格

跨行合并：rowspan=“合并单元格数”
跨列合并：colspan=“合并单元格数”

合并单元格顺序：先上后下；先左后右。（注意：删除多余单元格！）

总结

在这里插入图片描述

<table border="1" align="center" cellspacing="0" cellpadding="2px" width="500" height="200px" >

   <caption> <h3>小说排行榜</h3> </caption>
   
   <tr>
    <th>排名</th>
    <th>关键词</th>
    <th>趋势</th>
    <th>今日搜素</th>
    <th>最近七天</th>
    <th>相关链接</th>
   </tr>
   
   <tr>
    <td>1</td>
    <td>鬼吹灯</td>
    <td>
     <img src="images/up.jpg" />
    </td>
    <td>3000</td>
    <td>360</td>
    <td rowspan="2">
     <a href="#">贴吧</a>
     <a href="#">图片</a>
     <a href="#">百科</a>
    </td>
   </tr>
   
   <tr align="center">
    <td>2</td>
    <td>酒神</td>
    <td colspan="3">
     <img src="images/up.jpg" />
    </td>
   </tr>
   
   <tr>
    <td>3</td>
    <td>斗罗大陆</td>
    <td>
     <img src="images/up.jpg" />
    </td>
    <td>3000</td>
    <td>360</td>
    <td>
     <a href="#">贴吧</a>
     <a href="#">图片</a>
     <a href="#">百科</a>
    </td>
   </tr>
   
   <tr>
    <td>4</td>
    <td>遮天</td>
    <td>
     <img src="images/up.jpg" />
    </td>
    <td>3000</td>
    <td>360</td>
    <td>
     <a href="#">贴吧</a>
     <a href="#">图片</a>
     <a href="#">百科</a>
    </td>
   </tr>
  </table>

表格结构（拓展）

   对于比较复杂的表格可以划分表格结构（放于<table>中）：
   1、头部：<thead></thead>（内部必须有<tr>,一般用于装标题<caption>和<th>）；
   2、主体：<tbody></tbody>
   3、脚注：<tfoot></tfoot>（使用较少）

2、认识列表

概念：容器里面装载着结构、样式一致的文字或者图表的一种形式，叫做列表。

与表格不同，列表常用于布局；因为列表没有行的概念，自由组合度更高。

理解：

无序列表的应用场景
自定义列表的应用场景

应用

无序列表语法
自定义列表语法

2.1、无序列表

常用于页面布局。

<!-- 无序列表 -->
  <ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ... ...
  </ul>

注意：
        1、<ul></ul>里面只能嵌套<li></li>;
        2、<li></li>里面可以放入任何元素；
        3、无序列表自带样式，交给CSS解决。

2.2、有序列表

常用于排行榜（相对于无序列表使用较少）。

<!-- 有序列表 -->
  <ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ... ...
  </ol>

注意：
        1、特性基本与无序列表一致，但略有不同；
        2、列表按一定顺序排列。

2.3、自定义列表

常用于网页头部或者尾部的分级列表。

<!-- 自定义列表 -->
  <dl>
   <dt>名词1</dt>
   <dd>名词1解析1</dd>
   <dd>名词1解析1</dd>
   ... ...
   <dt>名词2</dt>
   <dd>名词2解析2</dd>
   <dd>名词2解析2</dd> 
   ... ...
  </dl>

3、认识表单

目标：
     1、能写出最常用的注册类表单；
     2、能说出input表单常见属性。
     
组成： 表单域、提示文本、表单。
     
作用： 表单的作用是收集用户信息。

3.1、input控件（重点）

语法：

<!-- input控件 -->
  <input type="属性值" value="默认显示" />

常用属性

常见属性
属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	用户自定义	控件名称
value	用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	单选框和复选款中默认选中项

注意：
     1、tyoe="radio"需要有相同的name="   ",否则无法实现单选框。
     2、在属性值radio与checkbox中；可用checked="checked"默认选中。
     3、有些属性要使用value属性。
     4、属性type="image"要加src="   "属性。

3.2、Label标签（理解）

概念：label标签为input标签定义标注，用于提高用户体验。

作用：用于绑定一个表单元素，当点击label标签时，该元素获得输入焦点。

绑定表单元素的两种方法

1.第一种方法就是label标签直接包括input标签。

<!-- label标签的第1种使用方法 -->
<label> <input type="text" name="username" value="请输入用户名" /> 
</label>

2.第二种方法就是用属性for=" " 与属性id=" " ，规定label标签与那个元素绑定。

<!-- label标签的第2种使用方法 -->
  <label for="sex">男</label>
  <input type="radio" id="sex" />

3.3、textarea控件（文本域）

作用：通过textarea控件可以轻松创建多行文本框；多用于留言板。

<!-- textarea控件 -->
  <textarea rows="显示的行数" cols="每行显示的字符数">
   文本内容
  </textarea>

注意：实际开发中rows=“显示的行数” 与cols=“每行显示的字符数” 不使用。

3.4、select下拉列表

作用：节省空间，让用户有多个选择项。

<!-- select下拉菜单 -->
  <select>
   <option>选择项1</option>
   <option>选择项2</option>
   <option>选择项3</option>
   ... ...
  </select>

注意：
     1、<select></select>标签中至少有一个<option>标签。
     2、<option>标签中定义selected="selected" ,则该项为默认选中项。
     3、实际中使用较少，一般用无序列表代替。

3.5、form表单域

作用：用于定义表单域，以实现用户信息的收集与传递，信息交与服务器。

<!-- form表单域 -->
  <form action="url地址" method="提交方式" name="表单名称" >
   各种表单控件
  </form>

常用属性值

属性	属性值	作用
action	url地址	用于指定接收并处理数据的服务器的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或者post
name	名称	用于指定表单名称，以区分同一个页面中的多个表单

注意：
     1、使用ajax后台交互，必须使用form表单。
     2、属性method一般使用属性值 post 防止泄密。

总结练习

在这里插入图片描述

<form action="" method="post" name="demo" >
   <table border="0" cellspacing="0" align="center" width="600px">
    
    <caption> <h4> 青春不常在，抓紧谈恋爱 </h4> </caption>
    
    <tr>
     <td>性别</td>
     <td>
      <input type="radio" name="sex" id="sex1" value="请选择性别" checked="checked" />
      <label for="sex1"><img src="images/man.jpg" /></label>
      <label for="sex1">男</label>
      
      <input type="radio" name="sex" id="sex0" value="请选择性别" />
      <label for="sex0"><img src="images/women.jpg" /></label>
      <label for="sex0">女</label>
     </td>
    </tr>
    
    <tr>
     <td>生日</td>
     <td>
      <select>
       <option selected="selected">---请输入年---</option>
       <option>1995</option>
       <option>1996</option>
       <option>1997</option>
      </select>
      
      <select>
       <option selected="selected">---请输入月---</option>
       <option>1</option>
       <option>2</option>
       <option>3</option>
      </select>
      
      <select>
       <option selected="selected">---请输入日---</option>
       <option>1</option>
       <option>2</option>
       <option>3</option>
      </select>
     </td>
    </tr>
    
    <tr>
     <td>所在地区</td>
     <td>
      <input type="text" value="北京" />
     </td>
    </tr>
    
    <tr>
     <td>婚姻状况</td>
     <td>
      <input type="radio" name="marry" id="marry0" value="" checked="checked" /><label for="marry0">未婚</label>
      <input type="radio" name="marry" id="marry1" value=""/><label for="marry1">已婚</label>
      <input type="radio" name="marry" id="marry2" value=""/><label for="marry2">离异</label>
     </td>
    </tr>
    
    <tr>
     <td>学历</td>
     <td>
      <input type="text" value="请输入学历" />
     </td>
    </tr>
    
    <tr>
     <td>月薪</td>
     <td>
      <input type="text" value="请输入月薪" />
     </td>
    </tr>
    
    <tr>
     <td>手机号码</td>
     <td>
      <input type="text" value="请输入手机号码" />
     </td>
    </tr>
    
    <tr>
     <td>昵称</td>
     <td>
      <input type="text" value="请输入昵称" />
     </td>
    </tr>
    
    <tr>
     <td>喜欢的类型</td>
     <td>
      <input type="checkbox" name="type" id="type0" /><label for="type0">温柔</label>
      <input type="checkbox" name="type" id="type1" /><label for="type1">妩媚</label>
      <input type="checkbox" name="type" id="type2" /><label for="type2">英气</label>
      <input type="checkbox" name="type" id="type3" /><label for="type3">可爱</label>
     </td>
    </tr>
    
    <tr>
     <td>自我介绍</td>
     <td>
      <textarea value="介绍一下自己...">
       介绍一下自己...
      </textarea>
     </td>
    </tr>
    
    <tr>
     <td></td>
     <td>
      <input type="image" src="images/btn.png" />
     </td>
    </tr>
    
    <tr>
     <td></td>
     <td>
      <input type="checkbox"/>
      我同意注册条款和加入会员标准
     </td>
    </tr>
    
    <tr>
     <td></td>
     <td>
      <a href="../../HTML作业/task_001.html">我是会员，立即登录</a>
     </td>
    </tr>
    
    <tr>
     <td></td>
     <td>
      <h3>我承诺</h3>
      <ul>
       <li>年满18岁、单身</li>
       <li>抱着严肃的态度</li>
       <li>真诚寻找另一半</li>
      </ul>
     </td>
    </tr>
    
   </table>
  </form>

小技巧

1、dl>dt*2>dd*2

2、dl>dt*2+dd*3

阿十三

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记_002_初识HTML

初识HTML_21、认识表格。2、认识列表。3、认识表单。1、认识表格Table 表格Table常用于表格数据的显示，而不用于页面布局。表格由三部分组成： 1、表格标签（<table> </table>） 2、行标签（<th> </th>或<tr> </tr>） 3、单元格标签（<td> </td>）...
复制链接

扫一扫