HTML随笔

标题：进阶HTML

无序列表type属性

点击查看代码 
<ul style="list-style-type:disc">
  <li>h5实心圆</li>
</ul>
<ul style="list-style-type:square">
  <li>h5实心正方形</li>
</ul>
<ul style="list-style-type:circle">
  <li>h5空心圆</li>
</ul>

无序列表的应用场景

  • 导航栏
  • 新闻列表

有序列表

点击查看代码 
<ol type="1" start="1">/*type表示所选类型，start表示从第几位开始*/
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<li>ee</li>
</ol>

自定义列表

点击查看代码 
<dl>
  <dt>选购指南</dt>
  <dd>手机</dd>
  <dd>电脑</dd>
  <dd>相机</dd>
</dl>

img图片

<img src="图片位置" alt="图片说明" width:宽; height:高;/>

a标签

blank表示在新页面打开

点击查看代码 
<a href="地址" target="blank">blank表示在新页面打开</a>
### 锚点 >

小米手机

> 跳转到小米手机
点击查看代码 
<h2 id="phone">小米手机</h2>
<a href="#phone">跳转到小米手机</a>

特殊链接

点击查看代码 
<a href="yasuo.zip">下载链接</a>
<a href="1585650112@qq.com">邮件地址</a>
<a href="tel:1503283193">手机号/打电话</a>

语义化标签

32
O2

点击查看代码 
<span>span没有任何显示效果</span>
<mark>高亮文本</mark>
<strong>加重语气，加粗</strong>
<sup>上标</sup>
<sub>下标</sub>
<pre>预格式化文本/对空行和    空格
进行控制</pre>
<figure>
独立的内容
<figcaption>对内容的说明/一般加在figure内，结尾或头部</figcaption>
</figure>

区块标签

点击查看代码 
<!-- header start -->
<header>
  <div>
    <h1>网页的logo</h1>
  </div>
  <nav>网页的导航栏</nav>
</header>
<!-- end header -->

<!-- main end start -->
<main>
  <aside>广告位</aside>
  <article>
    <section>商品信息1</section>
    <section>商品信息2</section>
  </article>
</main>
<!-- end main -->
<!-- footer start -->
<footer>网页底部</footer>
<!-- end footer -->

form表单

点击查看代码 
<form action="接口" method="post">
  <p> 用户名：<input type="text" placeholder="这里填写文本提示信息">
  </p>
  <p> 真实姓名：<input type="text" value="默认显示的值">
  </p>密码：<input type="password">
  <p>
  <!-- 单选框 name属性 -->
  <p><input type="radio" name="sex">男
     <input type="radio" name="sex">女
     <input type="radio" name="sex">保密
  </p>
  <!-- label标签自动对焦文本 checked默认选中 disabled适用于任意表单元素/禁用输入字段 -->
  <label><input type="radio" checked>宝宝巴士</label>
  <!-- select下拉列 ，option每个下拉的选项 -->
  <select>
    <option>--省份--</option>
    <option>河北省</option>
    <option>湖北省</option>
  </select>
  <!-- 多行文本框cols/列，rows/行，通俗理解宽和高 -->
  <textarea cols="80" rows="5"></textarea>

  <p><input type="button" value="按钮键"></p>
  <p><input type="submit" value="提交键"></p>
  <!-- html5 新增表单控件 -->
  <p>颜色选择：<input type="color"></p>
  <p>日期选择：<input type="date"></p>
  <p>时间选择：<input type="time"></p>
  <p>电子邮件：<input type="email"></p>
  <p>必填项：<input type="text" required></p>
  <p>数字最大值/最小值：<input type="number" min="5" max="10"></p>
  <p>拖拽条：<input type="range" min="1" max="100"></p>
  <p>搜索框：<input type="search"></p>
  <p>网址：<input type="url"></p>
  <p>日期和时间选择：<input type="datetime-local"></p>
  <p>年和周组成的日期：<input type="week"></p>
  <p>年月控件：<input type="month"></p>
  <p>上传文件：<input type="file"></p>
  <!-- datalist控件“筛选” -->
  <p>
    <input type="text" list="language-list"> 
    <datalist id="language-list">
      <option value="js">js</option>
      <option value="java">java</option>
      <option value="css">css</option>
      <option value="c++">c++</option>
      <option value="c#">c#</option>
      <option value="h5">h5</option>
    </datalist>
  </p>
</form>

table表格

计划表
计划1 计划2 计划3
起床 吃饭
学习 睡觉
点击查看代码 
<!-- rowspan 跨行 colspan 跨列 -->
<table `border="1" width="1000" height="300"`>
  <thead>
     //标题 
    <caption>计划表</caption>
  </thead> 
  <tbody>
    <tr>
      <th>计划1</th>
      <th>计划2</th>
      <th>计划3</th>
    </tr>
    <tr>
      <td rowspan="2">起床</td>
      <td colspan="2">吃饭</td>
    </tr>
    <tr>
      <td>学习</td>
      <td>睡觉</td>
    </tr>
  </tbody>
</table>
posted @ 2022-08-12 11:57  lzhhzlzlh  阅读(27)  评论(0)  编辑  收藏  举报