复习 HTML基础


下面部分代码可以使用于写博客内容,具体代码在最后

Demo01 b标签:加粗
strong标签:加粗
看我的 下标 上标
sub:删除线
斜体标签:i ------ 斜体标签:em
下面是分割线标签:hr
        这个里面的文字可以按照自己的排版方式显示出来
        就好比这样,下一行会缩进两个空格
          这是 pre标签
啦啦啦
    

这是锚点,焦点会跳转的指定的 id 的位置
设置 target 属性,在新的页面打开百度
无序列表
  • 小印01
  • 小印02
  • 小印03

有序列表

  1. 小印01
  2. 小印02
  3. 小印03
  4. 小印04
  5. 小印05

tr:表格行 ---- td:表格列
属性:colspan【向右合并同一行的】、rowspan【向下合并同一列】
小印01、小印02 小印03 小印04 小印05
小印01 小印02 小印03 小印04 小印05 * 2
小印01 小印02 小印03 小印04

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo01</title>
</head>
<body>
    <b id="0001">b标签:加粗</b>
    <br>
    <strong>strong标签:加粗</strong>
    <br>
    看我的<sub>下标</sub><sup>上标</sup>
    <br>
    <s>sub:删除线</s>
    <br>
    <i>斜体标签:i</i> ------ <em>斜体标签:em</em>
    <br>
    下面是分割线标签:hr
    <hr>
    <pre>
        这个里面的文字可以按照自己的排班方式显示出来
        就好比这样,下一行会进去两个空格
          这是 pre标签
啦啦啦
    </pre>
    <hr>
    <a href="#0002">这是锚点,焦点会跳转的指定的 id 的位置</a>
    <br>
    <a href="https://www.baidu.com" target="_bank">设置 target 属性,在新的页面打开百度</a>
    <hr>
    <img src="图片地址" alt="我是图片失效后代替的文字">
    <hr>
    无序列表列表标记默认形状
    <ul>
        <li>小印01</li>
        <li>小印02</li>
        <li>小印03</li>
    </ul>
    无序列表 type="circle" 列表标记是空心圆
    <ul type="circle">
        <li>小印01</li>
        <li>小印02</li>
        <li>小印03</li>
    </ul>
    无序列表 type="disk" 列表标记是实芯圆【与默认相同】
    <ul type="disk">
        <li>小印01</li>
        <li>小印02</li>
        <li>小印03</li>
    </ul>
    无序列表 type="square" 列表标记是实芯方形
    <ul type="square">
        <li>小印01</li>
        <li>小印02</li>
        <li>小印03</li>
    </ul>
<hr>
有序列表列表标记默认
<ol>
    <li>小印01</li>
    <li>小印02</li>
    <li>小印03</li>
    <li>小印04</li>
    <li>小印05</li>
</ol>
有序列表 type="1" 列表标记
<ol type="1">
    <li>小印01</li>
    <li>小印02</li>
    <li>小印03</li>
    <li>小印04</li>
    <li>小印05</li>
</ol>
有序列表 type="i" 列表标记
<ol type="i">
    <li>小印01</li>
    <li>小印02</li>
    <li>小印03</li>
    <li>小印04</li>
    <li>小印05</li>
</ol>
有序列表 type="I" 列表标记
<ol type="I">
    <li>小印01</li>
    <li>小印02</li>
    <li>小印03</li>
    <li>小印04</li>
    <li>小印05</li>
</ol>
有序列表 type="a" 列表标记
<ol type="a">
    <li>小印01</li>
    <li>小印02</li>
    <li>小印03</li>
    <li>小印04</li>
    <li>小印05</li>
</ol>
有序列表 type="A" 列表标记
<ol type="A">
    <li>小印01</li>
    <li>小印02</li>
    <li>小印03</li>
    <li>小印04</li>
    <li>小印05</li>
