欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于宏奕培训的一些小笔记(二)

程序员文章站 2022-06-25 11:53:27
这次的笔记主要内容为拓展阅读训练的整理归纳html内容之表格表格标题
定义一个表格行设置标题,数据本体,脚注用来固定显示顺序,也有区分作用,可用多个tbody划分属性标签<...

这次的笔记主要内容为拓展阅读训练的整理归纳

html内容之表格

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

  • <table><table/>定义一个表格

  1. <th>定义表头(列)

  2. <tr>行设置

  3. <td>列设置

  4. <thead>标题,<tbody>数据本体,<tfoot>脚注

    用来固定显示顺序,也有区分作用,可用多个tbody划分
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)

  • 属性标签
  1. <border="0">或<border="1"> 设置边框
  2. <cellpadding="数字"> 单元格边距(单元格内的空白部分)
  3. <cellspacing="数字"> 单元格间距(单元格之间的距离)
  4. <colspan="数字"> 跨列(在th或td中添加属性)合并几列单元格
  5. <rowspan="数字">跨行 (在th或td中添加属性)合并几行单元格
  6. <colgroup>定义列组的属性
  7. <col>定义一个或多个列的属性 (可覆盖colgroup)
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)
    ![](https://img-blog.csdnimg.cn/20201023111733625.png#pic_center
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)
    关于宏奕培训的一些小笔记(二)

关于宏奕培训的一些小笔记(二)
关于宏奕培训的一些小笔记(二)

html内容之表单

  • <form>定义表单标签(创建一个表单)

    1. action:表单属性之一,指示服务器上处理表单输出的程序

    2. method:表单属性之一,告诉浏览器如何将数据发送给服务器(post或get)

      Get方法:

      • GET 请求可被缓存;
      • GET 请求保留在浏览器历史记录中;
      • GET 请求可被收藏为书签;
      • GET 请求不应在处理敏感数据时使用;
      • GET 请求有长度限制;
      • GET 请求只应当用于取回数据;

      POST方法:

      • POST 请求不会被缓存;
      • POST 请求不会保留在浏览器历史记录中;
      • POST 不能被收藏为书签;
      • POST 请求对数据长度没有要求;

代码:

<form action="#" method="post"><p>密码:<input type="text" name="pwd"></p><p><input type="submit" value="提交"/><input type="reset" value="重填"/></p></form>
  • 标签
  1. type属性:指定表单元素的类型,可选项有text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text;
  2. name属性:指定表单元素的名称;
  3. value属性:可选,指定表单元素的初始值;
  4. checked:指定按钮是否被选中;
  5. size属性:指定表单元素的初始宽度;
  6. maxlength属性:指定可在text或password元素中输入的最大字符数;
  • 三种按钮
  1. reset按钮:重置按钮,重置为最初状态;
  2. submit按钮:提交按钮,将会提交到action属性所指的URl,并传递表单数据;
  3. button按钮:普通按钮,需要与事件关联使用;

代码:

<form action="#"method="post"style="margin:0auto;width: 1000px;margin-top:100px;">       

<p>姓名:<input type="text" /></p>        

<p>邮箱:<input type="text" /></p>       

<p>地址:<input type="text" /></p>      

<p>性别:男<input type="radio" checked/>&nbsp;<input type="radio"/></p>        <p>爱好:篮球<input type="checkbox" />&nbsp;羽毛球<input type="checkbox" checked/>&nbsp;足球<input type="checkbox"/></p>        

<p>今天星期:            <select name="weekday" size="1">              

 <option value="1">星期一</option>              

 <option value="2">星期二</option>              

 <option value="3" selected>星期三</option>               

<option value="4">星期四</option>               

<option value="5">星期五</option>               

<option value="6">星期六</option>               

<option value="7">星期七</option>            

</select>       

 </p>       

 <p>密码:<input type="password" /></p>        

<p>确认密码:<input type="password" /></p>                 

<p>            

<input type="submit" value="提交按钮"/>           

 <input type="reset" value="重填按钮"/>            

<input type="button" value="普通按钮"/>        

</p>    

</form>

关于宏奕培训的一些小笔记(二)

html内容之图像音频视频

图像<img>

  • 音频<audio>
  • 视频<video>

格式均为<标签名 src=“文件地址” 长宽高属性>

  • <source>标签:连接不同视频文件,供不同浏览器识别
  • <track>标签: 定义媒体播放器中的文本轨道,如字幕 文本框等

html内容之链接

<a>定义锚(导航到同一个页面不同部分)

  • <link>定义文档与外部资源的关系(打开外部链接)
  • <nav>定义导航链接(打开内部链接,也就是不同页面)

关于宏奕培训的一些小笔记(二)
关于宏奕培训的一些小笔记(二)

html内容之结构

  • header元素:定义页眉
  • artical元素:定义一篇日志,一条新闻或用户评论等于上下文不相关的独立部分(用section元素进行划分)
  • footer元素:定义页脚

本文地址:https://blog.csdn.net/hxtxsdcxy/article/details/109238704

相关标签: html
定义表头(列)
列设置