html 入门

Old urchin

于 2019-07-31 20:01:01 发布

阅读量236

点赞数 1

分类专栏：网站建设基础css，HTML文档文章标签： html

本文链接：https://blog.csdn.net/qq_44605933/article/details/97941310

版权

网站建设基础css，HTML文档专栏收录该内容

5 篇文章 0 订阅

订阅专栏

*** 文本格式化标签***
标签描述
 定义粗体文本。
< big> 定义大号字。
 定义着重文字。
 定义斜体字。
 定义小号字.
 定义加重语气。
 定义下标字。
 定义上标字。
< ins> 定义插入字。
< del> 定义删除字。
< s> 不赞成使用。使用 < del> 代替。
< strike> 不赞成使用。使用 < del> 代替。
 不赞成使用。使用样式（style）代替。
计算机输出”标签

                                                                  标签 	       描述
				          <code> 	  定义计算机代码。
				       <kbd> 	     定义键盘码。
				       <samp> 	定义计算机代码样本。
				      <tt> 	       定义打字机代码。
				      <var> 	   定义变量。
				      <pre> 	   定义预格式文本。
				      <listing> 	不赞成使用。使用 <pre> 代替。
				      <plaintext> 	不赞成使用。使用 <pre> 代替。
				      <xmp> 	    不赞成使用。使用 <pre> 代替。*~~注：code无空格缩进，但是加pre的话就会解决了问题。~~*

引用

				       标签 	      描述
				       <abbr> 	     定义缩写。
				     <acronym> 	定义首字母缩写。
				     <address> 	定义地址。（<a>）
				      <bdo> 	       定义文字方向。
				      <blockquote> 	定义长的引用，浏览器会插入换行和外边距。
				      <q> 	            定义短的引用语。
				      <cite> 	定义引用、引证。
				      <dfn> 	定义一个定义项目。

html图像
通过使用 HTML，可以在文档中显示图像
实例

插入图像

<html>

<body>

<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>

<p>
一幅动画图像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>

<p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>

</body>
</html>

从不同地方插入

 <html>

<body>

<p>
来自另一个文件夹的图像：
<img src="/i/ct_netscape.jpg" />
</p>

<p>
来自xxxx.com.cn 的图像：
<img src="http://xxxx.cn/i/w3school_logo_white.gif" />
</p>

</body>
</html>
 - 作为背景图片
   <  body   backgroud="xxxxxxx.jpg(gif)">
   <  /body>

排版图片
使用align进行排版方向的改变

< p>图像 < img src="/i/eg_cute.gif" align="bottom"/> 在文本中< p>

< p>图像 <img src ="/i/eg_cute.gif" align="middle"/> 在文本中< /p>

< p>图像 <img src ="/i/eg_cute.gif" align="top"/> 在文本中< /p>（left/right）

调整尺寸
< imag src=" xxxx.jpg " width=" 200 " height="" >(一般改变一个就行，系统会自动调整最佳比例)
为图片显示文本
替换文本属性：alt。< img src=“boat.gif” alt=“Big Boat”/>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
加入title
当鼠标移至图片时，会显示一个title为图片解释说明。
< img src="" title =“这是我的照片”/>
创建图片链接

<html>

<body>
<p>
您也可以把图像作为链接来使用：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>

HTML制作表格（tr行，td列）

html>

<body>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<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>

</body>
</html>

列嵌套在行

表格

有序无序列表

无序

<ul>
<li>     </li>
<li>     </li>
</ul>

不能在< ul>里加入其他属性但可以加到< li>里。
2. 有序

<ol>
<li>     </li>
<li>     </li>
</ol>

不能在< ol>里加入其他属性但可以加到< li>里。
3. 定义列表
对东西进行修饰

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

~~不同类型的无序列表：~~

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

~~不同类型的有序列表：~~

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