学习HTML过程中的笔记


跳过的知识

CSS章节跳过

 内置框架 http://www.w3school.com.cn/html/html_iframe.asp  

跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。链接http://www.w3school.com.cn/html/html_tables.asp

创建图像映射 
把图像转换为图像映射
本例显示如何把一幅普通的图像设置为图像映射。
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。链接http://www.w3school.com.cn/html/html_images.asp#more_examples

命名锚跳过(打开一个网页并跳转到指定位置)

创建电子邮件连接 所在位置:链接

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<p>段落 会省略文字中的空格和回车,想换行<br />,但<p>的开始会切换到下一行

属性style可以用于<p>或<body>    font-size:文字大小 color:文字颜色 background-color:底色 font-family:字体

格式< p style="font-size:30px">

<img>添加图片或动画  属性src (src 指 "source") 

属性width宽 height:高

实例:如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中

为 http://www.w3school.com.cn/images/boat.gif

属性alt:如果无法显示图像,将显示 alt 属性中的文本

格式<img src="位置(空格)a.jpg" width="300" height="400" alt="字"(空格)/>

图像的对齐,属性:align

实例

<p>图像 <img src="1.gif" align="bottom"> </p>
<p>图像 <img src ="1.gif" align="middle"> </p>
<p>图像 <img src ="1.gif" align="top"> </p>

不知为啥 以上三行我这里不好使

实例

<p>

<img src ="1.gif" align ="left"> 

哈哈哈

</p>

(图像出现在哈哈哈的左侧。)
<p>
<img src ="1.gif" align ="right"> 

哈哈哈
</p>

(图片出现在哈哈哈的右侧)

<ins>文字下划线

<del>在文字上加斜线(删除文字)

<bdo>改变文字的方向  属性dir

格式<bdo dir="rtl">abcdefg</bdo>  (rtl会使文字反写)我们得到的结果是gfedcba

<q>短引用(会自动加“”)

<blockquote>长引用(会自动改变文字缩进方式) 属性cite(单词意思:引用)

格式<blockquote cite="www.baidu.com">你好世界</blockquote>

<abbr>缩写以及首字母缩写,属性:title

格式<abbr title="world health organization">www</abbr>

<dnf>(定义)可以用做另一种缩写的写法,属性title

格式<dnf title="world health organization">who</dnf>

使用缩写能为翻译系统搜索引擎叶公有用信息

<address>联系人地址

<cite>书名(一般会体现斜体)

格式<cite>海边的卡夫卡</cite>

通常html文字大小和间距可变,但是计算机的一些代码需要固定的字大小和间距

例如:<kbd>键盘录入 ;<samp>计算机输出 ;<code>计算机代码(不保留空格和回车)

<pre>保留文本中的空格和回车

<var>定义数学变量

举个栗子:

爱因斯坦的公式:E = m c2

  <p><var>E</var>=<var>m</var><var>c</var><sup>2</suo></p>

HTML中注释的格式:<!--注释的内容--> 

它和C++的用法相同,可以注释掉一些行,用于调试

点击图片打开其他网页(只有在电脑本机的链接才行,即html文档)

举个栗子(直接在原网页所在页面上打开)

<a href="1.html">

<img src="2.jpg" width="30” height="30">

</a>

假入被锁在了框架里,挑出框架

举个栗子(在另一个网页上打开)

<a href="1.html"target="_blank"> 注意红色的隔开部分是一个空格,不能用分号

<img src="2.jpg" width="300" height="300">

</a>

被卡在了框架里,想要跳出框架(大概是重新打开此页,位置是网页开头)

<a href="目前所在网页链接" target="_top">一些提示性词如:请点击这里</a>

设置页面背景图片,实例:<body background="1.jpg">

如果如果背景图像小于页面,图像会进行重复


表格

<table>表格开始 属性:border(边框)一般设为1,弱不需要边框可以直接不写border这个属性 属性:cellpadding指单元格内字和边框的距离(英语也是这个意思)

<tr>行开始

<td>数据开始  (数据可以是任何东西,数字,文字,图片……)

<th表格的第一行,通常是总结性的词..

实例1:一行一列

