zoukankan      html  css  js  c++  java
  • 一起入门前端(一)

    初入web前端,一些学习知识同大家分享下:

        首先,web前端主要学习三个部分:HTML、CSS、JavaScript。今天要讲的主角是HTML:

          先po出一张HTML文件结构图:

        接着,咱们聊聊HTML是个what?

            HTML是用来描述网页的一种语言,指的是超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,使用标记标签来描述语言。标签是由尖括号包围的关键词,通常是成对出现的。

            介绍下常用的关键词:

            HTML标题:是通过H1-H6等标签定义的。ps:具体想呈现在浏览器需要在编辑器中编写完整的html,格式如下,将其保存为.html,使用浏览器打开即可查看效果,下文中不再详细赘述。

    <html>

    <body>

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>

    </body>
    </html>

            HTML段落 :HTML 段落是通过 <p> 标签进行定义的。

    <p>This is is a paragraph.</p>

            HTML链接:HTML 链接是通过 <a> 标签进行定义的,最常用的两个属性:href目标链接地址,target被链接的文档显示位置。

    <a href="http://www.cnblogs.com/sweet12-04/" target="_blank">sweet博客园</a>,打开链接会在新窗口打开,你可以试下不设置target属性的情况

            HTML图像:HTML 图像是通过 <img> 标签进行定义的,最常用的属性:src目标图片地址,alt替换文本属性。

    <img src="../flower.jpg" alt="flower">,当图片地址不正确时,浏览器会显示flower

             有了<a>和<img>,我们就可以制作图片链接了:

    <a href="http://www.cnblogs.com/sweet12-04/"><img src="flower.jpg" alt="flower" /></a>

             HTML表格:HTML表格是通过<table>标签进行定义的,每个表格均有若干行,由 <tr> 标签定义,每行被分割为若干单元格,由 <td> 标签定义,表格的表头是由<th>标签定义的,一些常用属性:colspan,cellpadding,cell spacing。

    <table border="1" >

        <tr>

         <td>第一行第一列</td>

         <td>第一行第二列</td>

        </tr>

        <tr>

          <td>第二行第一列</td>

          <td>第二行第二列</td>

        </tr>

            HTML列表:HTML支持有序,无序及定义列表,无序列表由<ul>标签开始,每个列表项由<li>标签开始,

            <ul>

                <li>html</li>

                <li>css</li>

                <li>javascript</li>

             </ul>

             有序列表由<ol>标签开始,每个列表项由<li>标签开始,

             <ol>

                <li>html</li>

                <li>css</li>

                <li>javascript</li>

             </ol>

            自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。           

            <dl>

                <dt>html</dt>

                <dd>超文本标记语言</dd>

             </dl>

            HTML块元素:大多数 HTML 元素被定义为块级元素或内联元素,块级元素在浏览器显示时,通常会以新行来开始,内联元素在显示时通常不会以新行开始。       

            HTML <div> 元素是块级元素,<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。        

            HTML <span> 元素是内联元素,<span> 元素也没有特定的含义。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

            HTML表单元素:表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签(<form>)定义,常用属性:action,method,。

            <form action="" method="post">

                  <input type="text" name="username" placeholder="username"></br></br>

                  <input type="password" name="password" placeholder="password"></br></br>

                  <input type="submit" name="submit">

            </form> 

             好了,通过对本章的学习,差不多对THML的超文本类型有所了解,但是对于使用HTML还远远不够,大家同我一起努力吧!

  • 相关阅读:
    Basic GC Tuning
    程序员如何少走弯路,更好的提升技术。
    WPF 多线程
    IOC
    一句话概括WPF知识点
    WPF数据绑定 Binding
    WPF命令
    WPF依赖属性
    WPF路由事件
    WPF绘图和动画
  • 原文地址:https://www.cnblogs.com/sweet12-04/p/5502467.html
Copyright © 2011-2022 走看看