前端笔记--HTML-1

作者: 吃饱喝足搬代码丶 | 来源:发表于2018-04-21 18:12 被阅读0次

html基本结构：

<!DOCTYPE html>
<head>

</head>
<body>

</body>
</html>

在html中，标题是通过h1~h6等标签进行定义。请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

段落是通过p标签定义。

链接是通过a标签定义。

图像是通过img标签定义。

<hr /> 标签在 HTML 页面中创建水平线

换行标签

用法：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>这是一个段落</p>

<!--href="网页地址"  创建指向另一个文档的链接-->
<a href="http://www.w3school.com.cn">
这是一个链接</a>
<br/>

<!--src="图片地址"-->
<img src="/i/eg_w3school.gif" width="300" height="120" />   <!--这是一张图片-->
</body>
</html>

运行：

style属性改变html的样式：

background-color 属性为元素定义了背景颜色。
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。
text-align 属性规定了元素中文本的水平对齐方式。

<!DOCTYPE html>
<head>

</head>
<body style="background-color:blue">

<h1 style="text-align:center">标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">段落</p>

</body>
</html>

运行：

html格式化：

文本格式化标签：

<b>定义粗体文本 </b>
<big> 定义大号字</big>
<em> 定义着重文字</em>
<i> 定义斜体字</i>
<small> 定义小号字</small>
<strong> 定义加重语气</strong>
<sub>定义下标字</sub>
<sup>定义上标字</sup>
<ins> 定义插入字</ins>
<del>定义删除字</del>

删除字和插入字效果：

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

运行：

“计算机输出”标签：

<code>定义计算机代码<code>
<kbd>定义键盘码</kdb>
<samp>定义计算机代码样本</samp>
<tt> 定义打字机代码</tt>
<var>定义变量</var>
<pre>定义预格式文本</pre>

<p>
这些标签常用于显示计算机/编程代码。
</p>

引用、引用和术语定义：

<abbr>定义缩写</abbr>
<acronym>定义首字母缩写</acronym>
<address>定义地址</address>
<bdo>定义文字方向</bdo>
<blockquote> 定义长的引用</blockquote>
<q>定义短的引用语</q>
<cite> 定义引用、引证<cite>
<dfn> 定义一个定义项目</dfn>

<code> 元素不保留多余的空格和折行，如需解决该问题，您必须在 <pre> 元素中包围代码：

<!DOCTYPE html>
<head>

</head>
<body>

<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</code>

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>
</body>
</html>

运行：

html样式：

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

<a href="/example/html/lastpage.html" style="text-decoration:none">
这是没有下划线的一个链接！
</a>
<style> 定义样式定义。</style>
<link>  定义资源引用。
<div>   定义文档中的节或区域（块级）。</div>
<span>  定义文档中的行内的小块或区域。</span>

html超链接：

语法：

<a href="http://www.w3school.com.cn/">Visit W3School</a>

html--Target属性：
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

html--name属性：
name 属性规定锚的名称。
你可以使用 name 属性创建 HTML 页面中的书签。书签对读者是不可见的。
当使用命名锚时，我们可以定位到想去的位置，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

<a href="#tips">点击这里，跳转到那么name="tips"那条语句显示的内容</a>
<a name="tips">基本的注意事项 - 有用的提示</a>

html图片：

格式：<img src="boat.gif" alt="Big Boat">，alt中的内容只有在图片加载失败才会显示。
背景图像：

<body background="/i/eg_background.jpg">
</body>

图像链接：

<p>
图像链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

图像映射：

<body>

<p>点击图像上的星球,映射到对应图像上。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>

<img>   定义图像。</img>
<map>   定义图像地图。</map>
<area   定义图像地图中的可点击区域。/>

shape和coords：是两个主要的参数，用于设定热点的形状和大小。形状有rect，circle，poligon三种。大小表示为：coords="x1, y1,x2,y2"。

html表格：

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table> 定义表格</table> 
<caption>   定义表格标题。
<th>    定义表格的表头。
<tr>    定义表格的行。
<td>    定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col>   定义用于表格列的属性。
<colgroup>  定义表格列的组。

表格的表头可横可竖

<body>

<h4>表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

</body>

跨行跨列：

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>

运行效果：

表格内也可以用标签：

<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>

运行效果：

单元格边距：

<body>

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>

运行效果：

表格背景颜色与图片；单元格的设置同表格一样但是是在td中设置：

<h4>背景颜色：</h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>背景图像：</h4>
<table border="1" 
background="/i/eg_bg_07.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>

运行效果：

表格中排列(align属性)：

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">总计</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

</body>

frame属性控制围绕表格的边框：

<body>

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>

运行效果：

html列表：

无序列表：

<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>

有序列表：

<body>

<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ol>  

</body>

嵌套列表：

<body>

<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>

自定义列表：

<body>

<h2>一个定义列表：</h2>

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

</body>

<dl> 定义定义列表。</dl>
<dt> 定义定义项目。</dt>
<dd>定义定义的描述。</dd>

运行效果：

html块：

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束），例子：<h1>, <p>, <ul>, <table>。内联元素在显示时通常不会以新行开始，例子：<b>, <td>, <a>, <img>。

<span> 定义 span，用来组合文档中的行内元素。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<div>
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我得父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
</div>

运行效果：

前端笔记--HTML-1

html基本结构：

html格式化：

html样式：

html超链接：

html图片：

html表格：

html列表：

html块：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读