Web开发

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

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


HTML入门基础

Tips:

  • HTML = Hyper Text Markup Language 超文本标记语言;
  • 查看网站
    • 查看网页源代码:未解析的源代码,即服务器发送到浏览器的原封不动的代码;
    • 检查:右击网页空白处或者某处某具体内容均可,看到的是经过JS渲染后的代码,即最终展示的效果所对应的的代码;
    • 检查:右击网页空白处,选择Network,然后刷新网页,即可看到不同网站的加载各个对象的耗时;
  • 注释
    • HTML:<!-- 记得在此处添加html注释信息 -->
    • CSS:/* 记得在此处添加CSS注释信息 */,只有这一种注释,不管是多行注释还是单行注释,不管是内嵌到HTML(style标签里面)还是单独的CSS文件
    • JS:// 单行注释,/* 多行/整段注释*/ ,这个和arduino(C/C++)的注释一样
  • 换行和空格
    •  <br/> 表示(强制)换行,Line Break,应该是类似word的软回车,wordpress模式下,似乎不能用多个<br/>实现空行;
    •  <p></p> 表示空一行;
    •  <p>&nbsp;</p> 表示空两行,这是在wordpress中的回车换行;
    • &nbsp; 不换行空格non-breaking space;
    • 行内元素里面的内容连续换行再多,连续空格再多,最后都在网页显示为一个空格;
  • <hr/>表示水平线(分割线),比如上面的那条线在text模式下可以找到;
  • 非成对出现的标签,比如<br/>、<hr/>,去掉/是不那么规范的写法,不过可以接受,不影响显示;
  • 本文编辑的时候,文本中可能需要\符号来转义某些小内容,以避免转成html后出现错误。
  • 浏览器忽略了源代码中的排版(省略了多余的空格和换行)
  • html5中用id,不用name属性?
  • 字体:
    • Monospaced font】 (等宽字体):是指字符宽度相同的电脑字体。 东亚语言中,方块字基本上都作为等宽字体处理,如各个地区的汉字、日语假名的全形字符、韩语谚文音节等字符都是等宽的。
    • Proportional font】 (比例字体):是指字符不同则宽度不尽相同的电脑字体,代码编辑器、命令行/虚拟终端等纯文字接口也会用等宽字体以便对齐,有利阅读代码文字,尤其在显示比例过窄、小字体接口上不易分辨的字符。
  • 语义与呈现分离;

缩写:

  • a—Anchor ([ˈæŋkər]⚓超链接)
  • alt—Alternative
  • dd—Description Details element
  • dl—Defined List
  • dt—Description Term
  • dd—Definition Description
  • em—Emphasis
  • h—Heading  (h+数字n表示n级标题)   
  • hr— Thematic Break (Horizontal Rule) (主题分割(水平分割线))
  • href—Hypertext Reference (超文本引用)
  • i—Italic
  • li—List Item
  • ol—Ordered List
  • p—Paragraph
  • q—Quote
  • px—Pixel
  • src—Source
  • td—Table Data Cell Cell
  • th—Table Header Cell
  • tr—Table Row
  • ul—Unordered List
  • nbsp—Non-breaking Space

 

速查列表

🖹HTML 基本文档

下面的<!DOCTYPE> declaration是html5的,写法相较html4.0.1更简单。

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

 

文本格式化(Formatting)

可能HTML "计算机输出" 标签和HTML 引文这里有下面未涉及的标签。

<b>粗体文本</b>
<strong>重要的文本-粗体</strong>
<!-- 二者都可以用来加粗,bold表示物理状态,而strong表示逻辑状态(语义上的强调),建议用CSS替代-->


<i>斜体文本</i>
<em>强调文本-斜体</em>
<!-- 二者都是设置斜体,但是em有语义上的强调,建议用CSS替代-->


<u>下划线</u>
<ins>插入的文本-下划线</ins>
<!-- 二者都是添加下划线,但是ins有语义上插入文本的含义,建议用CSS替代-->


<s> 给文字添加删除线 </s>
<del> 删除的文本-添加删除线 </del>
<!-- 二者都是添加删除线,但是<s>represent things that are no longer relevant or no longer accurate
<del>有语义上删除的含义-->

