HTML（一）基本元素

1.第一个例子

<html>      
<body>   

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>
<br/>
</body>
</html>

解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题大小有1到6
<p> 与 </p> 之间的文本被显示为段落 paragraph的缩写，会自动换行
<br/>代表换行

2.中文问题

中文乱码问题
可以在浏览器上设置编码方式为UTF-8
或者在html的最前面加上编码设置

<head>

</head>

是用于告诉浏览器，这个页面包含的内容的格式是text/html。因为浏览器除了可以渲染html文件之外，还可以打开jpg,gif.png 图片，pdf,word等等其他格式的数据，而不同数据的打开方式是不一样的。这样就能告诉浏览器使用UTF-8方式显示中文

3.属性

属性用来修饰标签的
比如要设置一个标题居中

写在开始标签里的 align="center" 就叫属性
align 是属性名
center 是属性值
属性值应该使用双引号括起来

4.注释

html使用 进行注释

5.粗体

两种<b> <strong>

b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容
推荐使用strong

6.斜体

推荐使用<em> ,em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。常常用于引入新的术语的时候使用。

<i>使用 i 标签带来的斜体效果</i>

<br/>

<em>使用 em 标签带来的斜体效果</em>

<strong><em>同时有粗体和斜体</em></strong>

7.预格式

有时需要显示Java代码 <pre> </pre>

8.删除效果

<del>

9.下划线

<ins> 但是通常来讲，不要给普通文本加下划线，因为用户会误以为是一个超链

10.显示图像

<img> 即图像标签
需要设置其属性 src指定图像的路径

设置大小 <img width="200" height="200" src=" "/>

采用的手段是放在div中居左，中，右

<div align="left">

<img width="200" height="200" src=" "/>

</div>

如果图片不存在，默认会显示一个缺失图片，这是不友好的
所以可以加上alt属性。
当图片存在的时候，alt是不会显示的
当图片不存在的时候，alt就会出现

<img src="http://how2j.cn/example_not_exist.gif" />

<br/>

<img src="http://how2j.cn/example.gif" alt="这个是一个图片" />

<br/>

<img src="http://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />

11.超链

<a>标签即用来显示超链

完整元素是

<a href="跳转到的页面地址">超链显示文本</a>

在新的页面打开超链 :属性target

超链上提示文字

在网站中的链接上，如果使用了 target="_blank"，就要带上 rel="noopener"，并且建议带上 rel="noreferrer"。类似于这样：

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer">进入一个“邪恶”的网站</a>
复制代码

当然，在跳转到第三方网站的时候，为了 SEO 权重，还建议带上 rel="nofollow"，所以最终类似于这样：

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">进入一个可能“邪恶”的网站</a>

12.表格标签

<table>标签用于显示一个表格

<tr> 表示行 row
<td> 表示列又叫单元格 data

<!--两行两列表格-->
<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>         
      <td>4</td>
  </tr>

如何带边框的表格？

设置属性border <table boder="1">

设置table宽度?

设置table的属性 width , px即像素的意思。<table boder="1" width="200px">

单元格宽度?

绝对值

设置td的属性width

相对值

设置td的属性width为百分数

背景色？

设置tr或者td的属性bgcolor

  <table border="1" width="200px">
  <tr bgcolor="aqua">
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td bgcolor="crimson">3</td>
      <td>4</td>
  </tr>
  </table>

效果对比

13.无序列表标签<ul>和有序列表标签<ol>

无序列表 每个列表项始于 <li>。

<ul>
	 <li>国安</li>
	 <li>恒大</li>	
  </ul>

2. 有序列表

<ol>
	 <li>国安</li>
	 <li>恒大</li>	
  </ol>

14.块标签<div>和内联元素<span> 以及他们的区别

<div>

<span>

这两种标签都是布局用的

这种标签本身没有任何显示效果

通常是用来结合css进行页面布局

<img style="margin-left:50px" src="http://how2j.cn/example.gif"/>
  <br/>
 <img style="margin-left:50px" src="http://how2j.cn/example.gif"/>
 
<div style="margin-left:100px" >
 <img src="http://how2j.cn/example.gif"/>
  <br/>
 <img src="http://how2j.cn/example.gif"/>
</div>

15.字体元素

font常用的属性有 color和size, 分别表示颜色和大小

运行效果

<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>

16.内联框架

<iframe src="http://www.baidu.com/" width="600px" height="400px">
</iframe>

HTML（一）基本元素

1.第一个例子

解释

2.中文问题

3.属性

4.注释

5.粗体

6.斜体

7.预格式

8.删除效果

9.下划线

10.显示图像

11.超链

12.表格标签

13.无序列表标签<ul>和有序列表标签<ol>

14.块标签<div>和 内联元素<span> 以及他们的区别

15.字体元素

16.内联框架

14.块标签<div>和内联元素<span> 以及他们的区别