html

最新推荐文章于 2021-12-04 15:31:20 发布
最新推荐文章于 2021-12-04 15:31:20 发布
阅读量434 收藏 3
点赞数
分类专栏： 学习笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangaodeaiyi/article/details/48630809
版权
一：html的概述      

     html：超文本标记语言，这种语言是用来写网页用的，所谓的超文本就是超越了txt文本文件的功能，在my_eclipse中新建一个html文件就会生成如下结构： 
<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  
  <body >  
 
    This is my HTML page. <br>
  </body>
</html>
其中<html></html>包括了整个的html文件，表示的是整个的html文件
<head></head>表示头信息
<title></title>是头信息中的标题
<body></body>表示体信息，也是主要表现出来给客户看的信息
<!--      -->表示注释
html也有一些需要注意的书写规范：
1，属性格式：属性名字=“属性值”，可以用双引号，单引号或者不用引号
    一般都使用双引号
2，不同的标签一般可以嵌套，但是不可以交错嵌套，只能够是完全嵌套
3，不区分大小写，但是一般使用小写
4，标签一般都会成对出现
5，html文件中

在my_eclipse中的建立html文件的步骤是新建一个Web   Project——》WebRoot中右键new建立一个folder文件夹——》在新建文件夹里面右键new新建一个HTML（Advanced  Templates） 
<!DOCTYPE html>
<html><!-- 表示文件是html文件，该文件存放在WebRoot的day01lxi文件夹下 -->
  <head><!-- 头信息 -->
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  <!-- 体信息 -->
  <body  text="blue"  background="../tu/8.11练习.png">  
 <!--
     body有一些常用的属性：
     text用来设置body标签内的颜色，background设置背景插入的图片（需要图片的位置）
     还有一个属性bgcolor是用来设定背景颜色的，
     如果和background一起用的话，写在后面属性会覆盖前一个属性
     ../   表示从当前html文件的位置返回上一层的WebRoot文件夹中
     /tu    表示进入WebRoot文件夹中的tu文件夹
     8.11练习.png     表示一个图片
     这里涉及到一个绝对路劲和相对路径的问题：
     绝对路径就是文件在硬盘上的具体位置；
     相对路径是相对于引用者的位置，这里的引用者是当前的html文件
     在相对路径中既可以用/也可以用\\ 
 -->
    This is my HTML page. <br>
  </body>
</html>

设置好一些属性之后，想要打开看一下效果，想要注意的是在MyEclipse的html文件上右键openwith--》 MyEclipse   Web  Browser就可以获得对应的系统默认浏览器读取html文件而显示的样子。


二：排版标记 
<span style="font-size:14px;"><!DOCTYPE html>
<html>
  <head>
    <title>PaibanHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
   <!-- 
   </br>是换行标记 ；
   
    表示一个空格；如果连续好几个 就表示好几个空格
   因为html文件中不识别空格和换行，所以才有特定的标记来表示空格和换行
   
   <p></p>表示的是段落，效果是<p>标签内会形成一个独立的段落，
   并且前后都会各有一个空行
   <p>标签内有一个align属性设置布局的
   
   <hr/>水平线标签：有color，size， width可以设置颜色粗细和长度
   width也可以设置成width="4500px"或者是width="70%"，
   后者表示占据浏览器屏幕的70%随意会随着浏览器显示面的变化而变化。
   
   
   
    -->
  <body>
      安得广厦千万间，<br/>
      吾庐独破受冻死亦足。 作者——某某人
      <hr  color="red"  size="12"  width="45%">
      <p  align="center">
       安得广厦千万间，<br/>
      吾庐独破受冻死亦足。 作者——某某人
      </p>
  </body>
</html></span>
三：块标签 
<!DOCTYPE html>
<html>
  <head>
    <title>KuaiHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
   <!--
      <div></div>自动设立一个块区域，自动换行(块联元素)
      <span></span>自动设立一个块区域，不会自动换行（内联元素）
   -->
  <body>
          我是英雄01号
         <div>
          我是英雄02号
          我是英雄03号
          </div>
          我是英雄04号
          我是英雄05号
          <span>
          我是英雄06号
          我是英雄07号
          </span>
          我是英雄08号
     
  </body>
</html>

效果是：
我是英雄01号
我是英雄02号 我是英雄03号
我是英雄04号 我是英雄05号 我是英雄06号 我是英雄07号 我是英雄08号 

四：字体标签 
<!DOCTYPE html>
<html>
  <head>
    <title>ZitiHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
   <!--
   字体标签的介绍：
        <font>标签：有属性color设定颜色,size设定大小,face设定字体类型
         
         h1到h6是标题标签，h1最大，h6最小
         
         <i></i>斜体 
         <b></b>粗体        
   -->
 
  <body>
  
     <font  color="bule"  size="23"  face="CDATA">骑士报道 </font>
     <h1>我是骑士01</h1>
     <h2>我是骑士02</h2>
     <h3>我是骑士03</h3>
     <h4>我是骑士04</h4>
     <h5>我是骑士05</h5>
     <h6>我是骑士06</h6>
     <b><i>我是骑士07</i></b>
     <!-- 这里联合一起使用即是斜体又是粗体 -->
     
  </body>
      
