HTML入门

新科日记

已于 2024-05-27 11:02:16 修改

阅读量920

点赞数 21

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

于 2024-05-13 15:58:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51689532/article/details/138806504

版权

前端专栏收录该内容

6 篇文章

订阅专栏

一、HTML简介

html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。

超文本：音频，视频，图片，称为超文本。
标记：<英文单词或字母>称为标记，一个html页面都是由各种标记组成。
普通文本：自包含文字。

html是负责描述文档语义的语言，html语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。

html发展历史：

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML 4.0：1997年12月18日，W3C推荐标准。
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

html实例：

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <title>实例</title>

</head>

<body>

   <h1>我的第一个标题</h1>

   <p>我的第一个段落。</p>

</body>

</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

二、入门软件下载

上面已经介绍了HTML，接下来就是去学习掌握。在掌握之前需要先下载个成手的工具，老话说：工欲善其事，必须利其器。虽然用txt都能修改，但是不至于到哪一步，我们要的是效率这也节省时间，大家知道就行了。

Sublime Text

官网：https://www.sublimetext.com

自行去官网下载安装，无需注意版本。

使用步骤：

打开软件，新建文件

点击Plain Text 选择html

快捷创建h5初始代码

出现如下代码就可以了

三、HTML标签 & 标签属性

HTML标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML属性是HTML 标签提供的附加信息

HTML 标签可以设置属性
属性可以在标签中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"

语法：<标签属性名="属性值">内容</标签>

1、标题

语法：<h1~6> （1到6字体越来越小）

特点：自动换行，加粗。

属性：

align：对齐方式
- left：左
- center：中
- right：右
- justify：两端对齐
title：鼠标停留，弹出标题提示
dir：文本方向
- ltr：从左到右（默认值）
- rtl：从右到左

2、段落

语法：<p>

特点：自动换行。

属性：

align：对齐方式
title：鼠标停留，弹出标题提示
dir：文本方向

3、超链接

语法：<a>

特点：非自动换行。

属性：

href：跳转地址，值可以具体的域名或IP地址，也可以是具体资源路径（图片会展示，文件会下载），还可以作为锚链接使用#id名称定位到id名称所在的标签位置
target：指定在何处打开
- _blank：在新的窗口打开
- _self：在当前窗口打开
title：鼠标停留，弹出标题提示

4、行内容器

语法：<span>

特点：非自动换行。

属性：

title：鼠标停留，弹出标题提示

5、字体

语法：<font>

特点：非自动换行。

属性：

title：鼠标停留，弹出标题提示
color：字体颜色
size：字体大小，值1到7
face：字体样式

6、加粗

语法：<b>

特点：字体加粗。

7、倾斜

语法：<i>

特点：字体倾斜。

8、下划线

语法：<u>

特点：字体加上下划线。

9、删除线

语法：<del>

特点：字体附上横杠。

10、放大

语法：<big>

特点：字体放大效果。

11、上标

语法：<sup>

特点：字体向上移动。

12、下标

语法：<sub>

特点：字体向下移动。

13、水平线

语法：<hr>

特点：水平直线。

14、换行

语法：<br>

特点：换行。

15、图片

语法：<img>

特点：非自动换行。

属性：

width：宽度，单位px（可以省略）
height：高度
title：鼠标停留，弹出标题提示
alt：加载失败展示内容

16、列表

无序列表

语法：

    <ul>

      <li></li>

    </ul>

特点：自动换行，没有序号

有序列表

语法：

    <ol>

      <li></li>

    </ol>

特点：自动换行，有数字序号

自定义列表

语法：

    <dl>

      <dt></dt>

      <dd></dd>

    </dl>

特点：自动换行，没有序号，有标题（dt）。

17、表格

语法：

<table>

      <tr>

      <th></th>

      </tr>

      <tr>

      <td></td>

      </tr>

  </table>

特点：自动换行，th是表头同样用td当做表头也是可以。

属性：

align：对齐方式，可以用在table，tr，th，td
border：边框宽度，用在table
width：宽度，用在table，td
height：高度，用在table，td
valign：垂直对齐方式，用在tr
- top：上
- middle：中（默认）
- bottom：下
colspan：横向合并，用在td
rowspan：纵向合并，用在td

18、文本框

语法：<input>

特点：非自动换行。

属性：

type：输入框类型，这个标签根据type="button"也可以作为按钮，输入的值不存在默认是文本
- text：文本
- password：密码
- email：邮箱
- url：网址
- number：数字
- range：滑块
- time：时间
- date：日期
- color：颜色
- radio：单选
- checkbox：多选
- hidden：隐藏
- button：普通按钮
- submit：提交按钮
- reset：重置按钮
- file：文件按钮
name：对应参数名称，用于表单提交数据
value：对应输入值，当type为按钮时，value为按钮上的文字
placeholder：提示信息
maxlength：支持输入最大长度
minlength：支持输入最小长度
autofocus：自动获取焦点
disabled：禁用状态
readonly：只读状态

19、下拉列表

语法：

    <select>

        <option></option>

        <option></option>

        <option></option>

    </select>

特点：非自动换行。

属性：

selected：默认选中，作用在option
name：对应参数名称，用于表单提交数据，作用在select
disabled：禁用状态，作用在option

20、文本域

语法：<textare>

特点：非自动换行。

