《复习食用》HTML5基础笔记2

107 阅读4分钟

1.表格标签

控制表格

(1)表格中的标记
表格仅用于存放各种数据。3个与表格相关的标记是
<table><tr><td>
<table>:定义整个表格
<tr></tr>: 定义一行,必须嵌套在<table></table>标签中
<td></td>:定义一个单元格,必须嵌套在<tr></tr>标签中

  <table>
   <tr>
       <td>单元格中的文字</td>
      ... 
    <tr>
    ...
    <table>    
    

(2)表头单元格
<th>标签表示HTML表格的表头部分

总结:表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。

(3)表格属性

属性名属性值描述
alignleft,center,right规定表格相对周围元素对齐方式。
border1或""规定表格单元格是否拥有边框,默认为"",表示没有边框
callpadding像素值规定单元边沿与其内容之间的空白,默认为1像素
callspacing像素值规定单元格之间的空白,默认为2像素。
width像素值与百分比规定表格宽度

(4)表格的结构标签
<thead>: 用于定义表格的头部。内部必须拥有标签。一般是位于第一行。
<tbody>:用于定义表格的主体,主要用于放数据本体。

(5)合并单元格
(一)合并单元格方式

  • 跨行合并:rawspan="合并单元格的个数"
  • 跨列合并:colspan="合并单元格的个数"

(二)目标单元格

  • 跨行:最上侧单元格为目标单元格,写合并代码。
  • 跨行:最左侧单元格为目标单元格,写合并代码。

(三)合并单元格的步骤
1.先确定是跨行还是跨列合并。
2.找到目标单元格,写上合并方式=合并的单元格数量。比如:<td colspan="2"></td>
3.删除多余的单元格。

2.列表标签

列表是用来布局的!
列表可以分为三大类:无序列表有序列表自定义列表

无序列表

(1).<ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签来定义。
无序列表的基本语法如下:

    <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        ...
    </ul>
    
     <ul>
        <li>周杰伦</li>
        <li>胡歌</li>
        <li>刘德华</li>
        ...
    </ul>

fba01b54603fb4cd23065d63f2ef12b.png

(一)无序列表的各个列表项之间没有顺序级别之分,是并列的。
(二)<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的。
(三)<li></li>之间相当于一个容器,可以容纳所以元素.
(四)无序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置。

有序列表(理解)

各个列表会按照一定的顺序排列定义。基本语法

    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    <ol>    

(一)<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
(二)<li></li>之间相当于一个容器,可以容纳所以元素。

(三)有序列表会带有自己的样式属性,但在实际使用时,我们会使用css来设置。

自定义列表(重点)

在HTML标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
其基本语法如下:

    <dl>
      <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
    </dl>

(一)<dl></dl>里面只能包含<dt>和<dd>
(二)<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>

列表总结

image.png

3.表单标签

使用表单目的就是收集用户信息。

表单的组成

在HTMl中,一个完整的表单通常由表单域,表单控件和提示 信息3个部分组成。

表单域

表单域是一个包含表单元素的区域。
<form>会把它范围当的表单元素信息提交给浏览器

        <form action="url地址" method="提交方式" name="表单域名称">
            各种表单元素控件
        </form>
属性属性值作用
actionurl地址指定接收并处理表单数据的服务器程序的url地址
methodget/post设置表单数据的提交方式,其取值为get、post
name名称指定表单的名称,以区分同一个页面中的多个表单域

表单控件

<input>表单元素为单标签
type属性,根据不同的type属性值,输入字段拥有多种形式(文本框,复选框,掩码后的文本控件,单选按钮,按钮等)。

        <input type="属性值" />

a5b1a85bada795f7a976ba060112bcf.png

除了type属性外,<input>标签还有其他很多属性,其常用属性如下:

image.png

<label>标签

<label>标签用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加客户体验。

      <label for="sex">男</label>
      <input type="radio" name="sex" id="sex"/>

核心:<label>标签的for属性应当与相关元素的id相同

<select>标签

使用场景:在页面中,如果有多个选线让用户选择,为了节约空间是,我们可以使用<select>标签控件定义下拉列表。
<select>语法:

     <select>
         <option>选项一</option>
          <option>选项二</option>
          <option>选项三</option>
         ...
     <select>    
         
<textarea>表单元素

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
语法:

     <form>
         今日反馈:
         <textarea cols="50" rows="">
             这个框是textarea反馈留言
        <textarea>
    </textarea>