<sub> (下标文本)
<sup> (上标文本)
<!-- 不能同时上标+下标,更复杂的情形比如latex建议用CSS替代-->
<small>更小的文本</small>
<big>更大的文本</big>
<!-- 建议用CSS的font size属性替代-->

<pre>预格式化,此处文本所见即所得</pre> 
<code>计算机(短)代码</code>
<pre><code>计算机(长)代码,这就是我此时代码展示用的方法</code></pre>  
<!-- 用处不大,如果为了展示代码视觉效果,
code有语义化,建议尖括号双引号用字符实体代替,建议用CSS-->


<!-- 额外三个和编程有关的元素 -->
<p>上面代码定义了一个变量<var>user_input</var>,用于接收用户的输入。</p>
<p>如果用户输入的是<kbd>user_input</kbd>,
那么程序将打印<samp>你最喜欢吃的水果是:香蕉</samp></p>
<!-- 注:kbd键盘输入,默认monospace字体显示-->

<q>短引用,添加引号</q>
<blockquote>块状引用,我的wordpress也有用到,需要配合css</blockquote>
<abbr>CSS</abbr>(语义,缩写,此处CSS = Cascading Style Sheets)
<abbr title = "鱼C工作室">FishC.com</abbr>
<dfn>HTML</dfn> (用于表现定义中的术语,HTML是一门xx标记语言)
<address>定义文档的作者/所有者的联系信息</address>
<cite>表示一个作品的引用,且必须包含作品的标题</cite>
<mark>标记,加背景颜色</mark>

 

