Web开发

在线web工具
html教程-w3
html教程-runoob
范仁义

《零基础入门学习Web开发》(HTML5&CSS3)-视频-小甲鱼    配套资料
html5速查宝典-小甲鱼

 

 

VScode及其他的Tips

  • 输入！+Tab键就会直接出现html模板，或者输入html:5回车也能达到相同的效果
  • 输入ul+Tab键就会直接写好"<ul> </ul>"
  • html注释 <!-- 记得在此处添加信息 --> 

 

HTML入门基础

标题的背景和居中、字体颜色尺寸修改

<!--这里是使用推荐的style属性来实现html样式-->
<body style="background-color:PowderBlue;text-align:center">

    <h1>Look! Styles and colors</h1>
    
    <p style="font-family:verdana;color:red">
    This text is in Verdana and red</p>
    
    <p style="font-family:times;color:green">
    This text is in Times and green</p>
    
    <p style="font-size:30px">This text is 30 pixels high</p>
    
</body>

<!--段落字体、颜色、尺寸、位置的控制-->
<body>
    <h1 style="font-family:verdana">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;text-align:center">A paragraph.</p>
</body>


<!--XXXXXXXXXXXXXXXXXXXXXXXXXX下面的方法是不推荐的老用法XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<body bgcolor="yellow"; 
      align="center"
      color="orange">
    <h2>请看: 改变了颜色的背景。</h2>
</body>

附录：[不赞成使用的标签和属性]

 

插入无序列表、有序列表、定义列表

<!--无序列表-->
<ul>
    <li>coffee</li>
    <li>tea</li>
    <li>coakcola</li>
</ul>

<!--有序列表-->
<ol>
    <li>coffee</li>
    <li>tea</li>
    <li>coakcola</li>
</ol>

<!--定义列表--> 
<dl>
    <dt>Web前端简介</dt> 
    <dd>HTML（超文本标记语言）</dd>
    <dd>CSS（层叠样式表）</dd>
    <dd>JavaScript（脚本语言）</dd>
</dl>
   <dl>
    <dt>C语言中文网</dt>
    <dd>HTML教程</dd>
    <dd>CSS教程</dd>
    <dd>JavaScript教程</dd>
</dl>
<!--一(多)个术语对应一(多)条解释或定义, <dl> 是 definition list；<dt> 是 definition term；<dd> 是 definition description-->

 

插入图片

(src表示图片来源，可以是本地电脑，也可以是网络服务器；高度和宽度的单位默认是px，可以省略；title是鼠标放在图片上显示的文字；alt是图片无法显示的时候作为替代显示的文字)

（图片作为超链接的用法见“插入超链接”；另外还有<map>标签定义图像地图；<area>定义图像地图中的可点击区域，参考这里 )

<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" 
      width ="200"   
      height ="200" 
      title="这是C语言中文网的logo" 
      alt="这是C语言中文网的logo"   
/>

 

插入超链接 (用<a>标签创建)

1.通过使用 href 属性 - 创建指向另一个文档的链接
2.通过使用 name 属性 - 创建文档内的书签(类似wordpress中的锚/书签，文档内跳转)

<!--target="_blank"表示在点击之后在新的标签页打开/target="_top"当前页面跳转-->
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<!--用图片作为超链接-->
<p>无边框的图片链接:
	<a href="//www.runoob.com/html/html-tutorial.html">
	  <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
    </a>
</p>

<!--锚tips保证了二者的联系-->
<a href="#tips">有用的提示</a>
<a name="tips">基本的注意事项 - 有用的提示</a><!--似乎这里用id替换name也行-->

另外还有创建电子邮件链接，这里不介绍了。

 

插入表格

简单例子

<!--border展示的是边框，数值为零，就没有框；cellpadding是设置内容距离边框的远近，caption设定了表格的标题。tr中row,th中header,td中data，-->
<!--横排-->     
<table border="1"    
       cellpadding="10">
  <caption>Rich people information</caption>
    <tr>
      <th>Name</th>
      <th>Telephone</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>USA</td>
    </tr>
</table>

<!--竖排-->
<table border="1">
    <tr>
      <th>First Name:</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th>Telephone:</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <th>Telephone:</th>
      <td>555 77 855</td>
    </tr>
</table>

附加例子(利用菜鸟工具展示行/列的合并)

 

