HTML极速学习版

最新推荐文章于 2023-05-17 19:00:57 发布

A_是泽瑜呀

最新推荐文章于 2023-05-17 19:00:57 发布

阅读量199

点赞数

分类专栏：前端文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_47465067/article/details/107671671

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

产品体系——从前端到后台再到驱动的硬件设备 HTML_标签，Axure_元件
超文本标记语言—— 类似于快递上的地址，快递公司根据不同的地址发送目的地

1.HUTML开发环境的搭建

①记事本/sublime/vscode/——编辑
②火狐/谷歌——编译和运行（测试兼容环境）
③服务器http——软件（Apache）
④B/S架构（浏览器/服务器模式) C/S 客户端/服务器模式
⑤ http协议——域名
⑥URL——网址

2.HTML文档结构

①英文！回车
②HTML4
   <html></html> 根标签 只能出现一次，只有两个子元素<head></head>和<body></body>
   <head></head>里面常写的五个：<meta><title><style>为成对标签<link/>为单独标签 <script></script>不区分大小写
   <body>//浏览器的可视区域
       乱码原因:字符集没有设置或者没有统一
       方法： 1.编辑软件的字符集设置 vscode-右下角
                   2.代码进行字符集设置:meta
                       <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
                   3.浏览器的字符集设置：菜单栏找文字编码(客户自己设置)
                      火狐：查看->文字编码->Unicode
    </body>
    <title>网页的头部名称</title>

3.HTML元素

 ①镜面嵌套关系： <p>段落<strong>加粗</strong>段落</p> :p标签为段落标签，有兴起一行的效果
 不推荐这样交差嵌套：    <p>段<strong>落</p></strong>        原因：解析时间变长，语法不规范 
 ②元素/标签：
    标签名称：不区分大小写
    成对出现的：开始标签 内容  结束标签
    单标签：空元素 <meta> <br>  <br /> <img />
    属性：开始标签，由属性名称key、值value
            块级元素：<p>段落，这是块级元素</p>
                  p：段落 margin-top/margin-bottom
                 div*:宽度100%
                 h1~h6
                 ul、ol
                 table
                 作用：主要用于结构的布局
                 独立占用一整行，宽度100%，高度由内容填充决定
            行内元素：<span>行内元素</span>
                              <span>主要给CSS使用</span><strong>加粗文字很多文字</strong>
                span    img    a
                作用：主要用于内容的填充
                共享同一行，宽度、高度都是由内容决定
           嵌套关系：
                块级可以嵌套行内元素：<p>段落<span>块级嵌套行内</span>段落</p>
                不推荐行内嵌套块级：<span>行内<p>不推荐嵌套块级</p>元素</span>
                行内元素可以嵌套行内元素：<span>这是行内<strong>元</strong>素</span>
                块级元素视情况嵌套块级元素：<p>段落<p>段落</p>段落</p>
                                                               <div>容器1<div>容器2</div>容器1结束</div>

4.HTML属性

    ①大多数都有：<p id="p1" class="duan" style="color:red"  title="这是段落">很多文字很多文字</p>
         id 唯一标识 id="n1" 不能重复，不能以数字开头
         class 一类标识
         style="CSS语法区分大小写" style="color:red"
         title属性：元素的名称  title="段落"
         
     ②自己特有的
         (1)img图片元素：src图片的地址、alt文字显示/当图片加载不成功，加载文字、width、height
                  不展示，没有效果：    <img >       <img />       <img src="" >
                  有效果：          <img src="xxx">     <img src="xxx" alt="加载失败"><!--加载不成功，会显示文字-->
                                           <img src="xxx" alt="这是一朵花">
                 Src地址值：三种写法
                    ①本地绝对地址值/从根目录：
                               <img src="/Users/winnie/Desktop/web2003/1-2-HTML5/day01/code/images/1.jpg">
                    ②本地相对路径/找准参考系：        .当前目录           ..上一级
                                <img src="images/1.jpg" width="50px" height="50px">
                                <img src="2.jpg" width="50" height="50">
                                <img src="./images/1.jpg">
                                <img src="./2.jpg">
                                <img src="../3.jpg">
                     ③网络路径：
                                <img src="http://weibo/xxx/1.png">
                                <img src="http://192.168.3.12:8080/xx/1.gif">
        
        (2) a 超链接:  href文件的地址、target：_self当前标签页打开     _blank新打开标签页     _parent   _top内联框架
                    没有效果:       <a>文字</a>
                    有效果：        <a href="">文字</a> 点击会刷新     
                                          <a href="./1-hello.html">1-hello.html</a>  相对路径
                                          <a href="http://www.briup.com" target="_self">杰普官网</a>
                                          <a href="xxx"  target="_blank">新开一页</a>
                    <a href="">点击会刷新</a>
                    <a href="#">点击只刷新一次</a>
                    跳转到本页面的指定地方：锚点
                            href="#id"
                           <div id="head">头部</div>
                           <div style="height: 1200px;">内容</div>
                            底部：
                           <a href="#head">返回顶部</a>
                    图片具有超链接效果：
                            <a href="#head"><img src="2.jpg" width="40" height="40"></a>
                            <a href="gooddetal.html"><img src="2.jpg" width="40" height="40"></a>
                    发邮件：
                             <a href="mailto:2455@qq.com">给张三写一封信</a>
      ③自定义
           <li data-name="菜单"></li>
           <span data-url="http://www.briup.com"></span>
          js获得 $span.data.url

