前端

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. serial redirection

    int setOption(int fd,int nSpeed, int nBits, char mode,char nEvent, int nStop) { struct termios newti ...

  2. python插件快速安装

    windows下安装python插件没有linux那样方便. 可以先安装easy_install.我的是win64  下载地址  直接下载py文件运行,将对应目录添加到环境变量,我的是D:\dev_t ...

  3. java调用com组件com4j

    com4j A Java library that allows Java applications to seemlessly interoperate with Microsoft Compone ...

  4. C++：函数求数根（总算写出来了。。。。）

    [问题描述] 数根问题递归求解:输入n个正整数(输入格式中第一行为整数个数n,后续行为n个整数),输出各个数的数根.数根的定义:对于一个正整数n,我们将它的各个位相加得到一个新的数字,如果这个数字是一 ...

  5. Windows.etc\hosts文件

    ZC:就是将 后面的项 重定位到 前面的项 1.目录:"C:\Windows\System32\drivers\etc" 文件:"C:\Windows\System32\ ...

  6. C# 编写的webservice 怎样返回XML数据

    [WebMethod] public string GetXml() { string sConStr = ConfigurationManager.ConnectionStrings["c ...

  7. P1219八皇后

    这个题是一道USACO的经典dfs,与我见面的时间起码七个月了. 放置n个皇后于n*n棋盘,他们不能互相吃(行,列,对角线),问有几种摆法?于是想到了dfs(自我认为有图的就不用DP).首先确定好了要 ...

  8. MySQL总结（3）

    ORDER BY 与 GROUP BY ORDER BY GROUP BY 排序产生的输出 分组行.但输出可能不是分组的顺序 不一定需要 如果与聚集函数一起使用列(或表达式)则必须使用 任意列都可以使 ...

  9. java代码转化为jar包，再转化为.exe文件步骤

    下面是具体步骤: 一.先把自己的程序发布成jar文件 这是eclipse自带的功能,右键工程包-->Export 然后选择Java-->JAR file,next 选择输出路径,next ...

  10. SpringMVC源码解析

    一:springmvc运行过程: 1. dispatcherServlet 通过 HandlerMapping 找到controller2. controller经过后台逻辑处理得到结果集modela ...