博主网站

一、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. LOJ 510: 「LibreOJ NOI Round #1」北校门外的回忆

    题目传送门:LOJ #510. 题意简述: 给出一个在 \(K\) 进制下的树状数组,但是它的实现有问题. 形式化地说,令 \(\mathrm{lowbit}(x)\) 为在 \(K\) 进制下的 \ ...

  2. Celery详解(2)

    除了redis,还可以使用另外一个神器----Celery.Celery是一个异步任务的调度工具. Celery是Distributed Task Queue,分布式任务队列,分布式决定了可以有多个w ...

  3. 201871010102-常龙龙《面向对象程序设计（java）》第十周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  4. CF1076D Edge Deletion 最短路树

    问题描述 Codeforces 洛谷(有翻译) 题解 最短路树,是一棵在最短路过程中构建的树. 在\(\mathrm{Dijkstra}\)过程中,如果最终点\(y\)是由点\(x\)转移得到的,则在 ...

  5. 集合(List、Set、Map)

    一.集合与数组 数组:长度固定,数组元素可以是基本类型,也可以是对象.不适合在对象数量未知的情况下使用. 集合:(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. Java集合类存放 ...

  6. Install docker to Redhat 7

    1)   sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo 2) s ...

  7. Shell编程——test命令

    1.整数 如果表达式为真返回值为0,如果表达式为假,返回值为1.test命令可以对整数.字符串.以及文件进行判断. -it:小于 -le:小于或等于 -gt:大于 -ge:大于或等于 -eq:等于 - ...

  8. C++ 中文乱码的问题

    乱码的根本原因就是字符串编码的方式也字符串解码方式不一致导致的, 而在我们平常用的编码编码方式一般都是utf-8以gbk之间的相互转换, 下面给出编码方式的转换代码 string UtfToStrin ...

  9. C# HTTP系列8 GET与POST对比说明

    系列目录     [已更新最新开发文章,点击查看详细]  HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = Worl ...

  10. Java非侵入式API接口即文档工具apigcc

    一个非侵入的api编译.收集.Rest文档生成工具.工具通过分析代码和注释,获取文档信息,生成RestDoc文档 前言 程序员一直以来都有一个烦恼,只想写代码,不想写文档.代码就表达了我的思想和灵魂. ...