博主网站

一、HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
  1. <!DOCTYPE html>声明为HTML5文档。
  2. <html> </html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
  3. <head> </head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
  4. <title> </title>定义了网页标题，在浏览器标题栏显示。
  5. <body> </body>之间的文本是可见的网页主体内容。

二、头标签（head）

head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>

标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

Meta标签

http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=oeasys.cn">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

name属性： 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

用于页面的关键字和描述，关键字可以有多个用 ‘,’号隔开

<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">　　

告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

link定义文档与外部资源

网站图标

<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon">

链接导入css，css就是修饰标签的

<link rel="stylesheet" type="text/css" href=""/>

三、body中的标签　　

 <b>加粗</b>
 <i>斜体</i>
 <u>下划线</u>
 <s>删除</s>

 <h1>标题1</h1>
 <h2>标题2</h2>
 <h3>标题3</h3>
 <h4>标题4</h4>
 <h5>标题5</h5>
 <h6>标题6</h6>

 <!--换行-->
 <br>

 <!--水平线--><hr>

 分割线<hr>
 上标<sup>8</sup>
 下标<sub>6</sub>

 <div>块级标签</div>
 <span>内联标签</span>

 <!-- 显示文本段落的，不能包含容器标签 -->
 <p>这是一个段落</p>
 <p align="left">左对齐段落</p>
 <p align="center">中对齐段落</p>
 <p align="right">右对齐段落</p>

基本标签（块级标签和内联标签）

特殊字符

内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

行内标签与块级标签

   1、行内标签：      （1）在一行内显示      （2）不能设置宽高      行内块标签img input         （有行内的特点）（可以设置宽高）   2、块级标签：      （1）独占一行      （2）可以设置宽高         如果不设置宽高，默认的宽是父亲的100%，高度是内容的高度   3、行内标签与块级标签的转换      display

块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。
这两个元素是专门为定义CSS样式而生的。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签

<a href="http://www.baidu.com" target="_blank" >百度一下</a>

href属性指定目标网页地址。该地址可以有几种类型：

  • 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
  • 相对URL - 指当前站点中确切的路径（href="index.htm"）
  • 锚URL - 指向页面中的锚（href="#top"）

target：

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

列表标签

1、无序列表<ul>，无序列表中的每一项是<li>

<ul>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
</ul>

type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)，none（无样式）

2、有序列表<OL>，里面的每一项是<li>

<ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
</ol>

　　type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

3、标题列表<dl>

dt、dd只能在dl里面；dl里面只能有dt、dd。

<dl>
        <dt>一</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>

        <dt>二</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
</dl>

dd是描述dt的

表格标签

<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>oeasys</td>
    <td>自学</td>
  </tr>
  <tr>
    <td>2</td>
    <td>DUAN</td>
    <td>阅读</td>
  </tr>
  </tbody>
</table>
<table border="" style="border-collapse:collapse;" >
    <!-- <tr>：行 -->
    <!-- <th>：加粗的单元格。相当于<td> + <b> -->
    <tr><th>Header</th></tr>
    <!-- <td>：单元格 -->
    <tr><td>Data</td></tr>
    <!-- 如果要将两个单元格合并，那肯定就要删掉一个单元格。
    单元格的属性：
        colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
        rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
        <caption>：表格的标题。使用时和tr标签并列-->
</table>

<table>的属性：

      • border：边框。像素为单位。
      • cellpadding: 内边距
      • cellspacing: 外边距
      • width：宽度。像素为单位。
      • height：高度。像素为单位。
      • style="border-collapse:collapse;"：单元格的线和表格的边框线合并
      • rowspan: 单元格竖跨多少行（纵向合并单元格）　
      • colspan: 单元格横跨多少列（即合并单元格）
      • bordercolor：表格的边框颜色。
      • align：表格的水平对齐方式。属性值可以填：left right center。
        注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
      • bgcolor="#99cc66"：表格的背景颜色。
      • background="路径src/..."：背景图片。
        背景图片的优先级大于背景颜色。

      • <caption>：表格的标题。使用时和tr标签并列

<tr>：行，一个表格就是一行一行组成的。

属性：

  • dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
  • bgcolor：设置这一行的单元格的背景色。
    注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
  • height：一行的高度
  • align="center"：一行的内容水平居中显示，取值：left、center、right
  • valign="center"：一行的内容垂直居中，取值：top、middle、bottom

<td>：单元格

属性：

  • align：内容的横向对齐方式。属性值可以填：left right center。
    如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
  • valign：内容的纵向对齐方式。属性值可以填：top middle bottom
  • width：绝对值或者相对值(%)
  • height：单元格的高度
  • bgcolor：设置这个单元格的背景色。
  • background：设置这个单元格的背景图片。

单元格的合并

如果要将两个单元格合并，那肯定就要删掉一个单元格。

表单标签

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单属性

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

