关于HTML的一些知识（自己看）_bdo是什么进制-CSDN博客

本文链接：https://blog.csdn.net/three_co/article/details/78661463

html，超文本标记语言

html文档就是网页，包含html标签和纯文本

html---网页

body---可见的页面内容

h1---标题，标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1>This is a heading</h1>

p---段落 <p>This is a paragraph.</p>

a---链接<a href="http://www.w3school.com.cn">This is a link</a>

<img> 图像 <img src="w3school.jpg" width="104" height="142" />这里注意图像没有结束标签

HTML 元素：指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

2017.11.26

1、
<hr /> 可以创建一条水平线
<p>....</p> 段落，浏览器会自动添加空行，但是不能用<p></p>去创建空行，
<br /> 可以用来创建空行 <br />元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
<h1><h2>...<h6>...</h1> 标题
 注释
<a href = 'https://www.baidu.com '>666</a> <a>标签可用来

2、
文本格式化：注意这种标签里面是可以加style的如<b style = 'font-family:consolas'>...</b>
<b>     定义粗体文本。eg：<b>not today</b>

<big>     定义大号字。

<em>     定义着重文字。

<i>     定义斜体字。

<small>     定义小号字。

<strong>     定义加重语气。

<sub>     定义下标字。

<sup>     定义上标字。

<ins>     定义插入字。即在字下面加一条横线，下划线

<del>     定义删除字。即在字上加一条横线将字划掉，

预格式文本：<pre>...</pre>
要知道普通的段落里面无论你预先打多少空格或者换行，当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
所以我们就需要<pre>...</pre>标签,它的内容格式浏览器会直接保留，很适合来保存代码
---------------------------------------------------------------
“计算机输出”标签：这一部分内容暂时没弄明白咋用，先贴出来，方便日后学习

标签     描述

<code>     定义计算机代码。

<kbd>     定义键盘码。

<samp>     定义计算机代码样本。

<tt>     定义打字机代码。

<var>     定义变量。

<pre>     定义预格式文本。

<listing>     不赞成使用。使用 <pre> 代替。

<plaintext>     不赞成使用。使用 <pre> 代替。

<xmp>     不赞成使用。使用 <pre> 代替。

------------------------------------------------------
缩写和首字母缩写：在某些浏览器中，当把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
<abbr>...</abbr>缩写
<acronym>...</acronym>首字母缩写

例子<abbr title = 'wofnfaf'>wof</abbr> 对于acronym用法一样
--------------------------------------------------------

定义文字方向：<bdo>标签以及dir属性
<bdo dir = 'rtl'>fjsadhfjajf</bdo>这里表示是从右向左输出
-----------------------------------------------------------

引用：<q>...</q>短引用以及<blockquote>...</blockquote>长引用

使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
-------------------------------------------------------------

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

2017.11.27

<dfn>...</dfn> 这里我发现字体会变成斜体

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

HTML <cite> 元素定义著作的标题。

浏览器通常会以斜体显示 <cite> 元素。

<a href="/example/html/lastpage.html" style="text-decoration:none">使得链接没有下划线

外部样式表以及内部样式表以及内联样式

<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>
</head>        内部

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

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效

</a>

target属性：_blank可以让链接在新页面打开

border：图片的边框

<a>标签除了可以定义链接外，还可以定义锚

比如<a name = 'kkk'>owoefhjwie</a>

又有：<a href = '#kkk'> woeiru</a> 这里在点击这个链接的时候，它就会自动跳跃到name为kkk的这个锚了。

这样省的别人来回上下滚轮，比如可以一键返回最上面

<a href ='mailto:lisijie@wingtech.com?cc=some@fnhueaf.com&bcc=jdsf.com&subject=hello%20world&body=ni%20en%20bang'>nizhenbang</a>

这里mailto是发送邮件的链接，前面是收件人，cc是抄送，bcc是密送，subject是主题，body是邮件内容。

注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

显示本地的图片，height是高，width是宽 alt代表可替换的文本，不能显示图像的时候就显示这个

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

2017.11.28

<body background = 'file:///C:/Users/zhusiliang/Desktop/1.png'> 设置背景图片

<p>hsdjfh<img src = 'file:///C:/Users/zhusiliang/Desktop/1.png' height = '120px' width = '200px' alt = 'wocao' align = 'middle'/></p>

设置图片和文本的对齐方式：align = 'bottom'/'middle'/'top' 其中bottom是默认的对齐方式

如果将align = 'left'/'right' 这是将图片弄到左右侧，即使有文本也会移动到文本的左右侧

关于表格table

<tr>

</tr>

<tr>

</tr>

<tr>

<td>hheeeee</td>

</tr>

<tr>

<td>jjjjjjjj</td>

</tr>

</table>

table是创建一个表格，然后tr是创建一行，td是单元格数据，th是表格头，一般是黑体加粗了，

 空格占位符，由于有的浏览器不能正确的显示<td></td>表示的空白单元格，所以改写为<td> </td>

border属性是用来调边框大小的，1,、8、15,bgcolor就是背景颜色，当然，背景图片就是background = '图片路径'

cellspacing 是单元格与单元格之间的间距

cellpadding是单元格内容与单元格之间的距离

<caption> 是表格的标题，可能汉字显示得时候会出现乱码，解决方法就是保存文件的时候选 utf-8格式

<table border="1" frame = 'box'> 框架：我感觉就是边框的位置 frame='box'/'below'/'above'/'hsides'(上下)/'vsides'(左右)

<tr>

<th colspan="2">电话</th> 这里就是占两列占两行： <th rowspan="2">电话</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

关于列表：

1、无序列表：无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul type = 'square'> type显示得是列表前面的符号，默认是实心圆disc，空心圆：circle，正方形：square

</ul>

2、有序列表：有序列表始于<ol>,每个列表项始于<li>

<ol type = 'A'> type可以是'A'(大写字母)/'a'（小写字母）/'I'（大写罗马数字）/'i'（小写罗马数字）/以及默认的数字

</ol>

需要注意的是列表是可以嵌套的如：

<ul>

<li>茶

<ul>

<li>绿茶

<ul>

</ul>

</li>

</ul>

</li>

</ul>

3、定义列表

<dl> 定义定义列表。

<dt> 定义定义项目。

<dd> 定义定义的描述。

<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

关于块元素和内联元素

<h1>, <p>, <ul>, <table>，<div>都是块元素，就是会开辟新行

<b>, <td>, <a>, <img>，<span>都是内联元素，不会开辟新行

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