属性：

name：对应参数名称，用于表单提交数据

21、表单

语法：<form>

特点：自动换行。

属性：

action：发送数据的地址
method：提交方式
- get：用于Get请求的接口，请求参数量小
- post：用于Post请求的接口，请求参数量大

22、滚动

语法：<marquee>

特点：非自动换行。

属性：

bgcolor：背景颜色
width：宽度
height：高度
scrollamount：加快速度，单位毫秒
scrolldelay：放慢速度，单位毫秒

23、内联

语法：<iframe>

特点：非自动换行。

属性：

src：url地址
width：宽度
height：高度
name：对应name名称

24、盒子

语法：<div>

特点：自动换行。

25、分组框

语法：

    <fieldset>

       <legend>Personal Information</legend>

    </fieldset>

特点：自动换行，使用 <fieldset> 和 <legend> 可以提高表单的可读性和可访问性。

属性：

disabled：如果设置了这个属性，<fieldset> 中的所有表单控件都会被禁用。
form：指定一个与 <fieldset> 相关联的表单的 id。
name：给 <fieldset> 一个名字（在表单提交时可以使用）。

26、按钮

语法：<button>

特点：非自动换行, 它与 <input type="button"> 相比有更多的灵活性，

因为 <button> 标签可以包含内容如文本、图标、甚至 HTML 元素。

属性：

type：指定按钮的类型
- submit ：提交表单（默认类型）
- reset ：重置表单中的所有输入内容
- button ：不执行默认行为，只用于执行自定义脚本
disabled：禁用

四、HTML标签代码

实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>演示</title>

</head>

<body>

    

    <h1 align="left" id="top">标题h1<h1>

    <h2 align="center">标题h2<h2>

    <h3 align="right">标题h3<h3>

    <h4 align="justify">标题h4<h4>

    <h5 title="你好">标题h5<h5>

    <h6 dir="rtl">标题h6<h6>

    

    <p align="center" title="哈哈">段落1</p>

    <p dir="rtl">段落2</p>

    

    <a href="http:www.baidu.com" target="_self">百度</a>

    <a href="E:\chrome_download\aop-htx3-core-1.4.0.jar">下载cat</a>

    <a href="#top">定位到标题h1</a>

    

    <span title="你好啊">时间就是生命</span>

    

    <font title="帅锅" color="red" size="6" face="黑体">你好今天</font>

    

    <p><b>我</b>有<i>一头小毛驴</i><sup>你好后天</sup><big>但是</big><u>我从来</u><del>不骑</del>,我还有一头<sub>小马驹</sub>，我天天骑它去上学</p>

    

    <hr>

    

    <span>艰苦</span><br><span>舒适</span>

    

    <img src="E:\picture\cat.jpg" width="100" height="100" title="小猫" alt="唉！失败了">

    

    <ul>

        <li>吃饭</li>

        <li>睡觉</li>

        <li>打豆豆</li>

    </ul>

    <ol>

        <li>吃饭</li>

        <li>睡觉</li>

        <li>打豆豆</li>

    </ol>

    <dl>

        <dt>爱好</dt>

            <dd>吃饭</dd>

            <dd>睡觉</dd>

            <dd>打豆豆</dd>

    </dl>

    

    <table border="1" align="center" width="200" height="100" >

        <tr align="right">

            <td width="50">ID</td>

            <td>姓名</td>

            <td>年龄</td>

            <td rowspan="2">职业</td>

            <td>身份</td>

        </tr>

        <tr valign="top">

            <td align="center">1</td>

            <td>李四</td>

            <td>19</td>

            <td colspan="2">学生</td>

        </tr>

    </table>

    

    <input type="text" name="username" placeholder="请输入用户名" maxlength="6" minlength="3" autofocus value="哈哈哈哈哈" disabled>

    <input type="text" name="password" placeholder="请输入密码" readonly>

    

    <select>

        <option>北京</option>

        <option selected>上海</option>

        <option disabled>深圳</option>

    </select>

    

    <textare>今天是2024年05月11号的下午16:49分，我正在写html博客</textare>

    

    <form action="http://www.baidu.com" method="get">

        用户名：<input type="text" name="username"><br/>

        密码：<input type="password" name="password"><br/>

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

    </form>

    

    <marquee bgcolor="pink" width="560" height="20" scrollamount="1000" scrolldelay="1000">在一个风和日丽的中午，突然下起了倾盆大雨，抬头看去好比奥特之光</marquee>

    

    <a href="https://www.baidu.com" target="abc">百度</a>

    <iframe src="http://wuxinke.com/demo" width="200" height="200"></iframe>

    <iframe name="abc"></iframe>

    

    <div>这是一个盒子</div>

   

    <form action="/submit" method="post">

        <fieldset>

            <legend>Personal Information</legend>

            <label for="fname">First name:</label>

            <input type="text" id="fname" name="fname">

            <label for="lname">Last name:</label>

            <input type="text" id="lname" name="lname">

        </fieldset>



        <fieldset>

            <legend>Contact Information</legend>

            <label for="email">Email:</label>

            <input type="email" id="email" name="email">

            <label for="phone">Phone:</label>

            <input type="tel" id="phone" name="phone">

        </fieldset>

        <input type="submit" value="Submit">

    </form>

    

    <button type="submit">Submit</button>

</html>