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

html基础知识02

程序员文章站 2022-05-08 11:12:02
...

img 标签

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，图像不能显示时显示文字
title 文本 提示文本，鼠标放到图像上，显示文字

a 标签

  1. <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
  • 两个常用属性
属性 作用
href 用于指定链接目录的 url 地址
target 用于指定链接页面的打开方式，_self 默认值，_blank 在新窗口中打开
  • 链接分类：

  1. 外部链接

  2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。

  3. 空连接（#）

  4. 下载链接

  5. 网页元素链接：在网页中的各种网页元素，如文本，图像，表格，视频都可以添加链接

  6. 锚点链接：进行当前页面不同部位跳转

自定义列表

dl里面只能包含dt和dd

    

  1. <dl>
    2. 

  2.   <dt>名词1</dt>
    3. 

  3.   <dd>名词解释1</dd>
    4. 

  4.   <dd>名词解释2</dd>
    5. 

  5. </dl>
    6. 

    7. 

  7. <dl>
    8. 

  8.   <dt>关注我们</dt>
    9. 

  9.   <dd>新浪微博</dd>
    10. 

  10.   <dd>官方微信</dd>
    11. 

  11.   <dd>联系我们</dd>
    12. 

  12. </dl>
    13.

表格标签 table

  • table 的常见属性
属性 属性值 说明
align left,center,right 规定表格相对周围元素的对齐方式
border 1 或 “” 默认为“”,表示表格没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认 1 像素
cellspacing 像素值 规定单元格之间的空白，默认 2 像素
width 像素值 or 百分比 规定表格的宽度

  • <table>里面的标签</table>

表格的基本构成最少需要三个标签：<table>、<tr>、<td>

标签名 含义 说明
tr 表格行标签 放在 table 标签内部才有意义
td 单元格标签 单元格标签是个容器级元素，可以放任何东西
th 表头单元格标签 它还是一个单元格，但是里面的文字会居中且加粗
caption 表格标题标签 表格的标题，后跟表格

合并单元格

  • 方式

    • 跨行合并（合并这一列上的）：rowspan=“合并单元格的个数”，垂直方向要在其他行上删除单元格
    • 跨列合并（合并这一行上的）：colspan=”合并单元格的个数”，水平方向要在这一行上删除单元格

  • 合并单元格三步

  1. 确定跨行还是跨列
  2. 找到目标单元格，写上合并方式=合并单元格数量
  3. 删除多余的单元格
    

  1. <table width="500" height="249" border="1" cellspacing="0">
    2. 

  2.   <tr>
    3. 

  3.     <td></td>
    4. 

  4.     <td colspan="2"></td>
    5. 

  5.   </tr>
    6. 

  6.   <tr>
    7. 

  7.     <td rowspan="2"></td>
    8. 

  8.     <td></td>
    9. 

  9.     <td></td>
    10. 

  10.   </tr>
    11. 

  11.   <tr>
    12. 

  12.     <td></td>
    13. 

  13.     <td></td>
    14. 

  14.   </tr>
    15. 

  15. </table>
    16. 

    

  1. <table border="1" style="width: 300px">
    2. 

  2.   <caption>
    3. 

  3.     这是一个表格
    4. 

  4.   </caption>
    5. 

    6. 

  6.   <thead>
    7. 

  7.     <tr>
    8. 

  8.       <th>姓名</th>
    9. 

  9.       <th>性别</th>
    10. 

  10.       <th>婚否</th>
    11. 

  11.     </tr>
    12. 

  12.   </thead>
    13. 

    14. 

  14.   <tbody>
    15. 

  15.     <tr>
    16. 

  16.       <td>张三</td>
    17. 

  17.       <td>男</td>
    18. 

  18.       <td>未婚</td>
    19. 

  19.     </tr>
    20. 

  20.     <tr>
    21. 

  21.       <td>李四</td>
    22. 

  22.       <td>女</td>
    23. 

  23.       <td>已婚</td>
    24. 

  24.     </tr>
    25. 

  25.   </tbody>
    26. 

    27. 

  27.   <tfoot>
    28. 

  28.     <tr>
    29. 

  29.       <td colspan="3">统计：共两人</td>
    30. 

  30.     </tr>
    31. 

  31.   </tfoot>
    32. 

  32. </table>
    33.

