HTML+H5

HTML

1、html 基础标签

 <!-- 标题 h1-h6 h1的权重最高-->
    <h1>一级标签</h1>
    <!-- 段落标签 p   换行  br -->
    <p>我是一只小鸭子，<br>咿呀咿呀哟</p>

    <!--水平线 -->
    <hr>

    <!-- 加粗标签 -->
    <b>加粗标签</b>
    <strong>强调标签</strong> 

    <!-- 倾斜 -->
    <em>倾斜标签</em>
    <i>倾斜标签</i>

    <!-- 删除 -->
    <s>删除标签</s>
    <del>删除标签</del>

    <!-- 下划线 -->
    <u>下划线</u>

    <!-- 下标 -->
    <sub>下标</sub>
    <sup>上标</sup>

2、 属性

noshade 取消阴影
align 对齐方式

  <hr color="red">
    <hr color="green">
    <hr color="green" width="100px" ">
    <!-- align 靠那边 对齐方式  noshade  取消阴影 -->
    <hr color="green" align="right" width="100px">
    <hr color="green" align="left" width="100px" >
    <hr noshade>

3、特殊符号

  <!-- 大于号 -->
    &lt  
    空格  我&nbsp;是&emsp;大哥 <br>
    &copy;  版权符号 <br>
    商标  &trade;  &reg;
​````

