美文网首页
HTML5 Hello World及标签认识

HTML5 Hello World及标签认识

作者: CoreyJia | 来源:发表于2017-02-20 11:06 被阅读0次

    从工作开始,开始从事android方面的开发,主要开发机顶盒方面, 在工作之余,学习了ios,也独自开发过一个上线的ios项目。
    最近工作不是太忙,于是想再学习一个新的语言,生命在于折腾!
    语言选择了html5,一是现在比较火,二是想自己写点个人页面玩玩

    好了,不叨叨了,开始吧

    开发工具,我选择sublime_text


    sublime_text

    写html页面,可以使用很多工具来写,包括文本文档,当然,为了效率,我们需要选择一个有自动补全,有格式化,有不同颜色标识的工具,具体使用哪个,大家只要用的顺手就行,这里就以sublime_text为例,这个是跨平台的,什么系统都可以使用

    首先可以新建一个文件,文件类型修改成html,然后选择sublime打开,输入<html 就会有提示,按tab键会自动补全

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
    </html>
    

    这是html的基本结构,title是页面标题,body是内容,head里面可以放css和js,后面具体介绍
    现在通过浏览器运行文件,既可看到我们的hello world页面了

    html css js分别是用来干嘛的?

    • HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
    • CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
    • JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

    标签

    <html></html>根标签,所有的网页标签都在<html></html>中。
    <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签
    <body>网页显示主要内容都在<body>标签中,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
    <title>文本</title>标题标签,会在浏览器上显示当前页面标题
    <h1>文本</h1>标题标签,就是字体加粗加大。还有h2,h3-h6等
    <p>文本</p>段落标签,标识一段话
    
    ![](图片地址)图片标签
        1、src:标识图像的位置;
        2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
        3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
        4、图像可以是GIF,PNG,JPEG格式的图像文件。
    
    <!--注释文字 -->注释
    <em>文本</em>斜体
    <strong>文本</strong>粗体
    <span>文本</span>标签是没有语义的,它的作用就是为了设置单独的样式用的。如在<head>标签内定义了
                <style>
                span{
                    color:blue;
                }
                </style>然后在<body>中使用<span>标注的文字就会是蓝色
    <q>文本</q>引用文本,文字会被“括起来
    <blockquote>文本</blockquote>长文本引用,会进行缩进
    <br />分行显示,类似回车
    &nbsp;空格符,在代码中输入多个空格只会有一个空格,需要用空格符表示
    <hr />水平分隔符
    <address>地址</address>地址标签,文字会以斜体表示
    <code>代码</code>代码标签
    <pre>语言代码段</pre>多行代码标签
    <ul> 
            <li>信息</li>
             <li>信息</li>
             ......
    </ul>无序列表标签,  文字前以黑色点开始
    
    <ol> 
            <li>信息</li>
            <li>信息</li> 
            ......
    </ol>有序列表标签, 文字前以1.2.3开始
    <div>…</div>相当于容器标签,假如一个页面按布局可以分为上中下,那么可以用三个<div>进行区分,<div id="top">可以对标签命名进行区分
    
    <table></table>表格标签,整个表格以<table>标记开始、</table>标记结束
    <table summary="表格简介文本">
    <caption>标题文本</caption>描述表格内容,标题的显示位置:表格上方。
    <tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
    <tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
    <td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
    <th>…</th>:表格的头部的一个单元格,表格表头。
    书写:
    <table>
      <caption>标题文本</caption>
      <tbody>
        <tr>
          <th>班级</th>
          <th>学生数</th>
          <th>平均成绩</th>
        </tr>
        <tr>
          <td>一班</td>
          <td>55</td>
          <td>66</td>
        </tr>
        <tr>
          <td>二班</td>
          <td>77</td>
          <td>88</td>
        </tr>
      </tbody>
    </table>
    
    <a  href="http://www.xxx"  title="鼠标滑过显示的文本">链接显示的文本</a>点击实现跳转连接
    <a href="目标网址" target="_blank">click here!</a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。
    

    相关文章

      网友评论

          本文标题:HTML5 Hello World及标签认识

          本文链接:https://www.haomeiwen.com/subject/jfiswttx.html