黑马课程基础前端篇html.个人笔记

发布于:2022-10-23 ⋅ 阅读:(444) ⋅ 点赞:(0)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>html</title>

</head>

<body>

<!-- 1.文字标签 -->

    <!-- <h1>标题</h1>  标题标签h1-h7  双标签-->

    <!-- <hr> 水平分割线  单标签-->

    <!-- <P>我是</P> 段落标签独占一行 双标签 -->

    <!-- <br> 换行标签   单标签-->

<!--

    <b>加粗</b>

    <strong>加粗</strong>

    <u>下划线</u>

    <ins>下划线</ins>

    <i>倾斜线</i>

    <em>倾斜线</em>

    <s>删除线</s>

    <del>删除线</del>

     项目开发中,重要的就用strong,ines等标签表示

-->



 

<!-- 2.媒体标签 -->

 <!-- 2.1图片标签 -->

    <!-- <img src="图片的路径" alt="图片不显示的时候显示的文字"

    title="这是鼠标悬停的时候显示的文字 不仅仅只用于图片,还可以用再其他标签"

    width="宽,单写一个也不会变形,会等比例缩放。工作中宽高两个只要写一个," height="高度, 双写设置不当会变形">   -->

 <!-- 2.2路径 -->

    <!-- 绝对路径(了解):1.指盘符开头,D:\DAY\...  \  2.完整的的网咯地址:https://123/ -->

    <!-- 相对路径 都在同一个一个目录里面 ./(当前目录)  下级目录 ../退出当前回到上级  /下一级    -->

 <!-- 2.3音频标签 -->

     <!-- <audio src="音频文件位置"  controls(音频控件) autoplay(自动播放) loop(循环播放)  目前支持:mp3,wav.ogg></audio> -->

 <!-- 2.4视频标签 -->

    <!-- <video src="音频文件位置"  controls(音频控件) autoplay(自动播放,谷歌浏览器要配合muted实现静音播放) loop(循环播放) 目前支持:mp4,webm.ogg></video> -->

 <!-- 2.5链接标签 -->

    <!-- <a href="链接路径 可写#空链接" target="_blank(新窗口,保留默认) _self(当前窗口覆盖原网页) 目标网页打开形式">链接文字</a> -->



 

<!-- 3.列表标签-->

    <!--3.1无序标签  -->

    <!-- <ul>只能包含li

        <li>可以包含任意标签</li>

    </ul> -->

    <!-- 3.2有序标签 -->

    <!-- <ol>只能包含li

        <li>可以包含任意标签</li>

    </ol> -->

    <!-- 3.3自定义标签 -->

        <!-- <dl>只可以包含dt/dd

            <dt>第一行 可放很多</dt>

            <dd>行下内容 可放很多</dd>

            <dd>行下内容</dd>

        </dl> -->



 

<!-- 4.表格标签 -->

    <!-- border边距 -->

    <!-- <table border="1">

        <caption>表格标题</caption> -->

        <!-- 表头 -->

        <!-- <thead>

            <tr>

                <th>1表头</th>

                <th>2表头</th>

                <th>3表头</th>

            </tr>

        </thead> -->

       

        <!-- 表格主体 -->

        <!-- <tbody>

            <tr>

                <td rowspan="2"跨行,保留最上>1行内容</td>

                <td>1行内容</td>

                <td>1行内容</td>

            </tr>

            <tr>

                <td>2行内容</td>

                <td>2行内容</td>

                <td>2行内容</td>

                <tr>

                    <td>3行内容</td>

                    <td>3行内容</td>

                    <td>3行内容</td>

                </tr>

       

            </tr>

        </tbody> -->

        <!-- 表格底部  只有同一个标签里面才能合并,不能跨结构(thead, tbody, tfoot)合并 -->

        <!-- <tfoot>

            <tr>

                <td colspan="3"跨列,保留最左>4行内容</td>

                <td>4行内容</td>

                <td>4行内容</td>

            </tr>

        </tfoot>

         -->

    <!-- </table> -->


 

