前端基础(一.HTML)

一.HTML

  • 1.HTML标签的语义化:
  • 2.基本HTML标签:
  • 3.HTML标签的分类
  • 4.表单元素

1.HTML标签的语义化:

  1. 开发人员维护方便
  2. 有利于搜索引擎优化
  3. 标签自带样式 css加载不出来

2.基本HTML标签:

  1. <a href="http://www.baidu.com" target="_blank">百度</a>
    
    href:打开链接地址
    target:打开新窗口(target=“中间需加入”)
  2. <img src="../image/img01.jpg" alt="这是一个鲜花图片" title="我是图片的title" style="width:200px;height:200px;" >
    
  • src:路径
    • 绝对路径:…/ 或 /
    • 相对路径:http://www.baidu.com
  • alt:当图片加载不出来显示图片内容
  • title:鼠标划入时显示的内容

      3.HTML标签的分类

      1. 行级元素:多个占一行,不能设置宽高
      • span
      • a
      • i(斜体)
      • strong(加粗)
      1. 块级元素:单个占一行,能设置宽高
      • div
      • h1—h6
      • p
      • ul
      • ol
      • li
      1. 行级块元素:多个占一行,能设置宽高
      • img

      4.表单元素

      1. 外面用包围:
      <form action="http://www.xx.com"></form>
      
      1. 标签:
      <label for="username">用户名:</label>
      
      1. 文本框:
      <input id="username" type="text">
      
      1. 密码框:
      <input id="password" type="password">
      
      1. 下拉框:
      <select>
       <option value="">A</option>
      	<option value="">B</option>
      	<option value="">C</option>
      </select>
      
      1. 单选框:
      <input type="radio" name="sex"><input type="radio" name="sex">
      1. 多选框 :
      <input type="checkbox" name="hobby">吃饭
      <input type="checkbox" name="hobby">睡觉
      <input type="checkbox" name="hobby">敲代码
      
      1. 文本域:
      <textarea></textarea>
      
      1. 按钮:
      <button>按钮</button>
      
      1. 提交按钮:点击后跳转至表单中链接的地址
      <input type="submit" value="提交按钮">
      
      1. 表格:
      • 绘制表格线:表格具体内容外面用
        标签包围
      <table border="1" cellspacing="0"> ... </table>
      
      • 行:
      <tr>
      	<th>姓名</th>
      	<th>年龄</th>
      	<th>性别</th>
      </tr>
      
      • 列:
      <tr>
      	<td>李四</td>
      	<td>19</td>
      	<td></td>
      </tr>
      

      前端基础(一.HTML)_第1张图片

      以上为本萌新个人总结,如有不当之处望指正,有问题可以联系
      邮箱:[email protected]
      QQ:2635591841

      更于2021.1.26

      你可能感兴趣的:(前端学习,html,前端)