5.HTML语法

      ①空格 &nbsp;          <   &lt;        >   &gt;          "   &quot;           '   &abos;          &   &amp;
      ② <h1>HTML的设计原理</h1>
          <h2>作者介绍</h2>
          <h3>三级目录</h3>
          <h4>四级</h4>
          <h5>五级</h5>
          <h6>六级</h6>
             <p title="段落&quot;段&apos;落">
                   &nbsp;&nbsp;&nbsp;&nbsp;这是系统描述情况，这是
                   <p>  &lt;p&gt;
                    展示&amp;
                    &amp;amp;
                    单引号'或者引号"
                    <!-- 注释 -->
            </p>

6.HTML表格table

    1.      块级元素    list:margin/padding/list-type
               <ul>     unorder list无序列表  type="square"、type="circle"
                      <li>菜单一</li>
                      <li>菜单一</li>
                      <li>菜单一</li>
               </ul>
               <ol>     order list有序列表  type="I"、type="A"
                       <li>菜单一</li>
                       <li>菜单一</li>
                       <li>菜单一</li>
               </ol>
            
   2.table:块级元素  
           <caption>标题</caption>
           <table border="10" cellspacing="10" cellpadding="10" align="center">
           border边框      cellspacing：单元格与单元格之间的间隙   cellpadding：单元格与内容.字之间的间隙    
           align对齐：内容居中   可以写在table上，tr上，th上。
           colspan列合并   rowspan行合并
           
      thead / tbody / caption / tr:占据一整行
      td/th:共享一行
        1.注意层级结构 ——孙子辈 tr
        2.数据展示
        3.一定不要用于布局结构，推荐使用DIV+CSS

第一章结束

第二章：表单

     GET ：显示的，有大小限制的（小）          浏览器的地址栏，超链接     
     POST：隐式的，有大小限制的（大）         表单
     FORM
     form开始和结束标签——里面的数据就是要提交的数据
     单标签：input        块级元素：form         行内元素：input
     <form action="./jd/index.jsp" method="post" enctype="application/x-www-form-urlencoded">
           文本框： <input name="username" type="text" /><br>
           密码框： <input name="pwd" type="password" /><br>
           提交按钮：<!--<button>按钮</button>-->
                             <input type="submit" value="登录">
           重置按钮：<input type="reset" value="清空">
     </form>

       value的使用：
        如果是用户填写，不需要写value属性
        如果想要有默认值、控件是选择的没有填写的地方，就需要写value属性
           input type="file": method="post" enctype="multipart/form-data"
    
    _input控件：单选框、多选框、textarea_自我介绍、placeholder_价格、iframe_内联
       checked:默认被选中
       disabled：灰色，并且不能提交
       readonly:正常，但不能填写，可以提交，只可读

第三章 html5表单

     进度条progress_max、value:<progress value="0.6" max="1"></progress>60%
     拉动条output_name、for
     有颜色的进度条meter_value、min、max、low、high、optimum
      地址/标签库：datalist-input 
      Google浏览器打开：type_date、datetime-local、time、month/week
 
     新增表单属性FORM：
       提交按钮formaction、提交按钮foemenctype、提交按钮formmethod、验证formnovalidate、当前响应formtarget
       加载聚焦autofocus、list、max、min、placeholder、pattern、required