HTML+CSS Hello World及标签认识

最新推荐文章于 2023-10-15 13:43:45 发布

sanjiadiankeli

最新推荐文章于 2023-10-15 13:43:45 发布

阅读量678

点赞数

分类专栏： HTML 文章标签： html css html5

本文链接：https://blog.csdn.net/sanjiadiankeli/article/details/56015059

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

好了，不叨叨了，开始吧

开发工具，我选择sublime_text

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

首先可以新建一个文件，文件类型修改成html，然后选择sublime打开，输入

<!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>段落标签，标识一段话

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">图片标签
    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>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。