前端标签

前端标签

创建一个网页

<!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>

 

posted @ 2019-12-27 16:30  薛定谔的量子猫  阅读(333)  评论(0)  编辑  收藏  举报