前端

HTML：一个人

CSS：这个人的衣服

JS：这个人的行为

1 head标签

head相关标签

  <!--html5-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <!--head中写的东西有个特点 就是不会在页面中呈现-->

     <!--字符集编码-->

     <!--自闭合和标签：比如meta-->

     <meta charset="UTF-8">

     <!--标签中存在属性-->

     <!--有标签自带属性和自定义属性两种-->

     <!--打开页面1秒后刷新-->

     <meta http-equiv="refresh" content="1">

     <!--打开页面10秒后跳转到百度-->

     <meta http-equiv="refresh" content="10;http://www.baidu.com">

     <!--title是你浏览器tab的标签名-->

     <!--主动闭合标签：比如title-->

     <title>金牛座</title>

     <!--title的图标-->

     <!--rel代表告诉浏览器我要把link当做title的图标-->

     <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg">

     <!--引入css样式表-->

     <link rel="stylesheet" href="xx.css">

     <!--引入js或写js的-->

     <script></script>

 </head>

 <body>

 这里是body。

 </body>

 </html>

2 body标签

2.1 符号

&nbsp：字符之间增加空格，有几个空格就要几个&nbsp

&lt：左尖角号或小于号展示到页面

&gt：右尖角号或大于号展示到页面

2.2 body相关标签

  • 行内标签/内联标签  如span
  • 块级标签 如div
  • 行内和块级转换  display: block 行内和块级之间进行准换的css 属性
  • input标签 type属性 如text、password、button、submit、reset、radio、checkbox、file
  • select下拉框
  • table表格
 <!DOCTYPE html>  2 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--<p>段落标签-->

 <!--<br>换行标签-->

 <p>年轻,就是拿来折腾的。<br>

 让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>

 <!--标题标签-->

 <h1>标题标签</h1>

 <h2>标题标签</h2>

 <h3>标题标签</h3>

 <h4>标题标签</h4>

 <h5>标题标签</h5>

 <h6>标题标签</h6>

 <!--div是块级标签-->

 <!--块级标签无论自己有多大，都占满一整行-->

 <!--伪白板标签-->

 <div>水电费</div>

 <!--span行内标签 或叫 内联标签-->

 <!--行内自己有多大 就占多大-->

 <!--白板标签 没有附着任何css样式的就叫做白板标签-->

 <span>水电费</span>

 <span>水电费</span>

 <!--文本框 默认是text 文本框-->

 <!--name属性是跟后端交互的key；value属性是跟后端交互的值-->

 <!--{"username":"houayfan","passwd":"123456"}-->

 <input type="text" placeholder="请输入用户名" value="admin" name="username">

 <!--&lt;!&ndash;passwd 密文&ndash;&gt;-->

 <input type="password" placeholder="请输入密码"  name="passwd">

 <!--radio 单选-->

 <span>男</span><input type="radio" name="sex">

 <span>女</span><input type="radio" name="sex">

 <!--check box 多选框-->

 <span>奔驰</span><input type="checkbox" checked="checked">

 <span>宝马</span><input type="checkbox" name='c' value='1'>

 <!--上传文件-->

 <input type="file">

 <!--表单标签-->

 <form action="http://www.baidu.com" method="post">

 <div>

     <span>用户名：</span>

     <input type="text" placeholder="请输入用户名">

 </div>

 <div>

     <span>密&nbsp&nbsp&nbsp码：</span>

     <input type="text" placeholder="请输入密码">

 </div>

 <div>

 <!--button如果想要有操作 只能通过js绑定事件来做-->

     <input type="button" value="登录">

 <!--submit按钮如果和form表单连用则会直接触发请求-->

     <input type="submit" value="注册">

 <!--当reset和form表单连用时，会触发重置操作-->

     <input type="reset">

 </div>

 </form>

 <!--label扩展input的可点击范围-->

 <label for="i1">用户名</label>

 <input id="i1" type="text" placeholder="请输入密码">

 <!--复文本标签-->

 <textarea>金牛座复文本标签</textarea>

 <!--下拉框标签-->

 <select name="s1">

     <option value="1">中秋</option>

     <option value="2">国庆</option>

     <option selected="selected">都过不上</option>

 </select>

 <!--optgroup标签将相关选项组合在一起-->

 <select>

     <optgroup label="黑龙江">

         <option>请选择城市</option>

         <option>哈尔滨</option>

         <option>牡丹江</option>

     </optgroup>

     <optgroup label="河北">

         <option>石家庄</option>

         <option>秦皇岛</option>

     </optgroup>

 </select>

 <!--超链接标签-->

 <a href="http://www.baidu.com">跳转到百度</a>

 <!--图片标签-->

 <img src="http://ui.imdsx.cn/static/image/dsx_Smal1l.jpg" alt="图片加载失败战士的文案" title="鼠标悬浮显示的文案">

 <!--列表 点的列表-->

 <ul>

     <li>第一列</li>

     <li>第二列</li>

 </ul>

 <!--数字的列表-->

 <ol>

     <li>第一列</li>

     <li>第二列</li>

 </ol>

 <!--表格：tr 元素定义表格行，th 元素定义表头、即表头中的列，td 元素定义表格单元。-->

 <!-- thead 表头应该与 tbody 和 tfoot 页脚结合起来使用 -->

 <!-- border边框宽度多少像素 -->

 <table border="1">

     <thead>

         <tr>

             <th>id</th>

             <th>请求方式</th>

             <th>请求参数</th>

 <!-- colspan单元格横跨几列 -->

             <th colspan="2">操作</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <td>1</td>

 <!-- rowspan单元格横跨的行数 -->

             <td rowspan="4">post</td>

             <td>{'a':'b'}</td>

             <td>修改</td>

             <td>执行</td>

     </tr>

     <tr>

         <td>1</td>

         <td>{'a':'b'}</td>

         <td>修改</td>

         <td>执行</td>

     </tr>

     <tr>

         <td>1</td>

         <td>{'a':'b'}</td>

         <td>修改</td>

         <td>执行</td>

     </tr>

     <tr>

         <td>1</td>

         <td>{'a':'b'}</td>

         <td>修改</td>

         <td>执行</td>

     </tr>

     </tbody>

 </table>

 </body>

 </html>