文本格式化

HTML 文本格式化标签

标签类型 作用 说明
<b> 定义粗体的文本 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，<br />只有在没有其他标记比较合适时才使用它。
<em> 用来呈现为被强调的文本 建议使用CSS替代
<i> 斜体 在 HTML5 中没有必要这么做，可以使用样式表来格式化 <i> 元素中的文本
<small> 定义小型文本（和旁注）  
<strong> 定义计算机程序的样本重要的文本 建议使用CSS替代
<sub> 定义下标文本  
<sup> 定义上标文本  
<ins> 定义插入字 下划线(文本修订)
<del> 定义删除字 删除线(文本修订)

其他还有HTML "计算机输出" 标签和HTML 引文, 引用, 及标签定义，感觉一般也没必要用，要用的时候看一下即可，比较简单。

 

头部<head>

  • <title> 元素: （用法<title>文档标题</title>）
<head>
    <link rel="shortcut icon" href="图片url">
    <title>这是一个带图片的标签</title>
</head>
    1. 定义了浏览器工具栏的标题
    2. 当网页添加到收藏夹时，显示在收藏夹中的标题
    3. 显示在搜索引擎结果页面的标题

  • <base> 元素：标签作为HTML文档中所有的链接标签的默认链接

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
        <base href="//www.runoob.com/images/" target="_blank">
    </head>
        
    <body>
        <img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
        <br><br>
        <a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
    </body>
</html>
  • <link> 元素：通常用于链接到样式表
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • <style> 元素：在 style 元素内规定 HTML 元素在浏览器中呈现的样式(渲染)
<style type="text/css">
    body {background-color:yellow}
    h1 {color: red}      
    p {color: blue}
    a {color: yellow;
       background: black;
      }
</style>
<!--注意h1后面有个空格;a对应的是body中的超链接-->

 

  • <meta> 元素：该标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
<!--SEO搜索引擎优化，帮助网站被百度、谷歌等搜索到-->
<head>    
    <meta name = "keywords" content = "小甲鱼web开发，html5,CSS3编程教学">                   
	<meta name = "description" content = "《零基础入门Web学习》，案例实践，内容精彩，百度索引赶紧收了我吧">
    <meta name = "author" content = "小甲鱼">     
</head>

<!--固定编码格式，保证在网络服务器上也能正常解码-->
<head>    
    <meta charset="UTF-8">         
</head>

<!--等待30秒之后，自动跳转到百度的官网-->
<head>
	<meta http-equiv = "refresh" content = "30; http://baidu.com">   
</head>

<!--XXXXXXXXXXXXX以上三个功能可以整合到一个head里面XXXXXXXXXXXXXXXX-->
  • <script> 元素：用于加载脚本文件，如JavaScript，后面再讲。

 

CSS的引用

  • 外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。(参考实例)
  • 内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。

内联样式表：当特殊的样式需要应用到个别元素时。

<!--外部样式表-->
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<!--内部样式表-->
<head>
    <style type="text/css"> 
        body {background-color: red}
        p {margin-left: 20px}
    </style>
    <!--效果一样，去掉第一个style里面的type-->
</head>


<!--内联样式(优先级最高)-->
<body>
    <h1 style="text-align:center;font-family:verdana;">居中对齐的标题</h1>
    <p style="color: red; margin-left: 20px;">
       This is a paragraph
    </p>
</body>

 

区块元素和内联元素

  • 区块元素：在浏览器显示时，通常会以新行来开始（和结束）。
    实例: <h1>, <p>, <ul>, <table>
  • 内联元素：在显示时通常不会以新行开始，所以也叫行内元素。
    实例: <b>, <td>, <a>,<img>
  • 新学一个区块元素<div> 和内联元素<span> 
    <!--文档中的一个区域将显示为蓝色--> 
<body>
    <p>这是一些文本。</p>
    <div style="color:#0000FF">
      <h3>这是一个在 div 元素中的标题。</h3>
      <p>这是一个在 div 元素中的文本。</p>
    </div>
    <p>这是一些文本。</p>
</body>


<!--使用 <span> 元素对文本中的一部分进行着色--> 
<body>
    <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span    style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
</body>

 

布局

