H5零基础学习日记02-HTML

作者: LonelyBanana | 来源:发表于2016-07-06 17:06 被阅读574次

H5零基础学习日记02-HTML
H5零基础学习日记01-HTML
02-HTML基础标签
零基础学习UI设计电脑需要什么配置
深度学习
零基础如何学习 java?
Js基础知识学习-----from 米升亮
2020-04-01
大数据学习路线
#UI设计师王庆庆#零基础如何规划学习UI设计？

<h5>继续学习HTML吧，基础的东西必须打牢固，如果没看过H5零基础学习日记01的同学可以出门右拐，可以先去看看接下来大香蕉来了<h5>

孤独的香蕉.png

<h6>切入正题，继续HTML的标签之标题<h6>
HTML的标题的写法是<h1>我是大标题</h1> 从h1->h6都有不同的效果

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是大香蕉</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>

2A6B0725-2916-442B-ADF0-676E8C52354B.png

这是这几个标签的效果，每个标签的大小都不同，老爷们可以根据自己的心情随便挑选。还有<p>我是大P标签，我代表段落</p>p标签的作用就是定义一个段落如。

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是大香蕉</title>
</head>
<body>
我是孤独的大香蕉
我很帅

<p>我是孤独的大香蕉</p>
我很帅
</body>
</html>

10911157-57FE-40AD-9973-E391157586BB.png

效果老爷们自己对比看一下吧，所谓段落我的理解丫就是给换行了。（天才！）如果你们理解的不一样来啊互相伤害！

<h5>接下来这个标签厉害了：
<a>a标签</a>这个家伙可厉害了，可以放个超链接比如

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是大香蕉</title>
</head>
<body>
<a href="http://www.jianshu.com/users/008b8913a130/latest_articles">孤独的香蕉简书首页</a>

</body>
</html>

3D2A8464-7B68-46F4-959C-14549A2BE726.png

<h4>各位老爷这一步很重要，请把我的代码粘贴到你们的编辑器里面，保存然后把后缀改成.html点开，然后点击出现的文字，接下来点击关注！_{神奇吧，你就已经关注我了！}~这就是a标签神奇之处。

<h5>HTML换行标签<br/>这玩意就是换行用的,体会下区别<h5>

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是大香蕉</title>
</head>
<body>
<p>我是孤独的香蕉</p>
我是孤独的香蕉<br/>
帅的不行

</body>
</html>

1E1476A5-D325-4EF8-86D2-62D09ED57645.png

HTML的嵌套
HTML的标签是可以嵌套的，老爷们可以自己去试验一下

<p><a>我是孤独的香蕉</a></p>

HTML属性
HTML属性是啥玩意呢？别急各位老爷们如果跟着我把刚刚的代码都试验过了，那么你们已经用过属性了，记得a标签的时候让你们点击有下划线的文字不？忘了也没关系（忘性真大）

<a href="http://www.jianshu.com/users/008b8913a130/latest_articles">孤独的香蕉简书首页</a>

就是这个，href="http://www.jianshu.com/users/008b8913a130/latest_articles"这玩意看到没，就是a标签的属性啦，简单不？厉害不！

接下来常用的属性
<h1>的align 对齐方式

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是大香蕉</title>
</head>
<body>
<h1 align="center">我是孤独的香蕉</h1>//中间
<h1 align="left">我是孤独的香蕉</h1>//居左
<h1 align="right">我是孤独的香蕉</h1>//居右
</body>
</html>

这个截图太大了，我懒得截图了，老爷们自己试试吧！~~
一些常用的属性还有很多比如body的background还有a标签的target

<body bgcolor="red">

一片姨妈红有没有！~~

接下来的target这个标签可就厉害了！它是a标签的属性所以厉害的不行！老爷们自己意会吧！~~

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是大香蕉</title>
</head>
<body>
<a href="http://www.jianshu.com/users/008b8913a130/latest_articles" target="_blank">孤独的香蕉简书首页 </a>
<br/>
<a href="http://www.jianshu.com/users/008b8913a130/latest_articles" target="_self">孤独的香蕉简书首页 </a>

</body>
</html>

接下来是一些通用的属性class(元素的类名)、id(元素的唯一id)、style(元素的样式)、title(元素的额外信息)这些属性其实都是后面咱们如果用到CSS或者JS的时候可以根据这些东西引用过来而拿到这些HTML的标签然后就可以用CSS或者JS对他们做坏事了。

格式化

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我是大香蕉</title>
</head>
<body>
<b>孤独的香蕉</b>
<br/>
<em>孤独的香蕉</em>
<br/>
<i>孤独的香蕉</i>
<br/>
<small>孤独的香蕉</small>
<br/>
<strong>孤独的香蕉</strong>
<br/>
孤独<sub>的</sub>香蕉
<br/>
孤独<sup>的</sup>香蕉
<br/>
<ins>孤独的香蕉</ins>
<br/>
<del>孤独的香蕉</del>
<br/>
</body>
</html>

CA9AA4EC-446D-4759-9084-29028226B0DA.png