页面展示:

【前端】HTML基础的更多相关文章

  1. Web前端开发基础 第一天（Html和CSS）

    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

  2. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

  3. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  4. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  5. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  6. 前端总结·基础篇·JS（一）五大数据类型之字符串（String）

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...

  7. 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  8. 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  9. 前端总结·基础篇·JS（四）异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  10. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

随机推荐

  1. Delphi XE2 之 FireMonkey 入门(35) - 控件基础: TFmxObject: 其它

    Delphi XE2 之 FireMonkey 入门(35) - 控件基础: TFmxObject: 其它 TFmxObject 增加了 TagObject.TagFloat.TagString, 算 ...

  2. 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_6 Mybatis中使用Dao实现类的执行过程分析-增删改方法

    从测试类入手,断点调试 找到实现类,进入到insert方法里面 这里是SqlSession的接口里面的方法. 我们需要找SqlSession的实现类. DefaultSqlSession 里面有两个i ...

  3. 阶段3 1.Mybatis_04.自定义Mybatis框架基于注解开发_3 基于注解的自定义再分析

    这里只需要 一是连接数据库的 二是映射的 注解是class的方式  dom4j技术获取xml的数据,这是xml的方式获取的下面几个关键的点 注解的方式回去dao类里面的几个主要的信息 User黄色的部 ...

  4. HTTP学习记录：四、头信息（请求和响应）

    学习资源主要为:@小坦克HTTP相关博客 一.请求头信息(Request Header) 请求头信息包含比较多,如下: 1.Cache头域 if-modified-Since 作用:把浏览器端缓存页面 ...

  5. 【Spring】---【IOC】

    Spring 2017-08-15 08:25:57 [IOC] 分享几篇好文 谈谈对Spring IOC的理解 Spring的IOC原理(转载) java框架篇---spring IOC 实现原理 ...

  6. [Mac Terminal] ___切换到其他路径和目录

    如果你想将当前 command line 会话切换到其他目录,需要用到三个命令:pwd,ls和cd. pwd的含义是“print working directory”,会显示当前目录的绝对路径.ls的 ...

  7. 【Linux开发】Linux启动脚本设置

    前言linux有自己一套完整的启动 体系,抓住了linux启动 的脉络,linux的启动 过程将不再神秘.阅读之前建议先看一下附图.本文中假设inittab中设置的init tree为:/etc/rc ...

  8. echars 柱状图正常状态 --》二次封装

    <template> <!-- 柱状图 正常 1. 调用页面引入 import EcharsColumnNormal from '@/components/echarsColumnN ...

  9. zabbix_server.conf

    ListenPort=10051 LogFile=/var/log/zabbix/zabbix_server.log LogFileSize=0 PidFile=/var/run/zabbix/zab ...

  10. 刘铁猛-深入浅出WPF-系列资源汇总

    首先奉上原作者刘铁猛博客地址:http://www.cnblogs.com/prism/ 作者讲的很不错,没有之一,另外作者出了一本书,希望大家支持. 送上全套高清晰视频教程(我注册了3个51cto的 ...