<table border="1">

<tr> <td>100</td> </tr>

</table>

输出:

100

实例2:一行三列

<table border="1">

<tr> <td>100</td> <td>200</td> <td>300</td> </tr>

</table>

输出:

100 200 300

实例3:2行三列

<table border="1">

<tr> <td>100</td> <td>200</td> <td>300</td> </tr>

<tr> <td>400</td> <td>500</td> <td>600</td> </tr>

</table>

输出:

100 200 300
400 500 600

实例4

当border="8"时

First Row
Second Row


实例5:<th>

<table border="1">
<tr> <th>姓名</th> <th>电话</th> </tr>
<tr> <td>1</td> <td>123456</td></tr>
</table>

输出

姓名 电话
1 123456

实例6 当在一个单元格内不写内容或插入空格,这个格子的里面的边框会消失,如下图


此时要让格子不消失应插入空格占位符,即该单元格的内容是<td>&nbsp;</td> (注意分号别丢了)

实例7 cellpadding

<table border="1" cellpadding="8">
<tr><td>First</td> <td>Row</td> </tr>
<tr><td>Second</td> <td>Row</td> </tr>
</table>

输出:

First Row
Second Row

实例8 为整个表格添加背景颜色或背景图片

a添加背景颜色

属性bgcolor 

<table border="1" bgcolor="red">

b添加背景图片

属性 background

<table border="1" background="1.jpg">


实例9 为一个单元格添加背景颜色或背景图片

a背景颜色

  <td bgcolor="red">First</td>

b背景图片

<td backgronud="1.jpg">First</td>


实例10

单元格内文字的对齐方式

  <th align="right">一月</th>
  <th align="left">一月</th>

  <td align="right">一月</td>
  <td align="left">一月</td>


实例11 frame属性(无法在 Internet Explorer 中使用)……详细自己查,我没学


列表

<ul>无序列表的开始

<ol>有序列表的开始

<li>有或无序列表中每项的开始  每一项可以是段落、换行符、图片、链接以及其他列表等等

自定义列表的开始dl 每项的开始dt 自定义的部分dd (觉得很麻烦,而且这个只能呈现写一行 后换一行并且首行缩进,类似注释的作用)

实例1 一个无序的列表

<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

输出:

  • 咖啡
  • 牛奶

注:开头图案可以改变

<ul type="circle"> 改成空心圆

<ul type="square">改成实心正方形

实例2 有序列表

<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

输出

  1. 咖啡
  2. 牛奶

注:计数形式可以改变

<ol type="A">  改成大写英文字母

<ol type="a"> 改成小写英文字母


实例2 有序列表从一个指定数字开始排列 属性:start

</ol>
<br />
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

输出:

  1. 咖啡
  2. 牛奶

大多数 HTML 元素被定义为块级元素或内联元素

块级元素,在显示时以新行来开始。

例子:<h1>, <p>, <ul>, <table>

内联元素,在显示时不以新行开始。

例子:<b>, <td>, <a>, <img>

<div> 元素:定义文档中的分区或节 ??啥意思

<span> 元素:定义 span,用来组合文档中的行内元素。 ??啥意思


div和类结合,这个div太酷了!!这是我最喜欢的属性,直接放链接,页面一秒变潮!!帅呆了

http://www.w3school.com.cn/html/html_classes.asp

span可以用作一段话中另一种颜色的字……<p>可做不到哦,用<p>会另起一行

言语够简洁了,这里直接放上链接

http://www.w3school.com.cn/tiy/t.asp?f=html_classes_span   (注:可以去掉<style>下一行中的span,去掉吧!这样和div一起好记)

这个很好看,但我觉得里面的文字啊,对其啊什么的我看不懂,直接当成模板好了

http://www.w3school.com.cn/tiy/t.asp?f=html_layout_divs

这个也作为模板

http://www.w3school.com.cn/html/html_responsive.asp

模板

http://www.w3school.com.cn/html/html_frames.asp


可以以网站上给的颜色和对应码来设置背景颜色

实例 <body bgcolor="#d0d0d0">

原文地址:https://www.cnblogs.com/iamjuruo/p/7470946.html