<!--5.表单标签 单标签 -->

    <!-- 5.1input按钮  -->

        <!-- 文本框:<input type="text" placeholder="占位符,提示用户输入的字">

        <br>

        密码框:<input type="password">

        <br>

        单选框:<input type="radio" name="one">选项一 <input type="radio" name="one">选项二

        <br>

        多选框:<input type="checkbox">选项一 <input type="checkbox">选项二 <input type="checkbox">选项三

        <br>

        上传文件:<input type="file" multiple>(multiple 上传多个文件)

        <br>

        提交按钮:<input type="submit" value="提交按钮">submit提交按钮,将数据给后端服务器

        重置按钮:<input type="reset">

        <input type="button" value="普通按钮">

     -->

    <!-- 5.2button按钮 双标签-->

        <!-- <button type="submit">提交按钮</button>

        <button type="reset">重置按钮</button>

        <button type="button">普通按钮,没有任何功能</button> -->

    <!-- 5.3select下拉菜单标签  selected默认选中-->

        <!-- <select>

            <option>北京</option>

            <option>上海</option>

            <option>南昌</option>

            <option selected>深圳</option>

        </select> -->

   

    <!-- 5.4textarea文本域标签  用来写评语-->

        <!-- <textarea cols="30" rows="10"></textarea> -->

    <!-- 5.5 label标签  让点击文字就可以选中-->

       <!-- <label>单选框:<input type="radio" name="one">选项一  </label>

       <label><input type="radio" name="one">选项二</label> -->


 

<!-- 6.语义化标签 -->

    <!-- 没有语义得标签div span -->

        <!-- <div>11</div>  独占一行标签 -->

        <!-- <span>222</span>  可以在一行标签 -->

    <!-- HTML5手机端标签 都是独占一行-->

    <!-- <header>网页头部</header>

    <nav>网页导航</nav>

    <footer>网页底部</footer>

    <aside>网页侧边栏</aside>

    <section>网页区块</section>

    <article>网页文章</article> -->


 

<!-- 7.字符实体  结构:&英文; -->

     <!-- 空格 &nbsp; 空格 -->


 

<!-- 1.综合案例 优秀学生表格 -->

<!--

<table border="1" width="500" height="300">

    <caption><h3>优秀学生表格</h3></caption>

    <header>

        <tr>

            <th>年级</th>

            <th>姓名</th>

            <th>学号</th>

            <th>班级</th>

        </tr>

    </header>

    <tbody>

        <tr>

            <td rowspan="2">高三</td>

            <td>张三</td>

            <td>110</td>

            <td>三年级二班</td>

        </tr>

        <tr>

            <td>赵四</td>

            <td>120</td>

            <td>三年级三班</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td>评语</td>

            <td colspan="3">你们都优秀</td>

        </tr>

    </tfoot>

</table> -->

<!-- 2.综合案例.表单 -->

<h1>青春不在,好好读书</h1>

<hr>

<form action="">

    昵称:<input type="text" value="请输入昵称">

    <br>

    <br>

    性别:<label><input type="radio" name="sex">男</label> <label><input type="radio" name="sex">女</label>

    <br>

    <br>

    所在城市: <select>

                 <option>上海</option>

                 <option>南昌</option>

                 <option selected>深圳</option>

             </select>

    <br>

    <br>

    喜欢的课程:<label><input type="checkbox">java</label>

               <label><input type="checkbox">go</label>

               <label><input type="checkbox">c</label>

    <br>

    <br>

    个人介绍:<br>

    <textarea  cols="60" rows="10"></textarea>

    <br>

    <br>

    <h3>我承诺</h3>

    <ul>

        <li>好好学习</li>

        <li>天天向上</li>

        <li>认真努力</li>

    </ul>

    <br>

    <br>

    <input type="submit" value="免费注册">

    <button type="reset">重置</button>

   

</form>

</body>

</html>