表单标签 form

  • 表单的组成
  1. 表单域
  2. 表单控件（表单元素）
  3. 提示信息
  • 常用属性
    

  1. <form action="url地址" method="提交范式" name="表单域名称">
    2. 

  2.   各种表单元素控件
    3. 

  3. </form>
    4.
属性 属性值 说明
action url 地址 用于指定接收并处理表单数据的服务程序的 url 地址
method get/post 用于设置表单数据的提交发方式，默认 get
name 名称 用于指定表单名称，以区分同一个页面中多个表单域

表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

  • input 输入表单元素
  • select 下拉表单元素
  • textarea 文本域元素
  1. input 表单元素

在此标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

<input type="属性值">

  • input 标签为单标签

  • type 属性设置不同的属性值用来指定不同控件类型

  • type 属性值

属性值 说明
text 单行文本框，默认行为。
password 定义密码字段，该字段中的字符被掩码。
radio 定义单选按钮
checkbox 定义复选框
file 定义输入字段和”浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
reset 定义重置按钮。重置按钮会 清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
button 普通按钮（多数情况下，用于通过 javascript 启动脚本)
  • input 其他属性
属性 属性值 说明
name 用户自定义 定义 input 元素的名称
value 用户自定义 规定 input 元素的值
checked checked radio、checkbox 首次加载时是否被选中
maxlength 正整数 规定输入字段中的字符的最大长度
  • name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
  • name 表单元素的名字，要求单选按钮和复选框要有相同的 name 值。
  • checked 属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素。

  • maxlength 是用户可以在表单元素输入的最大字符数，一般较少使用。

  • label 标签(提升用户体验)

label 可以关联 input 标签，更容易设置 CSS 样式

    

  1. <label for="text">用户名:</label>
    2. 

  2. <input type="text" id="text" />
    3. 

  3. <!-- lable 标签的 for 属性应当与相关元素的 id 属性相同 -->
    4. 

    5. 

  5. <label for="man">男</label>
    6. 

  6. <input type="radio" id="man" name="sex" />
    7. 

    8. 

  8. <label for="woman">女</label>
    9. 

  9. <input type="radio" id="woman" name="sex" />
    10.
  • 一些实例（文本框、单选、多选）
    

  1. <form action="www.haosou.com" method="GET">
    2. 

  2.   <!-- 文本框的值是用户自己输入的 -->
    3. 

  3.   username:<input type="text" name="username" />
    4. 

  4.   <br />
    5. 

  5.   password:<input type="password" name="password" />
    6. 

  6.   <input type="submit" value="login" />
    7. 

    8. 

  8.   <!-- 单选框首先把他们弄成一道题，统一name值，然后是名和值都有才能发送 -->
    9. 

  9.   <h3>你们喜欢的水果</h3>
    10. 

  10.   1.苹果<input type="radio" name="fruit" value="apple" />
    11. 

    12. 

  12.   2.梨子<input type="radio" name="fruit" value="pear" />
    13. 

    14. 

  14.   3.香蕉<input type="radio" name="fruit" value="banana" />
    15. 

    16. 

  16.   <!-- 多选框跟单选框一样，首先需要弄成一道题，就需要统一name值，然后再添加值 -->
    17. 

  17.   <h3>你们喜欢的电影</h3>
    18. 

    19. 

  19.   1.《肖生克的救赎》<input
    20. 

  20.     type="checkbox"
    21. 

  21.     name="movie"
    22. 

  22.     value="The Shawshank Redemption"
    23. 

  23.   />
    24. 

    25. 

  25.   2.《盗梦空间》<input type="checkbox" name="movie" value="Inception" />
    26. 

    27. 

  27.   3.《阿甘正传》<input type="checkbox" name="movie" value="Forrest Gump" />
    28. 

  28. </form>
    29.

2.select 下拉表单元素

在 option 中定义 select=”selected”时，当前项即为默认选中项

    

  1. <form>
    2. 

  2.   籍贯:
    3. 

  3.   <select name="address">
    4. 

  4.     <option>安徽</option>
    5. 

  5.     <option>上海</option>
    6. 

  6.     <option>杭州</option>
    7. 

  7.     <option selected="selected">火星</option>
    8. 

  8.     <option>M78星云</option>
    9. 

  9.   </select>
    10. 

  10. </form>
    11.

