前端笔记--HTML-1

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

前端笔记--HTML-1
前端基础-HTML-1
HTML-1 笔记
前端规范之HTML-1
html-1
（HTML-1）
html-1
HTML-1
HTML基础学习笔记
2月23笔记

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中，标题是通过h1~h6等标签进行定义。请仅仅把标题标签用于标题文本。不要仅仅为了产...
前端基础-HTML-1
HTML基本结构: http-equiv=“Content-Type” 文档类型content=“text/htm...
HTML-1 笔记
Windows 常用快捷键Web标准单标签双标签锚点标签Sublime常用快捷键
前端规范之HTML-1
语法 1) 缩进使用soft tab（4个空格）； 2)嵌套的节点应该缩进； 3)在属性上，使用双引号，不要使用单...
html-1
html的简介 HyperText Markup Language(超文本标记语言）网页语言- 超文本：超出文本...
（HTML-1）
浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层、表示层、行为层分别是：HTML、CSS、JavaS...
html-1
一.浏览器打开网页产生乱码的原因的原因以及解决方法产生原因：网页产生乱码的根本原因是编写网页文件后保存的编码格...
HTML-1
1、网页乱码的问题是如何产生的？怎样解决？ i.网页乱码是因为写入网页时所保存的编码格式与浏览器解析时所用的解码格...
HTML基础学习笔记
原 Blog 链接：HTML基础学习笔记自学 html 基础笔记 Web 前端简单介绍 web 前端包含： pc...
2月23笔记
第十天web前端学习笔记有道云笔记

前端笔记--HTML-1

html基本结构：

html格式化：

html样式：

html超链接：

html图片：

html表格：

html列表：

html块：

相关文章

前端笔记--HTML-1

前端基础-HTML-1

HTML-1 笔记

前端规范之HTML-1

html-1

（HTML-1）

html-1

HTML-1

HTML基础学习笔记

2月23笔记

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读