HTML入门

最新推荐文章于 2025-05-05 14:47:36 发布

liu_wenbin

最新推荐文章于 2025-05-05 14:47:36 发布

阅读量417

点赞数 1

分类专栏：前端入门文章标签： html

本文链接：https://blog.youkuaiyun.com/liu_wenbin/article/details/75905546

版权

前端入门专栏收录该内容

1 篇文章

订阅专栏

什么是HTML
HTML文件结构
HTML标签

什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
所谓的超文本就是指页面内可以包含图片、链接、甚至音乐、视频等非文字元素。

HTML常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。

HTML文件结构

这里写图片描述
上图展示的是html文件简单的结构图，具体可以写成下面这样：

<html>
    <head>
            <title>.....</title>
    </head>
    <body>
            <p>.....</p>
    </body>
</html>

前面说过，HTML是一种标记语言，这些<..>就叫做标签，而HTML就是使用这些标签来描述网页的。了解大体结构以后，后面我们会学习HTML的标签。

HTML标签

标题
Heading 是通过 < h1> - < h6> 等标签进行定义的。

<h1>This is first heading</h1>
<h2>This is second heading</h2>
<h3>This is third heading</h3>
...

段落

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

链接

<a href="http://www.baidu.com">This is a link</a>

图片

<img src="图片地址" width="150" height="200" />

也可以

<img src="图片地址" width="150" height="200" alt="下载失败时的替换文本" title = "提示文本">

输入框

 <input type="text/password" name="名称" value="文本" />

当 type=”text” 时，输入框为文本输入框
当 type=”password” 时, 输入框为密码输入框

单/复选框

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

当 type=”radio” 时，控件为单选框，同一组单选框 name 命名要一致
当 type=”checkbox” 时，控件为复选框

提交按钮

 <input type="submit" value="提交">

重置按钮

<input type="reset" value="重置">

下拉列表框

<select>
  <option value ="读书">读书</option>
  <option value ="写字">写字</option>
  <option value="码代码">码代码</option>
</select>

标签

<label for="控件id名称">

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同，如：

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

表格

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

其中，<tr>表示行， <td>表示列

换行<br />
水平横线 <hr />
空格  
注释

只写了本人目前常用的。详细的可以参考
HTML参考手册