前端___基础 1 待改

Posted yanhui1995

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端___基础 1 待改相关的知识,希望对你有一定的参考价值。


以下是各种前端直接应用的代码:
##########################################################################

1. 页面:

<!-- DOCTYPE不区分大小写 规定文档类型 html代表的事该文件采用的h5  -->
<!-- 标签 有<>包裹,由字母开头 可以结合合法字符,能被浏览器解析的标记 -->
<!-- 为什么使用标签,标签具有作用于 (名称空间 控制范围),可以赋予功能 -->

<!DOCTYPE html>
<!-- <!>  = >指令-->
<html lang="zh" style="color: orange">
<!-- 标签 字母开头+合法字符(数字|-)标签具有作用域 有头必有尾 -->
<!-- html中只包含head和body两个 -->
<!-- 一个页面文件就是一个html,有且仅有一个html根标签(页面根) -->
<head>
   <!-- 页面文件头|样式表|脚本|页面描述|(后勤工作) -->
   <!-- 也可以出现样式|脚本 -->
   <meta charset="UTF-8">
   <!-- meta 设置文件编码格式 -->
   <title>Document</title>
   <!-- title页面标签的标题 -->
</head>
<!-- 通过使用标签改变字体颜色 -->
<body style="color: red">
egon &nbsp;&nbsp;&nbsp;
<!-- &nbsp;空格的转译符号 -->
<你好>
<!-- <>解析中文 转译字符 包裹特殊字符 -->
liuxx
&lt;Zero &gt;
<!-- 可以解析英文 -->
yanghuhu


</body>
</html>


基本标签的简单分类:
    最基本:
        div => 搭页面构架
        span => 搭文本构架

    换行显示:
        h1-h6 => 标题,h1 有且仅有一个,通常作为页面的总标题
        p => 段落

    同行显示:
    文本类标签:
        i,em = 斜体
        b,strong => 加粗
        del(删除模式显示) | ins(插入) | sup(上角标) | sub(下角标)

    组合:
        table > tr > th+td
        form > input

    功能:
        img 图片 | a 超链接 | hr 分割线 | br 换行




2.基本标签
<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>基本标签</title>
   </head>
   <body>
      <!--无意义标签-->
      <!--div:最常用的标签,没有之一(搭建页面架构)-->
      <div></div>
      <!-- span:文本最常用的标签(构建文本架构;可以直接包裹文本,也可以直接包裹文本类(内联类型的)标签)-->
      <span></span>
      <!--h1 一般一个页面会出现一次 作为该页面的总标题 h1~h6标题-->
      <h1>{一级标题}</h1>
      <!--h2{二级标签}+h6{六级标签}-->
      <h2>二级标签</h2>
      普通文本
      <h6>六级标签</h6>

      <!--段落标签 :p-->
      <p>段落段落段落段落段落段落段落</p>
      <p>段落段落段落段落段落段落段落段落段落</p>

      <!--原生标签 :pre-->
      <pre>

         呵    <asd> & ;  < asd>   呵
      </pre>

      <!--分割线 hr-->
      <hr/>
      <!-- 换行 br-->
      <br/>
      <br/>
      <br/>
      <!--文本类标签 -->

      <!--斜体 -->
      <i>斜体</i>
      <!--斜体强调 -->
      <em>斜体强调</em>
      <!--加粗 -->
      <b>加粗</b>
      <strong>加粗强调</strong>
      <!--小的文本类型标签是同行显示 级别标签是换行显示 -->
      <ruby>
         拼音<rt>pinyin</rt>
      </ruby>
      <!--ruby 和 rt 需要配合使用的 -->
      <ins></ins>插入文本
      <!--span 作为文本架构 删除样式的文本再由文本类标签 del嵌套 -->
      <span>$1000<del>$2300</del></span>
      <span>文本<sup>上角标</sup></span>
      <span>文本<sub>下角标</sub></span>

      <!--连接标签 -->
      <!--href:标签的全局属性,超链接 规定协议 无需展示给用户看-->
      <!--不规定协议直接原网页路径拼接 -->
      <a href="https://www.baidu.com"target="_blank">前往百度</a>
      <!--https 和http都可以访问https更安全 -->
      <!-- _blank再原网页上展开新网页 -->

      <!-- img图片标签 src:图片地址,可以加载网络|本地|动态|图片。。
       alt:资源加载失败后的文本提示
       title:全局显示的(说明)鼠标悬浮产生的文本提示(任意标签都具有该全局属性)-->
      <img src="http://pic-cdn.35pic.com/58pic/18/24/26/64Y58PICxnf_1024.jpg" alt="科技" title="新科技">

      <!--表格 -->
      <!--连接标签 -->
      <table>
         <tr>
            <th>
               标题
            </th>
            <th>
               标题2
            </th>
         </tr>
         <tr>
            <td>单元格</td>
            <td>单元格</td>

         </tr>
      </table>
      <!-- 级别: table > tr > th+td -->

      <!-- 获取用户输入 -->
      <form>
         <input type="text">
         <input type="password">
      </form>

   </body>
</html>


3. 标签的分类:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <!--系统标签|自定义标签:系统没有满足标签语法的所有标签-->
   <zero title="xxx" style="color: red">zero</zero>
   <!--、行块标签(display) -->
   <!-- 行:同行显示 块:换行显示 -->
   <p>测试1</p>
   <p>测试2</p>
   <!-- 行:同行显示 -->
   <span>测试3</span>
   <span>测试4</span>

   <!-- 但结构|组合结构 -->
   <div>单结构</div>
   <!-- 被form包裹的input内容可以提交给后台,单独使用的则只能用于前端 -->
   <form action="">
      <input type="text">
   </form>
   <input type="text">

   <!-- 单双标签 -->
   <!-- 双: 首尾分离 -->
   <!-- 主要内容可以包含文本,也可以包含子标签(具有作用域) -->
   <div>单结构</div>
   <span></span>

   <!-- 单:首尾连体 -->
   <!-- 主要功能 :不需要子内容,标签就可以代表所有功能语句-->
   <hr/>
   <br/>
   <!-- input的内容 value:默认值 可以修改;placeholder:占位符-->
   <input type="text" value="abcdfg" placeholder="请输入">

</body>
</html>

 











































































































































































































以上是关于前端___基础 1 待改的主要内容,如果未能解决你的问题,请参考以下文章

python学习_day59_前端基础之jQuery入门2

python学习_day55_前端基础之JS

python学习_day54_前端基础之js

前端基础之JavaScript_1

python学习_day60_前端基础之jQuery入门3

前端基础 个人笔记