前端

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. Mac上的应用，例如Xcode需要输入原始下载账号才能更新问题

    为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,或者公司接管上任同事使用的Mac时,上面的应用都是用别人的账号购买下载的,而非使用自己账号在AppStore下载的. 这样的安装 ...

  2. 关于自定义 List集合排序的方法！

    大致流程: 排序是用到排序的接口Comparator<T>你要先建一个类实现比较器Comparator //大致流程public class StuComp implements Comp ...

  3. 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_8 properties标签的使用及细节

    properties 可以把数据库链接的配置放在上面的properties里面 #{占位符}的形式去引用上面的.下面的内容就是引用上面的内容的定义. 运行查询的方法测试一下 这样改造可以成功的运行程序 ...

  4. 【MM系列】SAP 的账期分析和操作

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 的账期分析和操作   前言部 ...

  5. jyputer notebook 、jypyter、IPython basics

    1 .修改jupyter默认工作目录:打开cmd,在命令行下指定想要进的工作目录,即键入“cd d/  G:\0工作面试\学习记录”标红部分是想要进入的工作目录. 2.Tab补全 a.在命令行输入表达 ...

  6. js swich

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. WCF书籍

    <WCF 服务编程> <WCF 全面解析> <WCF全面解析(套装上下册)>

  8. docker--docker compose 编排工具

    11 docker compose 编排工具 11.1 docker compose 介绍 根据前面所学的知识可知,想要使用Docker部署应用,就要先在应用中编写Dockerfile 文件来构建镜像 ...

  9. input输入框的的input事件和change事件以及change和blur事件的区别

    input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...

  10. 关于telnet的妙用

    1 使用telnet查看某个端口是否可以访问