🔗链接(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>没有结束标签,所以称为"空标签"。

<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>

 

列表(List)

<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>

 

表单(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>

 

 

基本格式

标题的背景和居中、字体颜色尺寸修改,推荐的style属性来实现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>

 

 

三种列表

我的网站上面的menu就是利用列表来实现的。

有序列表还有三个常用的属性:

  • reversed,降序编号;
  • start,规定ol编号的起始值;
  • type,规定ol编号的标记类型,比如1、A、a、Ⅰ、i 等;
<!--无序列表-->
<ul>
    <li>coffee</li>
    <li>tea</li>
    <li>coakcola</li>
</ul>

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

<!--定义列表-->
<!--一(多)个术语对应一(多)条解释或定义, 序号dt元素和dd元素来配合实现--> 
<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>

 

 

图片

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

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

<img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Feynman_at_Los_Alamos.jpg" 
      width ="200"   
      height ="200" 
      title="这是C语言中文网的logo" 
      alt="这是C语言中文网的logo"   
/>

 

超链接

  • 用<a>标签创建(Anchor),通过使用  href  (Hypertext Reference)属性-创建指向另一个外部资源(CSS文件、JavaScript文件、图片等)的链接;
  •  target 属性:
    • "_blank" 单击之后在新的标签页打开,比如单击下面两个链接看看区别;
    • "_top" 单击之后在原标签页跳转;
    • 还有其他属性,我暂时不用理会,参考这里
  • 通过使用 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也行-->

 

 

表格

  • 默认情况下,浏览器会对表头单元格,也就是th元素里面的内容进行加粗、居中的处理;
  • td里面的元素,可以是文本、图像、列表、或另一个表格;
  • HTML5中最基本的边框都需要CSS来实现,否则默认没有边框,这里还是提现的语义与实现分离的精神;
  • 浏览器会自动根据内容的长度来调整单元格的尺寸;
<!--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>

 

这里也可以用CSS来设置格式,参考小甲鱼视频如下:

<style>
	table {
    	border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
    	border: 1px solid black;
        padding: 5px
    }
    capation{
    	padding: 10px;
    }
</style>

<!--border-collapse: collapse 让框线合并-->

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

 

 

head的六个标签元素

 <title> 元素: 

  • 定义了浏览器工具栏的标题;
  • 当网页添加到收藏夹时,显示在收藏夹中的标题;
  • 显示在搜索引擎结果页面的标题;
<head>
    <link rel="shortcut icon" href="图片url">
    <title>这是一个带图片的标签</title>
</head>

 

 <base> 元素:标签作为HTML文档中所有的链接标签的默认链接,即设定链接的相对地址(relative URLs)。

<!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"

        <a href="//www.runoob.com">菜鸟教程</a> 
- 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。
因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
    </body>
</html>

 

 <link> 元素:通常用于链接到样式表(CSS)。The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <link rel="icon" href="favicon.ico" />
</head>

 

 <style> 元素:在 style元素内规定 HTML 元素在浏览器中呈现的样式(渲染)。style元素可以出现在 HTML 文档中的各个部分,一个文档可以包含多个 style元素。

<style type="text/css">
    body {background-color:yellow}
    h1 {color: red}      
    p {color: blue}
    a {color: yellow;
       background: black;
      }
</style>
<!--注意h1后面有个空格;a对应的是body中的超链接-->

 

 <meta> 元素:该标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。HTML 中的 meta 标签有以下几种常见用处:

  • SEO
    • 描述页面内容:通过 meta 标签中的 "description" 属性,简要描述页面的内容,帮助搜索引擎了解页面的主要内容;
    • 关键词:通过 meta 标签中的 "keywords" 属性,为页面提供关键词,帮助搜索引擎识别页面的主题;
    • 作者:即author,这里不赘述;
    • 🕷️搜索引擎抓取:通过 meta 标签中的 "robots" 属性,指示搜索引擎是否爬取页面;
  • 编码设置:通过 meta 标签中的 "charset" 属性,声明页面使用的字符集(一般UTF-8),便于浏览器正确显示页面内容(不出现乱码);
  • 📱移动设备适配:通过 meta 标签中的 "viewport" 属性,设置页面在移动设备上的显示效果;
  • 页面刷新:通过 meta 标签中的 "refresh" 属性,设置页面自动刷新的时间间隔;

这些都是 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>

<!--屏幕(终端)显示自适应-->
<head> 
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
</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>

 

块/内联/内联元素

块(级)元素-block element:它占据父元素(容器)的整个水平空间和等于其内容高度的垂直空间,从而创建一个"区块"

  • 独占一行,自动换行;
  • 以块的形式展现,相邻的块元素在不同的行显示;
  • 占据全部的宽度;
  • <div>、<p>、<table>、<h1>、<ul>都是块;

内联元素(行内元素)

  • 不会换行;
  • 只会占用必要的宽度(大小);
  • 相邻的元素在同一行显示(代码是否在两行不影响);
  • <a>、<span>、<img>、<input>等都是内联元素;

二者对比:

  • 一般情况下,行内元素只能包含数据和其他行内元素;
  • 一般情况下,行内元素只能包含数据和其他行内元素;
  • 这种结构上的包含继承区别可以使块级元素创建比行内元素更"大型"的结构。
<!--文档中的一个区域将显示为蓝色--> 
<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> 标签:显示一个目标链接的页面(内联框架)。

例子-1:如果观察我们顶部的在线web工具(我之前写进markdown-typora),可以发现,其代码如下
<iframe width="100%" height="600" src="https://c.runoob.com/front-end/61" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

例子-2:(点击RUNOOB.COM超链接会在当前页面的一个独立框中显示内容,参见这里)
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
实际效果如下

RUNOOB.COM (点击该链接,上面的框架就会显示www.runoob.com网站的内容)

 

 

脚本

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

最常用的例子,比如一个网页要支持mathjax,那么直接添加<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>即可。

<!--普通内容输出--> <!--<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中,无论你空几格,文本输出的时候都只显示空一格。如果想多空格,那么直接使用&nbsp;来替代每一个空格。
  • 键盘上没有€符号,当然我们可能通过搜狗的强大功能输出,但是更一般的做法是用类似的字符实体来代替。
  • 大于号和小号,容易和标签元素的括号混淆,所以用 &lt;  &gt; 来替代,比如查看我的代码展示的text会发现一定用到这些字符实体。
  • &#169; 等同于 ©

 

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 - 定义文档/资源的名称。

Leave a Reply