</html>

marquee标签有字体滚动效果，但是兼容性差，很少用    

五：列表标签 
<span style="font-size:14px;"><!DOCTYPE html>
<html>
  <head>
    <title>LiebiaoHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  <!-- 
       
        ul标签：无序列表
        属性type设定序号种类为圆形，方形
        ol标签：有序列表
        列表条目li标签 
        属性type设定序号种类A，I，1
        属性start设定序号起初值  
   -->
  <body>
      <ol  type="A"  start="23"  > 
      <!-- 因为这里的序号种类是大写英文字母，
      从23开始，所以有序列表条目从W开始 -->
         <li>深圳</li>
         <li>广州</li>
         <li>北京</li>
         <li>上海</li>
      </ol>
       <ul  type="circle"  > 
       <!-- 序号是圆形 -->
         <li>深圳</li>
         <li>广州</li>
         <li>北京</li>
         <li>上海</li>
      </ul>
  </body>
</html></span>
六：图片标签 
<!DOCTYPE html>
<html>
  <head>
    <title>TupianHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  <!-- 
     图片标签
      <img/>插入图片用的
      其中属性src设定图片位置,alt设定如果图片没有而代替图片的文字
      border设定相框宽度；align设定排布；
      width设定宽度；heigth设定高度
   -->
  <body>
      呵呵<img   src="../tu/8.11练习.png"  alt="没有图片"  border="34"  width="56"  align="top"/>呵呵
  </body>
</html>

七：链表标签 
<!DOCTYPE html>
<html>
  <head>
    <title>LianbiaoHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  <!-- 
  链表标签<a>的介绍：
         href属性设跳转的链接（可以是相对位置，也可以是绝对位置），
         如果没有设定点击没有效果                   
   -->
  <body>
       <a  href="../tu/8.11练习.png">呵呵</a>
       <a  href="http://www.baidu.com">百度</a>
       
       faubvebv<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       <a  name="xiaoshuo" ></a><!-- 这里用name设定描点 -->
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       veriuvbeqjrbvqe<br/>
       <a   href="#xiaoshuo">bwgtbrbrw<br/></a>
       <!-- #后面加name属性对应的名字，点击就可以跳到本页指定位置 -->
       
  </body>
</html>

八：表格标签 
<!DOCTYPE html>
<html>
  <head>
    <title>Biaoge.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  
  <body>
     <!-- 表格标签的使用 -->
     <table  border="2" width="50%" >  
     <!-- 定义一个表格，设定边框大小和宽度 -->
     <caption>骑士表格</caption><!-- caption属性设定表格标题，一定要跟在table标签的后面 -->
     <tr><!--定义表格中的一行  -->
         <td>骑士一号</td><!-- 定义表格中的一行中的单元格 ，如果使用th就表示定义头单元格-->
         <td>骑士一号</td>
         <td>骑士一号</td>
         <td>骑士一号</td>
         <td  rowspan="2">骑士一号</td><!-- rowspan属性设定行合并，记得要删除被被合并的行 -->
     </tr>
      <tr><!--定义表格中的一行  -->
         <td>骑士一号</td><!-- 定义表格中的一行中的单元格 ，如果使用th就表示定义头单元格-->
         <td  colspan="2">骑士一号</td><!-- colspan属性设定列合并，记得要删掉被合并的列-->
         <td>骑士一号</td>
      
         
     </tr>
     </table>
  </body>
</html>
把一个表格还可以分成三个部分
<thead></thead>  表格页眉，只有一个
<tbody></tbody> 表格主体
<tfoot></tfoot> 表格页脚，只有一个  

