码迷，mamicode.com
首页 > 其他好文 > 详细

前端标签

时间：2019-12-27 16:42:53      阅读：110      评论：0      收藏：0      [点我收藏+]

标签：足球   copy   multiple   类型   创建   focus   stat   自动   签名   

前端标签

创建一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>性感晨阳在线发牌</title>
    <meta http-equiv="refresh" content="3;URL=https://www.baidu.com">
<!-- #刷新页面，3秒后刷新到制定网址-->
?
<!--    <script> alert(‘欢迎来到激情交流‘)</script>-->
<!--&lt;!&ndash;    #提示信息&ndash;&gt;-->
<!--    <style> h1 {color: blueviolet;}</style>-->
<!--    改变字体颜色-->
    <link rel="stylesheet" href="12.23前端标签/mycss.css">
<!--    通过引入css代码更改字体颜色-->
    <script src="12.23前端标签/myjs.js"></script>
<!--    通过js代码更改提示-->
</head>
<body>
<h1>激情交流</h1><a href="https://www.mzitu.com">点我</a><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=276938278,2845396192&fm=26&gp=0.jpg" alt="" title="重金求子">
<!--设置内容： 标题激情交流：，网址："https://www.mzitu.com"网址后加点击选项调转网址，图片，alt为当图片加载不出来时，默认的提示信息可不写，title为将鼠标悬浮到图片上显示的内容，也可使用 width,height 单个使用的话等比例放大或缩小-->
?
</body>
</html>
注意：写完标签名字后可用Tab键自动补全，建议将js代码与css代码进行分离写入方便维护

body内常用标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>1</h1>
<h2>2</h2>
<h3>2</h3>
<h4>4</h4>
<!--h1-h4为1-4级标题-->
<s>删除线</s>
<u>下划线</u>
<b>加粗</b>
<i>斜体</i>
<!--字体格式-->
<p>国破山河在&nbsp;&nbsp;城春草木深</p>
<!--&nbsp;为增加空格几个就增加几个-->
<hr>
<!--<hr>为分割线-->
<p>a &gt; b</p>
<!--a大于b-->
<p>a &lt; b</p>
<!--a小于b-->
<p>a &amp; b</p>
<!--&本身-->
<p> &yen; 10000000</p>
<!--￥符号-->
<p> &copy; </p>
<!--版权符号-->
<p> &reg; </p>
<!--注册商标符号-->
</body>
</html>
1.块儿级标签
            独占一行  h1~h6  p   br   hr   div 
            1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
            2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签
                如果嵌套了 没有问题 只是不符合html语法规范
        2.行内标签    u  s  i  b  span(spend本身没有任何意义，却在前期布局中使用极多)
            自身文本多大 就占多大
            行内标签内部不能嵌套块儿级标签和行内标签

连接标签

CTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="12.23前端标签/303053.jpg" alt="王者甄姬" title="洛神" width="500px" >
<a href="https://www.baidu.com" target="_self" id="" class=""> 快戳我</a>
    id属性:唯一标识当前html页面中的某一个标签
    class属性：类似于面向对象中的继承，直接引用别的类中的样式
<a href="https://www.baidu.com" target="_blank"> 快戳我嘛</a>
<!--target中参数 alt为当前页面跳转，blank为新开一页页面跳转-->
<div style="height: 800px "></div>
<a href="" id="d1">中间</a>
<div style=" height: 800px"></div>
<a href="#d1">回到中间</a>
</body>
</html>
锚点功能
    通过href中的id字段定义连接回到相应的地点
?

标题列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>无序列表</p>
   <!-- 只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现-->
<ul>
    <li>123</li>
    <li>1234</li>
    <li>12345</li>
</ul>
<p>有序列表</p>
<ol>
    <li>嗯~~</li>
    <li>啊~~</li>
    <li>不要嘛~</li>
</ol>
<p>标题列表</p>
<dl>
    <dt>标题一</dt>
    <dd>内容一</dd>
    <dd>内容二</dd>
    <dt>标题二</dt>
    <dd>内一</dd>
    <dd>内二</dd>
</dl>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
<!--    表格标签，border添加表格线-->
    <thead>
<!--    表格结构内容-->
    <tr>
        <th>用户名</th>
        <th>年龄</th>
        <th>爱好</th>
<!--        th加粗，td不加粗-->
    </tr>
<!--    一个tr就是一行内容-->
    </thead>
    <tbody>
<!--    表格数据-->
    <tr>
        <td>jsson</td>
        <td>18</td>
        <td>study</td>
    </tr>
    <tr>
        <td rowspan="2">tank</td>
        <!--向下纵向扩展一格 -->
        <td>25</td>
        <td colspan="2">DBJ</td>
        <!--向右横向拓展一格 -->
    </tr>
    <tr>
        <td>sean</td>
        <td>25</td>
        <td>帅啊</td>
    </tr>
    </tbody>
</table>
</body>
</html>

注册网页初级版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>注册功能</p>
<form action="">
<!--    from标签获取用户数据打包给后端，action控制当前页面数据的提交路径即发送给那个服务端-->
<!--            三种写法：不写，默认朝当前页面所在地址发送-->
<!--                      全路径：（https://www.baidu.com）-->
<!--                      只写路径后缀：（/index/）-->
    <label for="d1"><p>用户名：<input type="text" id="d1" name="username"></p></label>
    <p>密码：<input type="password" name="password"></p>
<!--    typy属性：password改为密文-->
<!--             text普通文本-->
<!--             data生成一个日历表-->
<!--             radio多选一-->
<!--             checkbox多选多-->
    <p>生日：<input type="date"></p>
    <p>男：<input type="radio" name="gender">
    女：<input type="radio" name="gender" checked></p>
<!--    checked默认选择-->
    <p>爱好：
        篮球：<input type="checkbox">
        羽毛球：<input type="checkbox" checked>
        足球：<input type="checkbox">
        乒乓球：<input type="checkbox" checked>
    </p>
    
    <p>省份：
        <select name="province" id="">
        <option value="">深圳</option>
        <option value="">北京</option>
        <option value="">上海</option>
    </select>
<!--        select是下拉框 默认单选-->
    </p>
    <p>
        前女友：
        <select name="" id="" multiple>
            <option value="" selected="selected" >如花</option>
            <option value="" >沉鱼</option>
            <option value="" selected="">落雁</option>
            <option value="" >闭月</option>
<!--            multiple改为多选,selected默认选择-->
        </select>
    </p>
    <p>个人简介：
        <textarea name="" id="" cols="30" rows="10"></textarea>
        生成一个文档格
    </p>
    <p>个人简历：
        <input type="file">
<!--        类型改为上传文件-->
    </p>
    <p>
        <input type="submit" value="注册">
        <!--submit提交-->
        <input type="reset" value="重置">
       <!-- reset重置-->
        <input type="button" value="按钮">
        <!--button点着玩的没用-->
        <button>点我</button>
       <!-- 提交-->
    </p>
    <img src="12.23前端标签/303053.jpg" alt="" width="1000px">
</form>
</body>
</html>

 

前端标签

标签：足球   copy   multiple   类型   创建   focus   stat   自动   签名   

原文地址：https://www.cnblogs.com/cyfdtz/p/12108046.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！