Tips: 首先需要明白，创建高级布局是非常耗时，推荐使用网上免费的网站模板，然后根据自己的需求优化。另外推荐在布局中使用CSS，如果将其放在外部样式表，那么站点更易维护。 可以使用块级元素<div>或者<table>来实现多列布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。下面只展示如何使用<div>来实现布局。

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
</head>
<body>

    <div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">主要的网页标题</h1></div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    内容在这里</div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    版权 © runoob.com</div>

    </div>
 
</body>
</html>

 

表单

表单用于收集不同类型的用户输入，这部分暂时用不上，具体可以参见这里。

 

框架结构

框架就是把整个页面分成几个独立的部分，可以通过拖动操作改变每个部分的大小，比如我们Typora左侧的导航栏的边距就是可以调节的，整个页面通过框架结构其实是分成了两个框。注意我们用的多的是<iframe>标签，而<frameset>和<frame>用得少，一般用<div>和CSS替代实现。

  • <iframe>标签：显示一个目标链接的页面(内联框架)。
    如果观察我们顶部的在线web工具(我之前写进markdown-typora)，可以发现，其代码如下
    <iframe width="100%" height="600" src="https://c.runoob.com/front-end/61" allowfullscreen="allowfullscreen" frameborder="0"></iframe>    另外再给一个例子(点击RUNOOB.COM超链接会在当前页面的一个独立框中显示内容，参见这里)
    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

 

颜色

这个比较简单，只需要知道两种表示方法，#FF0000对应rgb(255,0,0) 即标准红色。FF是十六进制，表示255。#FFFFFF和rgb(255,255,255)都表示标准白色。

脚本

<script> 标签：标签用于定义客户端脚本，比如 JavaScript。该标签元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。关于<noscript>就不介绍了，现在的浏览器很少有支持这个的。JavaScript 最常用于图片操作、表单验证以及内容动态更新，下面是其三个简单的应用展示。

<!--普通内容输出--> <!--<script type="text/javascript">,也就是说指定JS，不加也能运行？--> 
<script>
	document.write("Hello World!");
</script>


<!--鼠标点击触发事件--> 
<p id="demo">
	JavaScript 可以触发事件，就像按钮点击。</p>
<script>
    function myFunction()
    {
        document.getElementById("demo").innerHTML="Hello JavaScript!";
    }
</script>
<button type="button" onclick="myFunction()">点我</button>


<!--处理 HTML 样式--> 
<p id="demo">
	JavaScript 能改变 HTML 元素的样式。
</p>
<script>
    function myFunction()
    {
        x=document.getElementById("demo") // 找到元素
        x.style.color="#ff0000";          // 改变样式
    }
</script>
<button type="button" onclick="myFunction()">点击这里</button>

 

字符实体

这是为了解决两个问题：一是打出键盘上不存在的字符；二是避免将文本内容和代码之间混淆。具体例子如下：

  • html中，无论你空几格，文本输出的时候都只显示空一格。如果想多空格，那么直接使用来替代每一个空格。
  • 键盘上没有€符号，当然我们可能通过搜狗的强大功能输出，但是更一般的做法是用类似的字符实体来代替。
  • 大于号和小号，容易和标签元素的括号混淆，所以用 &lt;和 &gt;来替代，现在好像这个bug已经被解决了。

 

URL统一资源定位器

格式如下：scheme://host.domain:port/path/filename

例子http://www.runoob.com/html/html-tutorial.html ， 分解如下：

  • scheme - 定义因特网服务的类型。最常见的类型是 http，还有其他如https，ftp(文件传输协议)；
  • host - 定义域主机（http 的默认主机是 www）；
  • domain - 定义因特网域名，比如 runoob.com；
  • :port - 定义主机上的端口号（http 的默认端口号是 80）；
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）；
  • filename - 定义文档/资源的名称。

 

速查列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

基本标签（Basic Tags）

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
 
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->

文本格式化（Formatting）

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd> 
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>


<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>


<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格（Tables）

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

框架

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

小的tips

  • 本文编辑的时候，文本中可能需要\符号来转义某些小内容，以避免转成html后出现错误。
  • <hr />表示的是画横线(分割线)。
  • <br />表示换行
  • 浏览器忽略了源代码中的排版（省略了多余的空格和换行）
  • html5中用id，不用name属性?
  • <br>有啥用？

Pages: 1 2

Leave a Reply