echarts Python入门到实战 IntelliJ IDEA教程 typeAliases 网络服务器 OpenCV4 Markdown shell vue安装 vue中文 nodejs视频教程 jquery使用ajax float占几个字节 oracle数据库版本 python手册 python自学 python写入txt文件 javatrim javafile java中string java开发接口 java数组删除 java代码注释 linux服务器 视频字幕提取器 eclipse中文版下载 fireworks8序列号 excel应用大全 hyqihei 还原软件哪个好 毕业证件照 ps反向选择的快捷键 网红照片男 pr蒙版怎么用 layout下载 globalscape x270 套料软件 淘宝退货怎么上门取件 su怎么添加材质
当前位置: 首页 > 学习教程  > 编程语言

复习 HTML基础

2020/9/19 14:48:55 文章标签:

  • 关于标签的学习,可以去 w3school、菜鸟教程 等等一些学习网站去看看

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

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>

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


本文链接: http://www.dtmao.cc/news_show_200202.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?