input

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password"  />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked"  />
radio 单选框 <input type="radio"  />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置"  />
button 普通按钮 <input type="button" value="普通按钮"  />
hidden 隐藏输入框 <input type="hidden"  />
file 文本选择框 <input type="file"  />
image   图片  

 

属性说明:

  • name：表单提交时的“键”，注意和id的区别
  • value：表单提交时对应项的值
    • type="button", "reset", "submit"时，为按钮上显示的文本年内容
    • type="text","password","hidden"时，为输入框的初始值
    • type="checkbox", "radio", "file"，为输入相关联的值
  • checked：radio和checkbox默认被选中的项
  • readonly：text和password设置只读
  • disabled：所有input均适用
<form action="" method="">
    用户名：<input type="text" name="userName" src="" /><br>
    密码：<input type="password" name="userPawd" /><br>
    邮箱：<input type="email"></inpuet><br>
    电话：<input type="telf"><br>
    网址：<input type="url" name="" id="" value="" /><br>
    <!-- number只能输入数字包括小数点
            max最大值
            min最小值
            value默认值-->
    数量：<input type="number" max="90" min="20"><br>
    <!-- 可以提供更人性化的输入体验，自带删除键X -->
    请输入商品名称：<input type="search"><br>
    范围：<input type="range" max="89" min="28" value="50" /><br>
    颜色拾取：<input type="color" name="" id="" value="" /><br>
    时间：<input type="time" name="" id="" value="" /><br>
    日期：<input type="date"><br>
    <!-- datetime只有苹果浏览器可以使用 -->
    日期时间X：<input type="datetime" name="" id="" value="" /><br>
    日期时间：<input type="datetime-local" name="" id="" value="" /><br>
    月份：<input type="month" name="" id="" value="" /><br>
    星期：<input type="week" name="" id="" value="" /><br>
    <!-- 提交 -->
    <input type="submit" id=""  name="" />
</form>

　　

<select>：下拉列表标签

 <form>
         <select>
             <option>小学</option>
             <option>初中</option>
             <option>高中</option>
             <option>大学</option>
             <option selected="">研究生</option>
         </select>
         <br><br><br>

         <select size="3">
             <option>小学</option>
             <option>初中</option>
             <option>高中</option>
             <option>大学</option>
             <option>研究生</option>
         </select>
         <br><br><br>

         <select multiple="">
             <option>小学</option>
             <option>初中</option>
             <option selected="">高中</option>
             <option selected="">大学</option>
             <option>研究生</option>
         </select>
         <br><br><br>

     </form>

属性说明：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值

label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

  1. label 元素不会向用户呈现任何特殊效果。
  2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

属性说明：

  • name：名称
  • rows：行数
  • cols：列数
  • disabled：禁用

其他

        <form id="myform" method="">
            <!-- placeholder提示文本，提示占位
                 autofocus自动获取焦点
                 autocomplete:自动完成：on打开  off关闭-->
            用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus="" autocomplete="on" value="" /><br>
            <!-- required必须输入，如果没有输入将会阻止当前的提交
                 pattern正则验证
             -->
            手机号：<input type="tel" required="" id="" value="" pattern="^(\+86)?\d{10}$" /><br>
            <!-- multiple选择多个文件 -->
            文件：<input type="file" name="photo" multiple="">
            <!-- 提交 -->
            <input type="submit" name="" id="" value="提交" />
        </form>

        <form action="">
            专业：
            <select>
                <option value ="">前端</option>
                <option value ="">java</option>
                <option value ="">JavaScript</option>
                <option value ="">cSharp</option>
            </select>
            <br>
            <br>
            <br>
            <br>

            专业：
            <input type="text" list="sub" name="" id="" value="" />
            <datalist id="sub">
                <!-- 创建选项值 -->
                <option value ="前端移动开发" label="前景非常好"></option>
            </datalist>
        </form>

        <form action="" method="">
            用户名：<input type="text" name="userName" id="" value="" /><br>
            密码：<input type="password" name="userPwd"><br>
            加密：<keygen>
            <input type="submit" name="" id="" value="提交" />
        </form>
        <!-- 只能显示，不能修改 -->
        <output>只能显示，不能修改</output>
        <form action="" method="">
            用户名：<input type="text" name="userName" id="" value="" /><br>
            密码：<input type="password" name="userPwd"><br>
            加密：<keygen>
            <input type="submit" name="" id="" value="提交" />
        </form>
        <!-- 只能显示，不能修改 -->
        <output>只能显示，不能修改</output>

        <!-- max最大值
         value：当前进度值-->
         <progress max="100" value=100""></porgress>

         <!-- 度量器：衡量当前的进度值
            high:规定的较高的值
            low：规定的较低的值
            max：最大值
            min：最小值
            value：当前度量值-->
         <meter max="100" min="0" high="80" low="40" value="30"></meter>

