美文网首页
HTLM部分

HTLM部分

作者: 冬至是条狗 | 来源:发表于2018-12-20 05:20 被阅读0次
    • 标签 <标签名> :标记语言(HTML, XML)
    1. HTML文件的结构
      1.1在开头用<!DOCTYPE html>来声明 HTML5
      1.2所有内容包含在<HTML></HTML>标签中
      1.3在html标签中先有<head></head>标签
      1.4要显示的内容写在<body></body>标签
      1.5注释一般在一段代码的开始和结束都要加
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <mate charset="utf-8">  # 中文要设置此项
      <title>要显示的内容</title>
    </head>
      <body>
      </body>
    </html>
    
    • <style></style> 定义内部样式表
    • <script></script> 定义JS代码或引入外部JS文件
    • <link/> 引入外部样式表文件
    • <meta/> 定义网页原信息,可以定义关键字
    <meta name = "keywords" content="meta 总结"> # 关键字 百度爬虫
    <meta name = "description" content = "要描述的内容">  # 描述
    <meta http-equiv = "refresh" content = "2;URL= http://xxxxx"> # 两秒之后跳转
    <meta http-equiv = "x-ua-compatible" content = "IE=edge"> # 告诉IE已最高模式渲染
    

    • 其他标签

    用 = 复制的是属性, 任何标签都有三个固定属性, id,class,style

    1. <h1></h1> -- <h6></h6> 标题标签
    2. <img scr = "路径" alt = "没有图片时的提示信息" title = "鼠标悬停时的提示"> 图片标签
    3. <a herf = "要跳转的地方" target = "_blank">要显示的内容</a> # target="_blank" 可以从新标签页打开,默认为当前页打开。可以设置跳转连接,其他网页或者当前页面设置的其他标签。
    4. <b></b> 加粗标签
    5. <i></i> 斜体标签
    6. <u></u> 下划线
    7. <s></s> 删除线
    8. <p></p> 段落标签
    9. <br /> 换行标签
    10. <hr /> 水平线
    11. <div></div> 单独显示,不在一行
    12. <span></span> 多个span在一行显示
    13. 列表标签
      13.1 无序列表, type属性 disc 实心圆点,circle 空心圆,square 实心方块,none 无样式
      <ul>
          <li>列表 </li>
      </ul>
    

    13.2 有序列表,type属性控制序号 1、A、a、I,start 起始值

    <ol type = "I", start = "3">
        <li>列表</li>
    </ol>
    

    13.3 标题列表,

    <dl>
        <dt>标题</dt>
        <dd>内容</dd>
    <dl>
    
    1. 表格 broder 边框像素, cellpadding 内边距,cellspacing 外边距,width 像素百分比, rowspan 单元格列合并,colspan 行合并。
    <table>
      <thead> # 表格标题
        <tr> # 表格一行
          <th>姓名</th> # 表格一列
          <th>年龄</th>
          <th>爱好</th>
        </tr>
      </thead>
      <tbody> # 表体
        <tr>
           <th>小强</th>
           <th>29</th>
           <th>干啥</th>
        </tr>
      </tbody>
    </table>
    

    • 标签分类
    1. 块儿级标签,独占一行
      默认占浏览器的宽度,能设置长和宽
    2. 内联标签(行内标签)
      根据内容决定长度,不能设置长和宽

    • 标签嵌套规则
    1. 行内标签不能嵌到块级标签
    2. p标签不能嵌套块级标签

    • 常用特殊符号
    &lt; # 小于号
    &gt; # 大于号
    &copy; # 版权符号
    &nbsp; # 空格
    &amp; # &符号
    &yen; # 人民币符号
    &reg; # 注册符号 
    

    • form 表单相关内容

    前后端有数据交互的时候用form表单

    1. 所有提交的数据在表单中
    2. form 中的 action= 对应到后端要提交的地址, method 对应请求方式get post。有文件上传时需要post方式,并且修改属性enctype="multipart/from-data"。disabled 禁用
    3. 使用键值对形式提交,标签外是提示性文本可以用中文,标签内用英文为宜
    4. input\select\textarea 都需要有name属性,为后端的键,标签外是提示信息
    5. 必须有提交按钮
    • input 常用tpye属性:
    1. text 文本
      1.1 value 设置默认值
      1.2 readonly 设置只读
    2. password 密码
    3. radio 单选
    4. checkbox 多选
    5. date 日期
    6. datetime 时间
    7. file 文件
    8. button 普通按钮,多用js绑定事件
    9. reset 重置
    10. submit 提交
    11. textarea 大段文本
    12. select 下拉菜单
      12.1 option 具体的下拉选项
      12.2 optgroup 分组的下拉选项
      12.3 multiple 可以多选的下拉框
      12.4 selected 默认选项
    13. email 邮箱
    14. hidden 隐藏标签
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset = "utf-8">
      <title>form 表单</title>
    </head>
      <form action=""> # form 配合input标签使用 input需要有name 以便后端取值, value 为提交时所带的值
      <p>  # 使用p标签单独起一行
        <input name = “username ”type="text"> #  type = “text” 出现输入框 ,name 为后端取数据的键
      </p>
      <p>  # 使用p标签单独起一行
        <input type="password"> #  type = “password” 出现密码输入框
      </p>
     <p>性别:  # 使用p标签单独起一行
       <input name = “gender” type="radio" value = "1"> 男 #  type = “radio” 选择按钮 
       <input name = “gender” type="radio" value = "0"> 女 #  type = “radio” 选择按钮
     </p>
     <p>  爱好:
       <input  name="hobby" type="checkbox" value="hobby1"> 爱好1 #  type = “checkbox” 选择按钮 
       <input  name="hobby" type="checkbox" value="hobby2"> 爱好2 #  type = “checkbox” 选择按钮
       <input  name="hobby" type="checkbox" value="hobby3"> 爱好3 #  type = “checkbox” 选择按钮 ,这里为一组
    </p>
    <p>  来自哪里:
       <select  name="" id=""> # 选择菜单
        <optgroup label = "北京"> # 一级菜单
         <option value="">朝阳</option> # 二级菜单
         <option value="">顺义</option>
         <option value="">昌平</option>
        </optgroup>
       
        <option value="">上海</option>
        <option value="">山东</option>
      </select>
    </p>
    <p>
      <textarea name = "info" id="" cols="" rows=""> # 大文本区域
      </textarea>
    </p>
       <p>
          <input type="file"> #上传文件的标签
      </p>
    <p>生日:
    <input name = "birthday" type ="data">
    </p>
      <input type= "submit" value = “提交”> # type = "submit" 出现提交按钮 ,value 控制按钮名字
      <input type = "reset" value="reset"> # 重置按钮
      <input type="button" value="button"> # 普通按钮
    <body>
    <\body>
    

    相关文章

      网友评论

          本文标题:HTLM部分

          本文链接:https://www.haomeiwen.com/subject/dralkqtx.html