九：表单标签 
<!DOCTYPE html>
<html>
  <head>
    <title>ZhuceHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
         font{
               color:red;
               font-size:23px;                 
         } 
     </style>
  </head>
  <!-- 表格标签和表单标签的组合应用 -->
  <body>
   
    <form  action="#"  method="get">
    <!--action设定表格提交地址，method属性设定get则提交信息在地址栏看到，设定post则数据在head头部信息，提交信息在浏览器中不会显示出来  -->
   <table   border="1"  width="50%"  title="注册习题" >
    <caption  align="top" ><font >欢迎来到莫文建的网站注册</font></caption>
           <tr> 
               <td >名字：</td> 
               <td><input  type="text" name="name"/></td>
           </tr>
           <tr> 
               <td>性别：</td> 
               <td><input  type="radio"  name="age"  value="nan"/>男</td> 
               <td><input  type="radio"  name="age"   value="nv"/>女</td> 
               <!-- radio表示单选，最好和name，value一起使用 -->
           </tr>
           <tr>
           <td>爱好：</td>
           <td><input  type="checkbox"  name="aihao"  value="bc"/>编程</td>
           <td><input  type="checkbox"  name="aihao"  value="ks"/>看书</td>
           <td><input  type="checkbox"  name="aihao"  value="xss"/>写小说</td>
           <!-- checkbox表示复选框，最好也和name，value组合使用 -->
           </tr>
           <tr>
           <td>住址：</td>
           <td><select  name="dz"><!-- select选择标签 -->
           <!-- option设定选项 -->
               <option  selected="selected">深圳</option><!-- selected表示默认选项 -->
               <option>上海</option>
               <option>北京</option>
           </select></td>
 
           </tr>
           <tr>
           <td>密码：</td>
           <td><input  type="password"  name="mima"/></td>
           <!-- password表示密码，输入后会显示实心圆 -->
           <td></td>
           <td></td>
           </tr>
           <tr>
              <td>
                 <input  type="file"/>  <!-- 打开文件，用于后期扩张 --> 
                 <input  type="image"  src="../tu/8.11练习.png"/>
                 <!-- 导入图片，点击图片也会提交点击位置坐标 --> 
                 <input  type="hidden"/>
                 <!-- hidden设定隐藏，提交时候一起提交 ，一般用于给用户派发用户ID-->
              </td>
           </tr>
           <tr>
              <td ><!-- textarea文本域标签 cols设定列数，rows设定行数-->
                <textarea  name="textarea"  cols="3"  rows="4">
                     
                </textarea>
              </td>
           </tr>
             <tr>
           <td><input  type="submit"  value="提交"/></td>
           <!-- submit表示提交，可以用value设定提交按钮的名字 -->
           <td><input  type="reset"   value="重置"/></td>
           <!-- reset表示重置，可以用value设定重置按钮的名字 -->
           <td></td>
           <td></td>
           </tr>
 
    </table>
    </form>      
    
    
  </body>
</html>
type属性中的button可以设定按钮  



蓝莓浆糊饼干
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML入门与进阶以及HTML5
wuyxinu的博客
12-12 37万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML期末设计——代码篇
greengirl5的博客
06-22 13万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
最新发布
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
win10调节屏幕亮度
dangaodeaiyi的专栏
02-25 1181
鼠标右键-》NVIDIA控制面板-》调整桌面颜色设置-》使用NVIDIA设置，就可以调节亮度，对比度等等
黑马程序员——12，多线程（2）
dangaodeaiyi的专栏
07-29 793
------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ -------               黑马程序员——12，多线程（2）   //线程之间的通信 //就是多个线程操作同一个资源，操作动作不同 //举一个例子：一堆资源（名字，性别），一个线程输入，一个线程输出打印 class Person { String name;
黑马程序员——11，多线程，同步函数，死锁，一些零散的小知识点
dangaodeaiyi的专栏
07-28 629
黑马程序员——11，多线程，同步函数，死锁，一些零散的小知识点 //同步函数   class  A                      {          intsum;          publicsynchronized void add
黑马程序员—— 6，多态
dangaodeaiyi的专栏
07-21 594
------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ -------               黑马程序员——  6，多态 /*    关于多态的介绍    多态：事物的多种体现形式    动物：猫，狗   Cat a=new Cat();   Dongwu a=new Dongwu(); */   abstract class  P
javaScript和json例题
dangaodeaiyi的专栏
09-24 581
1，制作一个点名器： 点名器.html --> body{ background:url("../tu/8.11练习.png"); /* 可以自己选择背景图片 */ background:blue; } spa
黑马程序员—— 8,关于异常Exception的知识点
dangaodeaiyi的专栏
07-26 480
------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ -------               黑马程序员—— 8,关于异常Exception的知识点 异常：程序运行的时候遇到的特殊问题  一般程序遇到的问题有两种： 严重的Error（错误）这一类就没有办法解决; 非严重Exception(异常)这一类就有解决方法。 以以下程序为例子：
黑马程序员—— 7,内部类
dangaodeaiyi的专栏
07-22 471
------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ -------               黑马程序员——  7,内部类 /*     内部类的介绍与例子 */ class Person //外部类，外部类不能被私有化 {    private int x=10;          privateclass Xinzang//内部类，内部类可
javaScript基础
dangaodeaiyi的专栏
09-21 419
一：JavaScript概述       此为脚本语言，需要结合其他语言组合使用 ，不需要编译；每解释一条语句就执行一条语句 。控制CSS的样式，可以对表单项进行校验，对HTML元素进行动态控制。        安全性（没有访问系统文件权限，无法用来做木马病毒）        交互性（JavaScript控制HTML元素）         跨平台性（浏览器有JS的解析器，只要有浏览器就能运

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值