HTML介绍

ttt明亮

已于 2024-07-09 13:07:11 修改

阅读量659

点赞数 11

文章标签： java 前端

于 2024-07-09 11:48:26 首次发布

本文链接：https://blog.csdn.net/m0_54394402/article/details/140287480

版权

1 HTML简介

1.1HTML简介

HTML :超文本标记语言(HTML HyperText Markup Language )。

HTML文档是一个放置了标记（tags）的.html文件（.htm）。是一种客户端浏览器解释的语言，不用经过编译。

HTML语言是通过各种标记来标识文档的结构，以及标识超链接、图片、文字、段落、表单等信息。

1.2 前端开发工具

VSCode
Visual Studio Code (简称 VSCode / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作……
Sublime
此编辑器同时支持Windows、Linux、Mac OS X等操作系统。他的运行界面十分整洁美观、文本功能也是很强大，运行速度超快，非常适合编写代码，写文章做笔记。它还支持众多插件扩展，实现强强联手，比如说：Emmet插件、JsFormat、SideBarEnhancements、TrailingSpaces、Tag等。
WebStorm
这款JavaScript开发工具，相信作为JS开发者的你一定知道，它可是被称作"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"，功能主要包括：JavaScript,编辑语言,创造便捷的环境等，相信你一定烂熟于心了，在这里就不一一赘述了
HBuilder
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

2.HTML语法

2.1HTML文档基本结构

2.2 HEAD部分的HTML标签

1.标题标签

<title>我的第一个html文件</title>

2.meta标签：设置字符集为utf-8

2.3 BODY部分HTML标签

1.标题标签（块级标签：独占一行）

<h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>

2.段落标签（块级标签：独占一行）

<p>这是一个段落标签</p>

3.换行标签

<p>这是一个段落标签。<br>这个段落的内容是：如何更好的学习html</p>

4.图片标签（内联标签，部独占一行）（单标签）

<img src="img/qiu.jpg" alt="秋天的景色" title="秋天的景色">

5.超链接标签（内联标签：部独占一行）

<a href="http://www.baidu.com">跳转到百度</a>

6.列表标签（无序列表与有序列表）

1)无序列表

<ul>
<li>HTML语言</li>
<li>CSS样式表</li>
<li>javaScript语言</li>
</ul>

2)有序列表

<ol>
<li>HTML语言</li>
<li>CSS样式表</li>
<li>javaScript语言</li>
</ol>

3)定义列表

<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言，控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，控制网页的行为</dd>
</dl>

7.表格标签(用于显示表数据，基本结构如下）

<table border="1">
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td>这是第一行第一列</td>
<td>这是第一行第二列</td>
</tr>
<tr>
<td>这是第二行第一列</td>
<td>这是第二行第二列</td>
</tr>
</table>

2）表格合并：表格合并中两个重要属性：

.colspan:合并列

.rowspan:合并行

<table border="1">
<tr>
<td colspan="2">这是第一行第一列</td>
<td>这是第一行第三列</td>
</tr>
<tr>
<td rowspan="2">这是第二行第一列</td>
<td>这是第二行第二列</td>
<td>这是第二行第三列</td>
</tr>
<tr>
<td>这是第三行第二列</td>
<td>这是第三行第三列</td>
</tr>
</table>

8.from表单

<form action="XXXX" method="get">
… … …
</form>

9.表单常用控件

1).文本框

<input type="text" placeholder="用户名" value="zhangsan" />

2).密码框

3).单选按钮

<input type="radio" name="sex" value="0" checked="true"/>男
<input type="radio" name="sex" value="1"/>女

4).复选框

<input type="checkbox" name="like" value="0" checked=" true" />读书
<input type="checkbox" name="like" value="1" />体育
<input type="checkbox" name="like" value="2" />游戏

5).下拉列表

6).文件域

7).文本域

<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>

8).提交按钮

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

9).重置按钮

10).普通按钮