码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!