前端

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. JUnit@Before失效

    在学习Shiro的过程中需要使用到JUnit@Before注解配合测试,但是无论如何,@Before下面的方法都不按照预期的执行,困扰良久,后来各种百度终于找到根源,今分享于诸公,望能解诸公之急: J ...

  2. 使用pycharm编写python乱码

    开始总是乱码,该设置的都设置了,后来用charde检测编码也一直报错,之后重启了pycharm就好了,乱码问题也没了

  3. 【2】通过Ajax方式上传文件(图片)，使用FormData进行Ajax请求

    HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  4. 关于maven项目 启动页面报错 The type java.io.ObjectInputStream cannot be resolved.

    这种情况,要修改jdk版本,默认jdk选择 jdk不选jre windows---->perference---->java----->installes jres-----> ...

  5. 红帽虚拟化RHEV3.2创建虚拟机（图文Step by Step）

    目录 目录 前言 Install RHEV 创建Data CenterClusterHost 创建存储 创建虚拟机 前言 RHEV3.2的Web管理界面有了很大的改进,更加的简单和便捷,还可以使用中文 ...

  6. String.prototype.replace

    第一个参数是正则表达式 第二个参数是一个replacer 函数的入参如下: replacer(match,p1,p2,p3.. 其实也相当于 replacer($&,$1,$2,$3.. 资料 ...

  7. Linux下去掉^M方法

    由于windows和Linux文件格式不同,windows下文件在Linux下行尾会有^M 去掉^M方法 sed -i ‘s/^M//g' filename #注意:^M的输入方式是 Ctrl + v ...

  8. fiddler之简单的接口性能测试（replay）

    在针对某一个/某一些接口,发送相同的请求,不考虑参数的变化时,可以使用fiddler进行简单的性能测试.(使用功能为:replay) 一.replay功能调用 (1.Reissue Requests: ...

  9. TField中的GetText和SetText

    在数据表中的某些字段出于性能或数据规范化的考虑,会用组编号代替,就像学生有学号,员工有员工ID一样,但我们看的时候如果直接输入这样的编号看的人可能就会头痛了,这时就可用TField中的GetText转 ...

  10. 同时安装 Python2 & Python3 cmd下版本自由选择

    系统:win7 python2.7,python3.6同时安装,于是问题来了,python27与python36文件夹下的文件名都是python.exe 这样在cmd下,直接输入python,自动执行 ...