## 4、div 和span
​```html
 <!-- div 用来划分 区域 -->
    <div>1112222222</div>
    <div>1111111111</div>
    <div>111111111</div>

    <!-- span 用来独立修饰-->
    <h3>体育<span style="color: brown;"> sport</span></h3>

5、列表

有序列表

  <!-- 有序列表 ol 里面只能有li标签
        li标签里面可以放任意标签

        ol type 类型，排序的序号
            start  从哪里开始 取值只能是数字
    -->
    <ol type="A" start="5">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ol>

无序列表

    <!-- 无序列表  ul>li*3-->

      <!-- 1、ul里面只能是li,li里面可以放其他标签
        2、默认是实心圆
        3、type 类型 disc 实心圆   circle 空心圆  square 黑矩形 none(取消序号) -->
   <ul type="none">
       <li>11</li>
       <li>22</li>
       <li>33</li>
   </ul>

自定义列表

 <!-- 自定义列表 dl>dt+dd -->
   <dl>
       <dt>我是图片</dt>
       <dd>我是文字</dd>
       <dd>我是文字</dd>
   </dl>

6、图片标签

  <!-- 
        同级目录
        1. 1.jpg
        2. ./1.jpg  ./ 表示当前路径   ../表示上一级路径

        绝对路径   带盘符的路径，在电脑上的真实路径

     -->
    <img src="./img/1.jpg" alt="">
    <img src="../image/1.jpg" alt="">


      <!-- 
        src 图片的路径
        title 图片的名称
        alt   图片错误的提示
     -->
     <img src="./img/.jpg" title="转型前端啦" alt="图片错误">

    <img src="./img/1.jpg" title="转型前端啦" alt="图片错误" width="200px" height="200px">
    <!-- 只设置宽，高会等比例缩放 -->
    <img src="./img/1.jpg" title="转型前端啦" alt="图片错误" width="200px" >

7、超链接

 <!-- 
        target属性:规定在何处打开窗口
           self 默认在当前窗口
           _blank：新建窗口

        title:鼠标悬停显示的内容
     -->
    <a href="./1.html"  title="鼠标悬停" target="_blank">去百度</a>

8、表格

  <!-- 
        table 创建表格
        tr 行
        td 单元格
    -->

    <!-- 
        table上的属性：
            border 外边框
            width  宽度
            百分比  相当于父元素的百分比
            align 对其方式  right lift  center

        bordercolor 外边框颜色
        bgcolor 背景颜色
        cellspacing="0"  单元格之间的缝隙宽度
        cellpadding ="0" 单元格与内容之间的间距
     -->
  <!--  table row
        tr 行属性

        valign="top或middle或bottom"  文字垂直对齐
        align 文字水平对齐 right left  center
        bgcolor 背景颜色
        height  高度
         tr 没有宽度
      -->
 <table width="300" height="300" border="1" align="center" bgcolor="red">
          <tr bgcolor="blue" height="100" align="center" valign="top">
              <td>22</td>
              <td>22</td>
          </tr>
          <tr>
              <td>22</td>
              <td>22</td>
          </tr>
</table>
    <!-- 
        table date 
        td属性
            如果给一个单元格设置宽度，影响的是这一行的宽度。高度也是影响这一行的高度。

       -->
<table width="300" height="300" border="1" align="center" bgcolor="red">
        <tr>
            <td width="100" height="100" bgcolor="red" align="right" valign="top">22</td>
            <td>22</td>
        </tr>
        <tr>
            <td>22</td>
            <td>22</td>
        </tr>
</table>


   <!--
         colspan 合并列 合并几格
         rowspan  合并行
        -->

9、表单

  <form action="" method="POST">
        用户信息：<input type="text" placehoder="请填写信息" name="message"> <br>
        密    码： <input type="password" placehoder="请填写密码" name="password"><br>
        <input type="submit" value="登录">
        <button>登录</button>
        <input type="reset" value="重新输入">
        <button type="reset">重置</button>
    </form>

单选框 radio

 属性为radio  name统一值就行  checked是默认选择
<div>
     水果<input type="radio" name="qqqq" id="" checked>
     香蕉<input type="radio" name="qqqq" id="" >
     苹果<input type="radio" name="qqqq" id="">
     梨<input type="radio" name="qqqq" id="">
     wahaha<input type="radio" name="qqqq" id="">
</div>
<div>
    <div>
        <!--点击字也可以勾选 lable  for="绑定元素的id值" 可以绑定值 -->
        <input type="radio" name="bbb" id="man">
        <label for="man">男</label>
    </div>
    <div>
        <input type="radio" name="bbb" id="woman">
        <label for="woman">女</label>
    </div>
</div>

复选框 checkbox

 <div>
     水果<input type="checkbox" name="aaa" id="" checked>
     香蕉<input type="checkbox" name="aaa" id="">
     苹果<input type="checkbox" name="aaa" id="">
     梨<input type="checkbox" name="aaa" id="">
     wahaha<input type="checkbox" name="aaa" id="">
</div>


<div>
    <input type="checkbox" name="aaa" id="dd" checked>
    <label for="dd">水果</label>
    香蕉<input type="checkbox" name="aaa" id="">

</div>

文件上传

上传功能：
<input type="file">

图片按钮 用图片代替按钮
<input type="image" src="">

隐藏按钮
<input type="hidden">


禁用disabled     只读readonly

<button disabled>提交</button>
不满意<input type="radio" disabled>
<input type="text" readonly value="dddddddd">

下拉菜单

<!-- 
size  显示几个选项
mutiple 多选

value  提供给后端的值
selected  默认选中

-->
<div>
    <select name="" id="" size="2" multiple>
        <option value="赵云" selected>赵云</option>
        <option value="张飞">张飞</option>
        <option value="刘备">刘备</option>
        <option value="关羽">关羽</option>
        <option value="曹操">曹操</option>
    </select>
</div>

文本域

<style>
    textarea{
        /* 重新设置大小 vertical垂直 horizontal水平  both  都不行 */
        resize: vertical;
    }
</style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10" placeholder="请输入你的意见">提前设置的值 </textarea>
</body>

字段集

<fieldset>
    <legend>性别</legend>
    <input type="radio">
    <input type="radio">
    <input type="radio">
    <input type="radio">
</fieldset>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-thOZwJBf-1648258483001)(html.assets/image-20211231100956562.png)]

10、H5

语义化标签

 <header>网页头部</header>
    <section>
        <!-- 导航栏 -->
        <nav></nav>
        <!-- 主体 -->
        <main>
            <article class="article1">
                <header>header</header>
                <footer></footer>
            </article>
            <article class="article2">
                <header>header</header>
                <footer></footer>
            </article>
        </main>
        <!-- 侧边栏 -->
        <aside>
            <figure>aside</figure>
        </aside>
    </section>

    <footer>网页的尾部</footer>

音频标签

<h1>音频</h1>
<!--  
controls 控制
loop 循环
autoplay 自动播放
muted 静音
-->
<audio src="./jiejie.wav" controls loop></audio>

视频标签

  <!--  
        controls 控制
        loop 循环
        autoplay 自动播放
        muted 静音
        poster="../3.视频标签/poster.jpg"  海报
    -->
    <video src="./movie.mp4" controls poster="./poster.jpg"></video>

表单增强

<h1>增强的属性</h1>
<div>

    <!-- 
autofocus 获取焦点 
required 必填
multiple 支持多个地址，用逗号隔开
pattern 正则表达式
-->
    用户名 <input type="email" autofocus required  multiple pattern="[0-9][A-Z]{3}}">
</div>