</ol>
<hr>
自定义列表可以设置标题,对数据进行描述,dl是定义自定义列表的标签,dt可以设置标题,dd是具体的列表项
<dl id="0002">
    <dt>列表标题01</dt>
    <dd>小印01</dd>
    <dd>小印02</dd>
    <dd>小印03</dd>
    <dd>小印04</dd>
    <dd>小印05</dd>
    <dt>列表标题02</dt>
    <dd>小印01</dd>
    <dd>小印02</dd>
    <dd>小印03</dd>
    <dd>小印04</dd>
    <dd>小印05</dd>
    <dt>列表标题03</dt>
    <dd>小印01</dd>
    <dd>小印02</dd>
    <dd>小印03</dd>
    <dd>小印04</dd>
    <dd>小印05</dd>
</dl>
<hr>
tr:表格行 ---- td:表格列<br>
属性:colspan【向右合并同一行的】、rowspan【向下合并同一列】
<table width="500" height="50" border="1">
    <tr>
        <td colspan="2">小印01、小印02</td>
        <!-- <td>小印02</td> -->
        <td>小印03</td>
        <td>小印04</td>
        <td>小印05</td>
    </tr>
    <tr>
        <td>小印01</td>
        <td>小印02</td>
        <td>小印03</td>
        <td>小印04</td>
        <td rowspan="2">小印05 * 2</td>
    </tr>
    <tr>
        <td>小印01</td>
        <td>小印02</td>
        <td>小印03</td>
        <td>小印04</td>
        <!-- <td>小印05</td> -->
    </tr>
</table>
<hr>
type:input框的类型、name:传过去的参数名、value:传过去的参数值
<form action="后端地址" method="提交方式"><br>
    <input type="text" name="与后端参数一致" value="小印01">type="text"<br>
    <input type="text" name="与后端参数一致" placeholder="占位,例如:请输入账号">type="text"<br>
    <input type="password" name="与后端参数一致" placeholder="占位,例如:请输入密码">type="password"<br>
    <input type="count" name="与后端参数一致" value="小印02">H5 出来的新标签<br>
    <input type="date" name="与后端参数一致" value="">type="date" 时间框<br>
    <input type="radio" name="与后端参数一致" value="boy"><input type="radio" name="与后端参数一致" value="girl">女 【type="radio" 单选框】<br>
    <input type="checkbox" name="与后端参数一致" value="">
    <input type="checkbox" name="与后端参数一致" value="">checkbox" 多选框【属性 checked:选中】<br>
    <input type="hidden" name="与后端参数一致" value="">type="hidden" 是隐藏的,不显示,但是也可以穿过去参数<br>
    <select name="class" id="">
        <option value="">小印01</option>
        <option value="">小印02</option>
        <option value="">小印03</option>
    </select>select + option 下拉框<br>
    <input type="submit" value="提交">type="submit" 提交到对应的地址<br>
    <input type="reset" value="重置">type="reset" 重置恢复到默认<br>
</form>
<hr>
【iframe标签:在页面内展示网页】<br>
【可以与 a标签一起结合使用,在a标签中添加 target="iframe_text"属性,其与 iframe中的 name参数相同】<br>
<a href="https://www.baidu.com" target="iframe_text">打开百度</a><br>
<iframe src="https://www.so.com" frameborder="0" name="iframe_text" width="1500" height="500"></iframe>
<hr>
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆<br>
div&span 标签<br>
div 和 span 可以说是 HTML 文档中最重要的容易标签<br>
div 是块状容器,独占一行,主要用于搭建网页布局,页面整体布局基本都死它<br>
span 是行级容器,其大小自适应于包裹的对象<br>
<div>
    <span style="color: brown;">小印01</span>
    <span>小印02</span>
</div>
<div>
    <span>小印01</span>
    <span style="font-size: 3px;">小印02</span>
</div>
<hr>
<textarea name="" id="" cols="100" rows="5">
        cols="30" rows="10" 这个是定义默认有多少行和多少列的
        readonly:只能读不能写
    这个里面是可以写内容的
大小也是可以手动拉伸的
</textarea>
</body>
</html>

笔记源码


一点点笔记,以便以后翻阅。

猜你喜欢

转载自blog.csdn.net/qq_44111597/article/details/108680578