HTML惊天地的更多相关文章

  1. Top Coder算法题目浏览器

    作者:Lucida 微博:@peng_gong 豆瓣:@figure9 原文链接:http://zh.lucida.me/blog/top-code-offline-browser/ 关于 左耳朵耗子 ...

  2. 前端少侠的ps故事

    前端少侠的ps故事 正所谓,码在江湖,身不由己.自21世纪前后端分离,代码分工细化以来,前端与设计的合作也变得越来越重要.有人说,如果前端懂设计的话,工作会更快一点.倘若说我入前端半年能算半个前端少侠 ...

  3. Ninject学习（一） - Dependency Injection By Hand

    大体上是把官网上的翻译下而已. http://www.ninject.90iogjkdcrorg/wiki.html Dependency Injection By Hand So what's Ni ...

  4. 双十二前夕爆京东12G数据泄露的真相是什么

    今天早上手机上推送出京东12g数据泄漏的消息,随即搜了下网上的相关新闻,感觉舆论又一次的干了一件惊天地的事情,到底京东的哪所谓的12G的用户信息数据有没有泄漏?舆论为什么齐刷刷的在12月11日突然间爆 ...

  5. GirdView 追忆学生时代的百思不得解

    临近年关,越多越多的园友开始了对工作.生活的总结,以及对来年目标的确立.这很励志,人是一根能思想的苇草,想来想去,我实在没什么惊天地.泣鬼神的英勇事迹,16年毕业季,按部就班的在时间的马车上颠簸,阅读 ...

  6. 由Java中toString()方法引发的无意识的递归想到的

    先看一段很简单的java代码: toString()/** * @author jeffwong */ public class InfiniteRecursion { public String t ...

  7. 《Xenogears》(异度装甲）隐含的原型与密码

    <Xenogears>(异度装甲)隐含的原型与密码 X 彩虹按:一种高次元的“生命体”,因“事故”被抓来当成“超能源”,其实那不只是“无限的能源”而已,“它”是有意志的!在我们眼里看来,这 ...

  8. python实现自动发送微博，当自己写博客时同步上去。

    一.需求: 自己在github上搭建一个基于Jekyll的博客(http://beginman.cn/),每次写完博客后就要push上去,博客写的再好,基本上没人访问,为了增加访问量,就想利用起来微博 ...

  9. 图像相似度算法的C#实现及测评

    近日逛博客的时候偶然发现了一个有关图片相似度的Python算法实现.想着很有意思便搬到C#上来了,给大家看看. 闲言碎语 才疏学浅,只把计算图像相似度的一个基本算法的基本实现方式给罗列了出来,以至于在 ...

随机推荐

  1. 外网穿透-natapp安装配置(windows)

    natapp官网 natapp服务器更新:全面支持HTTPS协议以及本地SSL证书,支持WSS协议.同时支持HTTP/2 WEB协议,支持微信小程序本地开发.全面自动支持泛子域名与访客真实IP地址. ...

  2. Sentinel 知识点

    Sentinel 实现的功能: Sentinel 实现的功能 相当于 熔断.降级 Hystrix.Spring Cloud 官方推荐的 Resilience4j

  3. 《Ensemble Methods: Foundations and Algorithms》

    <Ensemble Methods: Foundations and Algorithms>

  4. 如何禁用Antimalware Service Executable

    有时发现风扇呼呼地转,查看任务管理器,发现其中antimalware service executable占用了大量的CPU和内存. 这是由于Windows Defender软件导致的,可以用如下方法 ...

  5. haproxy是什么以及作用？

    HAProxy 是一款提供高可用性.负载均衡以及基于TCP(第四层)和HTTP(第七层)应用的代理软件,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. HAProxy特别适用于那些负载特大的we ...

  6. A1041 Be Unique (20 分)

    一.技术总结 这题在思考的时候遇见了,不知道怎么处理输入顺序问题,虽然有记录每个的次数,事后再反过来需要出现一次的且在第一次出现, 这时我们其实可以使用另一个数组用来存储输入顺序的字符,然后再用另一个 ...

  7. 你真的了解strtotime('X month')吗

    经常会有人被strtotime结合-1 month, +1 month, next month的时候搞得很困惑, 然后就会觉得这个函数有点不那么靠谱, 动不动就出问题. 用的时候就会很慌… 今天是20 ...

  8. twig输出转义

    twig输出转义--需求:传一个变量到 twig 中,需要插入几个空格,类似于下面这样:sprintf("%s%s -- %s", str_repeat(' ', $path_le ...

  9. 基于Tendermint的区块链漂流瓶简单实现

    本文主要借demo介绍基于Tendermint的区块链应用开发,这个demo很简单,主要包含以下功能: 扔漂流瓶 捞漂流瓶 之后投放者和打捞者可以相互传递[加密]信息 代码已上传至github. Te ...

  10. Canal订阅binlog变更并结合kafka实现消息缓冲

    阿里Canal项目请先了解:canal 考虑可能binlog大批量变更,如果直接通过Canal订阅binlog变动,会造成CanalClient会瞬间爆掉.为了解决这个问题,我们可以引入kafka做一 ...