作业一

用表格实现一张课程表

    

  1. <table border="1" cellspacing="0" width="500" height="249">
    2. 

  2.   <caption>
    3. 

  3.     学生课程表
    4. 

  4.   </caption>
    5. 

  5.   <thead>
    6. 

  6.     <tr>
    7. 

  7.       <th></th>
    8. 

  8.       <th>星期一</th>
    9. 

  9.       <th>星期二</th>
    10. 

  10.       <th>星期二</th>
    11. 

  11.       <th>星期三</th>
    12. 

  12.       <th>星期四</th>
    13. 

  13.       <th>星期五</th>
    14. 

  14.     </tr>
    15. 

  15.   </thead>
    16. 

    17. 

  17.   <tbody>
    18. 

  18.     <tr>
    19. 

  19.       <th rowspan="3">上午</th>
    20. 

  20.       <th>语文</th>
    21. 

  21.       <th>数学</th>
    22. 

  22.       <th>语文</th>
    23. 

  23.       <th>数学</th>
    24. 

  24.       <th>语文</th>
    25. 

  25.       <th>数学</th>
    26. 

  26.     </tr>
    27. 

  27.     <tr>
    28. 

  28.       <th>数学</th>
    29. 

  29.       <th>语文</th>
    30. 

  30.       <th>数学</th>
    31. 

  31.       <th>语文</th>
    32. 

  32.       <th>数学</th>
    33. 

  33.       <th>语文</th>
    34. 

  34.     </tr>
    35. 

  35.     <tr>
    36. 

  36.       <th>品生</th>
    37. 

  37.       <th>英语</th>
    38. 

  38.       <th>品生</th>
    39. 

  39.       <th>体育</th>
    40. 

  40.       <th>英语</th>
    41. 

  41.       <th>品生</th>
    42. 

  42.     </tr>
    43. 

    44. 

  44.     <tr>
    45. 

  45.       <th></th>
    46. 

  46.       <th colspan="6">午休</th>
    47. 

  47.     </tr>
    48. 

  48.     <tr>
    49. 

  49.       <th rowspan="3">下午</th>
    50. 

  50.       <th>语文</th>
    51. 

  51.       <th>语文</th>
    52. 

  52.       <th>语文</th>
    53. 

  53.       <th>英语</th>
    54. 

  54.       <th>语文</th>
    55. 

  55.       <th>语文</th>
    56. 

  56.     </tr>
    57. 

  57.     <tr>
    58. 

  58.       <th>音乐</th>
    59. 

  59.       <th>体育</th>
    60. 

  60.       <th>语文</th>
    61. 

  61.       <th>体育</th>
    62. 

  62.       <th>体育</th>
    63. 

  63.       <th>语文</th>
    64. 

  64.     </tr>
    65. 

  65.     <tr>
    66. 

  66.       <th>英语</th>
    67. 

  67.       <th>实践活动</th>
    68. 

  68.       <th>实践活动</th>
    69. 

  69.       <th>音乐</th>
    70. 

  70.       <th>英语</th>
    71. 

  71.       <th>实践活动</th>
    72. 

  72.     </tr>
    73. 

  73.   </tbody>
    74. 

  74. </table>
    75.

html基础知识02

作业二

注册表单

    

  1. <form
    2. 

  2.   method="get"
    3. 

  3.   action="http://www.haosou.com"
    4. 

  4.   target="_blank"
    5. 

  5.   autocomplete="on"
    6. 

  6. >
    7. 

  7.   <fieldset>
    8. 

  8.     <legend>用户登录</legend>
    9. 

  9.     <label for="user">username:</label>
    10. 

  10.     <input name="user" id="user" />
    11. 

  11.     <br />
    12. 

    13. 

  13.     <label for="pwd">password:</label>
    14. 

  14.     <input name="password" type="password" id="pwd" />
    15. 

  15.   </fieldset>
    16. 

    17. 

  17.   <button type="submit">提交</button>
    18. 

  18.   <button type="reset">重置</button>
    19. 

  19. </form>
    20.

html基础知识02

上一篇： 利用MySQL加密函数保护Web网站敏感数据的方法分享_MySQL

下一篇： php 百度快照、百度收录、百度热词的代码分享

推荐阅读