前端入门之HTML

gzqd2018
1,589 阅读6分钟

很高兴你能来到这里和大家一起学习前端技术。有过了解的同学可能知道前端的技术点非常的多。所以很多的同学在自学的时候往往不知道从何入手。其实在我看来，前端的技术点多。但是总结起来重点就是三大件。HTML、CSS、JavaScript

HTML

HTML（Hyper Text Mark-up Language ）即超文本标记语言，是用于描述网页文档的一种标记语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

JavaScript

是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

正所谓万丈高楼平地起，我们要学习前端的技术，我们都应该从最基础的部分开始入门，而HTML和CSS是作为我们入门前端的最基础，也是我们需要掌握的基本的技能点。接下来的系列文章中我会以项目的形式向大家讲述HTML和CSS中的基本的一些技能点。那我们先从HTML开始吧！！！大家加油哦！！！

接下来我们会先学习一些前端入门的一些基础的知识。然后我们使用这些知识完成一个基本的网页的制作。


要完成这样的一个网页我们需要具备一些基础的HTML和CSS知识。接下来在这里我先给大家介绍一些基本的常用的HTML的基础知识。后续我们再去讲解CSS的知识。

前端入门之HTML

对于HTML的概念我们就不在这里过多的去赘述了。在这里我们主要给大家介绍HTML的基本的知识。而学习HTML我们需要重点掌握以下的两个重要的知识。
1. HTML的基本结构
2. HTML中的常用标签

HTML的基本结构

html主要是用来控制页面的结构。就如同我们上学的时候写作文一样，HTML也有自己的基本的结构。
<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

html实际使用起来是非常简单的。而我们学习HTML实际上就是学习HTML中大量的标签。我们是通过一个个的标签来向浏览器传达我们要表达的意思。所以接下来我们一起去学习HTML的标签。

标题标签

 <!--以下是h1到h6标签,h1字体最大，h6字体最小，一般用于标题-->
 <h1>传智播客•黑马程序员</h1>
 <h2>传智播客•黑马程序员</h2>
 <h3>传智播客•黑马程序员</h3>
 <h4>传智播客•黑马程序员</h4>
 <h5>传智播客•黑马程序员</h5>
 <h6>传智播客•黑马程序员</h6>

段落标签

<p>传智IT培训,课程设置无缝对接企业用人需求,轻松胜任工作!来传智学编程,做被企业需要的编程开发人才!靠不靠谱你来判断!</p>

超链接a标签

超级链接<a标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像。

a标签的基本使用：页面的跳转<a href="http://www.itcast.cn">传智播客</a>

列表

  1. 无序列表

    <ul> : unordered lists的缩写，即无序列表。

    <ul>
    <li>首页</li>
    <li>秒杀</li>
    <li>优惠劵</li>
    <li>网上商城</li>
</ul>

ul标签的属性：
        disc：实心圆(默认值)
        circle：空心圆
        square：实心矩形
        none：不显示标识

  2. 有序列表

    <ol>:ordered listsde的缩写，即有序列表。

    <h3>
    最近热门电影排行
</h3>
<ol>
    <li>蜘蛛侠：英雄远征</li>
    <li>狮子王</li>
    <li>银河补习班</li>
    <li>千与千寻</li>
</ol>

 type：列表标识的类型
        1：数字
        a：小写字母
        A：大写字母
        i：小写罗马字符
        I：大写罗马字符
        注意：列表标识的起始编号默认为1

  3. 自定义列表

    自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始；每个自定义列表项以 <dt> 开始；每个自定义列表项的定义以 <dd> 开始。　

    <dl>
    <dt>支付方式</dt>
    <dd>支付宝支付</dd>    
    <dd>微信支付</dd>
    <dd>现金支付</dd>
	<dd>转账支付</dd>
</dl>


div标签

<div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分,div标签是在页面布局中使用的非常多的一个标签。
这个在后期的项目演示过程中我们也会大量的使用到。
    
    
<div id="content">
    <div class="h_list">关于h标签的内容</div>
    <div class="p_list">关于p标签的内容</div>
    <div class="a_list">关于a标签的内容</div>
    <div class="ul_ol_li">关于ul,ol,li标签的内容</div>
</div>

网页上除了有文字、超链接之外，还会有大量的图片。我们使用<img/>标签在网页中插入图片。

图片标签的语法：
　<img src="图片路径" alt="图片加载失败是显示的内容" title="提示信息"/>

使用：
<img src="images/美女.jpg" alt="中国第一美女" title="美女图"/>

span标签

span 标签可以单独摘出某一块内容，多用于处理文本。

<span>文本内容</span>

文本格式化标签

文本加粗：<strong></strong>文本斜体：<em></em>文本下划线：<ins></ins>文本删除线：<del></del>


avatar
文章
阅读
粉丝