第二篇-HTML入门

作者: 涂涂小排屋 | 来源:发表于2016-10-16 23:06 被阅读89次

第二篇-HTML入门
前端入门系列
史上最全面的web前端学习资料
web前端开发学习网站大全
#30天专注橙长计划#向前端工程师进发#day0#航线设计
带你零基础学习HTML5
HTML笔记9：HTML入门
机器学习入门——实战篇之监督学习
flask框架搭建api
适合前端开发的书籍

1、HTML基础的基础**

1.1 什么是HTML：

全称Hypertext Markup Language：超文本标记语言，主要是用来写页面结构，定义每个页面是什么。HTML写出来的代码仅仅能将页面中的列表、输入框、图片、超链接、按钮等信息呈现出来，但效果也是很辣眼睛的。。.

1.2 HTML使用什么工具？

sublime text2很适合入门者使用的工具。

1.3 HTML标准

sublime text2输入以下代码

<!DOCTYPE html> 
<html>
<head>
    <title>我爱这个世界</title>
    <meta charset=utf-8>
</head>
<body>hello world

</body>
</html>

以下是对每段代码的说明。

!DOCTYPE html

（声明文档类型是HTML，写在整个文档第一行）

<head>...</head>

（head标签中用于加入各种标记和属性标签）

charset="UTF-8"

（页面编码格式是UTF-8）

<title>...</title>

（页面title是：我爱这个世界，当然，title可以自由设置）

<body>...</body>

（页面所有信息，比如图片、文字、超链接都加入在body中）

总之，每个HTML文档中，都需要输入这段代码，具体的值可以根据自己所需的情况设定。（其实有些概念还有些模糊，但先这样写下去呗~）

1.3 HTML文件框架

1.3.1 段落标记：

<p>这是第一段</p>

<p>这是第二段</p>

p（paragraph）是分段标记，在HTML中，一般会用（小于< ）（标记 p ）（大于 > ）对字符进行标记，在结尾处加上（小于< ）（斜线/）（标记 p ）（大于 > ），表示到此为止，标记结束。

1.3.2 段落标记

<br>这是第一行
<br>这是第二行

br是换行标记，加入这个标记后，从标记后的第一个字开始的段落，会另起一行显示。br标记比较特殊，只需要加前面部分（小于< ）（标记 b ）（大于 > ），结尾处无需加（小于< ）（斜线/）（标记 b）（大于 > ）。

在HTML中，回车键和空格键不是表达的我们常用的编辑器的换行和空格效果。所以，在处理这些效果时，都需要加入特殊的标记。

1.3.3 标题

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

h1\h2\h3\h4\h5\h6分别代表的是一级标题到六级标题，每级标题显示的大小和粗细效果均不一样，一级标题最大最粗，六级标题最小最细，以此类推。

2、基础格式

2.1文字格式

<b>  这是加粗</b>
<i> 这是斜体</i>
<tt> 这是等宽西体</tt>
<small> 这是小点的字体</small>
2<sup>上标</sup>+9<sub>下标</sub>
<mark> 这是高亮</mark>

文字格式标签比较多，这里只是部分，每个标签的效果均在代码中直接写出来了。

有个比较有意思的上标和下标的效果，效果如下：2^上标+9_下标，一般在数学或者商标^️中使用较多。

另外，mark的效果是高亮显示，这里仅表达的是高亮这个命令，具体高亮的样式再HTML中不表达，如果有特殊需求，需要用CSS进行补充。

2.2段语格式

<em>这是强调</em>
<strong>这是着重</strong>
<code>这是代码样式</code>

<samp>例子代码</samp>
<kbd>kbd用户输入</kbd>
<var>variable变量</var>
<cite>cite引用</cite>

以上这些标记意思均在代码中表达了，目前只是测试看了一些效果，具体的使用场景还需要在真正写页面时才知道如何使用。

3、深入格式

3.1.HTML标记的属性

3.1.1 HTML属性：

<hr>
<hr width=50%>
<abbr title=中华人民共和国>  点击这里的时候显示注解</abbr>

hr不是公司的hr，是分割线的意思；这里也不需要在尾部加上</hr>，因为这个标记本身就是一个样式效果。
hr width=50%（分割线长短）

abbr（表示注解），abbr title=中华人民共和国（表示注解内容为『中华人名共和国），这里需要加上尾部标记。

3.2.列表与图片

3.2.1 列表

<ul>
<li>这是一</li>
<li>这是二</li>

<ol>
<li>这是1</li>
<li>这是2</li>
<li>这是3</li>

ul（项目符号<b>·</b>），li（每个项目标记）
ol（项目编号1. 2.），li（每个编号计数）

3.2.2 图片：图片是一个字符

<img src=“xxx.jpg" >
<img src=“xxx.jpg" width=50% height="200">
<img src=“xxx.jpg” alt=“图片未加载出来时，显示出来的字样” >

img src=“xxx.jpg" （图片取自本地文件名为xxx.jpg）
img src=“xxx.jpg" width=50% height="200"（图片宽高比）
img src=“xxx.jpg” alt=“图片未加载出来时，显示出来的字样”（图片未加载出来时，显示出来的字样）

在HTML中添加图片时，除了可用本地图片，还可以直接使用网络图片地址。但为了防止对方将图片删除引起当前页面图片失效，建议都将图片存储到本地后，再引用。

另外，目前图片可使用格式：jpg\gif\png

3.2.3 iframe

<iframe src="http://zhihu.com" width=800></iframe>

在当前页面中，插入zhihu.com这个网站，且可直接在当前页面进行浏览使用。

3.3.超链接

3.3.1 超链接

<a href="http://huaban.com/pins/882969860/">进入花瓣</a>
<a href="http://huaban.com/pins/882969860/“ target=_blank>进入花瓣</a>

a是指超链接， href超链接地址；
a href="http://huaban.com/pins/882969860/" target=_blank（进入超链接，且打开新页面）

3.3.2 页面内链接

<p id=xxxx>
<a href=“#xxx"> 点击这里跳转到xxx位置所在段落</a>
<a href=“xxx.html#xxx"> 点击这里跳转到xxx页面的xxx位置所在段落</a>

注释直接写在代码中了~

3.3.3 图片定位链接

3.4 表格

前面
<table border="1”>
    <caption> 表格title </caption>
    <thead>
    <tr>
        <th>os</th>
        <th>chinese</th>
        <th>french</th>
    </thead>
    </tr>

    <tr>
        <td>ios10</td>
        <td>yes</td>
        <td>tes</td>
    </tr>

    <tr>
        <tfoot>
        <td colspan="3">hahahaha</td>

    </tr></tfoot>

</table>
后面