HTML基础用法一

最新推荐文章于 2024-08-26 17:24:20 发布

啾啾⁣

最新推荐文章于 2024-08-26 17:24:20 发布

阅读量440

点赞数 2

本文链接：https://blog.csdn.net/weixin_45846863/article/details/103243120

版权

HTML基础用法一

今天是我自学HTML的第一天，希望将所学到的东西发表在CSDN上，希望看到的人可以帮我指正，有什么不对的地方可以让我加以改之，希望自己能一点一点在纠正错误中进步。

什么是HTML?

HTML 是用来描述网页的一种语言。
特点：
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language)；
2.HTML 不是一种编程语言，而是一种标记语言 (markup language)；
3.标记语言是一套标记标签 (markup tag)；
4.HTML 使用标记标签来描述网页。

那么HTML标签又是什么呢？

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
特点：
1.HTML 标签是由尖括号包围的关键词，比如
2.HTML 标签通常是成对出现的，比如和
3.标签对中的第一个标签是开始标签，第二个标签是结束标签
4.开始和结束标签也被称为开放标签和闭合标签

知道了以上两个知识，相信大家一定知道HTML其实就是用来描述网页的一种语言，这种语言通常使用标签来完成，当然，要想展示出网页，就得选择合适的编译器，下来就让啾啾给你介绍一些很好用的编译器，适合新手学习呦（我也是新手，用的就是这个编译器，很好用的）！！！
1.Notepad++：https://notepad-plus-plus.org/
2.Sublime Text：http://www.sublimetext.com/
3.HBuilder：http://www.dcloud.io/
详解：
1.Notepad++：https://notepad-plus-plus.org/
Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能。
使用步骤：
（1）新建HTML文件
在 Notepad++ 安装完成后，选择" 文件(F)->新建(N) "，在新建的文件中输入所要编写的代码。
（2）另存为HTML文件
当保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。
（3）在浏览器中运行这个 HTML 文件
其余两个与这个类似，在这里不做过多介绍，如果是新手，建议大家和我一样选择第二个Sublime Text：http://www.sublimetext.com/。
接下来，开始我们的学习吧！！
1.HTML实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器的标题</title>
</head>
<body>
......
</body>

（1)<html></html>为根标签，中间嵌套一个<head></head>(编译给浏览器看的）和一个<body></body>(给用户看的);
(2)<meta charset="utf-8"> 中的charst为编码字符节，uft-8为常用的万国码（可以识别各种字体，常用的还有unicodo(也叫做万国码）、gbk(这个是繁体专用的国家标准扩展版本）等等）；
（3）<title><title>内容为浏览器的标题；
（4）<body></body>中的内容在网页中显示；
2.html标签
（1）<p></p>为段落标签（块级元素），成段表示，p是paragraph的缩写；

<p>这是一个段落</p>
<p>这是另一个段落</p>

(2)html的标题通常是用<h1>-<h6>来实现的

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
   ......
<h6>这是一个标题</h6>

字体自上而下逐渐减小，独成一段，加粗字体。
（3）<strong></strong>这个为加粗标签；
（4）<em></em>这个为斜体标签；
（5）<del></del>这个是中划线；
（6）<address></address>加粗，斜体标签，与<strong></strong>和<em></em>两个标签嵌套在一起的效果一样；
（7）<div></div>和<span></span>都代表容器的意思；div代表一个标签，那如果我想要展示的内容为div，这个时候该怎么办呢？这个时候用这个形式<div&gt来替换，就可表示出来；
（8）html的空格，当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。所以通俗的说在编译器中无论你用多少个空格（包括换行，空格字符）把想要的东西分隔开，最后在页面上总是只会呈现一个空格符。这个时候需要使用&nbsp(这个是空格的展现形式）；
（9）<br>回车换行，没有结束标签；
（10）<hr>水平线，没有结束标签；
（11）<a></a>链接标签；
例如：

<a href="www.baidu.com>这是一个百度链接</a>

这个在网页中点开之后，点击“这是一个链接”就会跳转到百度的页面，至于要跳到哪一个网页，你需要自己在开始标签中标明，上述例子为百度的页面；若想要再点击链接后跳转至另一个页面打开，在开始标签中添加一个target="_blank"即可；
（12）<img>这个标签为图片标签

<img src="  ">

src其实是source,也就是图片资源的意思；
而" "里面的内容为图片的资源地址，资源地址有三种获得方式
1.网上的url;
2.本地的绝对路径；
3.本地的相对路径；
而且在图片中也可添加图片占位符alt=" ",和图片提示符title=" ".
(13)html的注释

<!--这是一个注释-->

注释一般不会展现在网页中展示，只是为了方便程序员改正错误和标明所要写的内容解释；
（14）有序列表(order list)

<ol>
   <li>...</li>   <!--列表项-->
   <li>...</li>
   <li>...</li>
</ol>

既然是有序列表，当然是按顺序进行，列表前面会有带又顺序的符号，这个时候就必须用到<ol type=" ">来表示，" "中只有五个要素可以写，分别为A/I/1/i/a;但如果添上一个reversed="reversed"就成了倒序排列；
(15)既然有有序列表，那么肯定有无序列表（unorder list)

<ul>
   <li>...</li>   <!--列表项-->
   <li>...</li>
   <li>...</li>
</ul>

既然它是无序列表，当然它就没有顺序了，但是它又有符号来表示它的列表<ul type=" "， " "中可以填写disc(小圆点）、square(小方块点）；
（16）<sub></sub>定义下标字；
（17）<sup></sup>定义上标字；
（18）<ins></ins>定义插入字；
（19）<small></small>定义小号字；
（20）html表格

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题
`<th>`	定义表格的表头(文字加粗）
`<tr>`	定义表格的行
`<td>`	定义表格的单元
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚
`<col>`	定义表格的列属性

先定义一个简单的表

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <table border="1">
            <tr>
                <th>水果</td>
                <th>水果</td>
                <th>水果</td>
            </tr>
            <tr>
                <td>asd</td>
                <td>asd</td>
                <td>asd</td>
            </tr>
        </table>
    </body>
</html>

其中<table border="1">指的是有边框，若没有这个，则表格无边框。
属性：align,dir,width,height
表格标题：<caption>标题</caption>
表格宽度，高度：eg:<table border="1" width="100" height="100"></table>
表格背景：bgcolor,background,bordercolor
表格空间：cellspacing 属性-定义表格单元格之间的空间
cellpadding 属性-表示单元格边框与单元格内容之间的距离
（其中表格背景，空间，高度宽度在HTML5中不使用）
合并单元格：
若要将两个或多个列和为一列，使用colspan属性；
若要合并两行或多行，则使用rowspan属性。
比如：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表格</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>