首页 前端知识 HTML 入门

HTML 入门

2024-06-22 01:06:42 前端知识 前端哥 639 363 我要收藏

1. 什么是 HTML

HTML(Hyper Text Markup Language),超文本标记语言

超文本:比文本要强大,通过链接和交互方式来组织和呈现信息的文本形式,不仅有文本,还可能包含图片、音频、或者自己已经审阅过的学者所加的评注、补充或脚注等

标记语言:由标签构成的语言

HTML 的标签都是提前定义好的,使用不同的标签,表示不同的内容,如以下代码:

上面代码中的 <h1><h2><h3> 就是标签


1.1 认识 HTML 标签

HTML 代码是由 “标签” 构成的,特点如下:

  • 标签名(body)放到 < > 中
  • 大部分标签成对出现,<h1> 为开始标签,</h1> 为结束标签
  • 少数标签只有开始标签,称为 “单标签”
  • 开始标签和结束标签之间,写的是标签的内容
  • 开始标签中可能会带有 “属性” (如:id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码),如下代码
<h3 id="myId">我是三级标题</h3>

1.2 HTML 文件基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题

1.3 标签层次结构

  • 父子关系
  • 兄弟关系
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

其中:

  • head 和 body 是 html 的子标签(html 就是  head 和 body 的父标签)
  • title 是 head 的子标签,head 是 title 的父标签
  • head 和 body 之间是兄弟关系

tip:

可以使用浏览器的开发者工具查看页面的结构

F12 或 鼠标右键检查,开启开发者工具,切换到 Elements 标签,就可看到页面结构细节

标签之间的结构关系,构成了一个 DOM 树,DOM 是 Document Object Mode(文档对象模型)的缩写

1.4 HTML 快速入门

开发工具:Visual Studio Code

在 VS Code 中创建文件 xxx.html,直接输入 ! ,按 Enter 或 tab 键,此时能自动生成代码的主体框架,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在 <body></body> 标签中,任意书写文字,按 Ctrl + s 保存文件,通过浏览器访问即可,如:

1.5 HTML 常见标签

1.5.1 标题标签 h1-h6

从 h1 到 h6,数字越大,字体越小


1.5.2 段落标签:p

在 HTML 中,段落、换行符、空格都会失效,如果需要分成段落,需要使用专门的标签

p 标签表示一个段落

tip:

  • p 标签描述的段落,前面没有缩进
  • 自动根据浏览器宽度来决定排版
  • html 内容首尾处的换行、空格均无效
  • 在 html 中文字之间输入的多个空格只相当于一个空格
  • html 中直接输入换行不会真的换行,而是相当于一个空格

1.5.3 换行标签:br

换行通过 <br/> 标签实现,br 是 break 的缩写,表示换行

br 是一个单标签(不需要结束标签)

br 标签不像 p 标签那样带有很大的空隙

<br/> 是规范写法,不建议写成 <br>,虽然浏览器有很好的 “鲁棒性”,但这里没有问题,不代表后面也没问题


1.5.4 图片标签:img

img 标签必须带有 src 属性,表示图片的路径

<img src="rose.jpg">

此时要把 rose.jpg 这个图片放到和 html 中的同级目录中

img 标签的其他属性:

width / height:控制宽度高度,高度和宽度一般改一个就行,另一个会等比例缩放,否则就会图片失衡

border:边框,参数是宽度的像素,但是一般会使用 CSS 来设定

tip:

  • 属性可以有多个,不能写到标签之前
  • 属性之间用空格分割,可以是多个空格,也可以是换行
  • 属性之间不分先后顺序
  • 属性使用 “键值对” 的格式来表示
关于目录结构:

对于一个复杂的网站,页面资源很多,这种情况可以使用目录把这些文件整理好

1. 相对路径:以 html 所在位置为基准,找到图片的位置

  • 同级路径:直接写文件名即可(或者 ./
  • 下一级路径:image/1.jpg
  • 上一级路径:../image/1.jpg

2. 绝对路径:一个完整的磁盘路径,或者网络路径

  • 磁盘路径 D:/rosr.jpg(最好使用 /,不要使用 \)
  • 网络路径 https://cn.bing.com/images/search?view=detailV2&ccid=wtpfIxZv&id=0EB129930EAA55858F09715E195BAEA0462DF70E&thid=OIP.wtpfIxZvYE3XmBVy7hovYgHaEn&mediaurl=https://img-blog.csdnimg.cn/4dfc7057ff0f406187a2c7def724b99a.png&exph=508&expw=816&q=java&simid=608049172503483542&form=IRPRST&ck=0498F3C0DC5285A86C54AA8EBE301A5A&selectedindex=1&itb=0&ajaxhist=0&ajaxserp=0&vt=0&sim=11

1.5.5 超链接:a

href:必须具备,表示点击后会跳转到哪个页面

target:打开方式,默认是 _self,如果是 _blank 则用新的标签页打开

链接的几种形式:

1. 外部链接:href 引用其他网站的地址

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

2. 内部链接:网站内部页面之间的链接,写相对路径即可

在一个目录中,先创建一个 demo1.html,再创建一个 demo2.html

target 设置为 _blank

3. 空链接:使用 # 在 href 中占位

<a href="#">空链接<a>

用于此处需要插入超链接,但还不知道插入哪个的时候

1.5.6 表格标签

  • table 标签:表示整个表格
  • tr:表示表格的一行
  • td:表示一个单元格
  • thead:表格的头部区域
  • tbody:表格的主体区域

table 包含 tr,tr 包含 td

表格标签中有一些属性,可以用于设置大小边框等,但是一般使用 CSS 方式来设置,这些属性都要放到 table 标签中:

  • align 是表格相对于周围元素的对齐方式,align="center"(不是内部元素的对其方式)
  • border 表示边框,1 表示有边框(数字越大,边框越粗),"" 表示没边框
  • cellpadding:内容距离边框的距离,默认 1 像素
  • cellspacing:单元格之间的距离,默认 2 像素
  • width / height:设置尺寸

快速生成:

    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>10</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </table>

加上属性:

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">

1.5.7 表单标签

表单是让用户输入信息的重要途经,分为两个部分:

  • 表单域:包含表单元素的区域,重点是 form 标签
  • 表单控件:输入框,提交按钮等,重点是 input 标签

1) input 标签

各种输入控件,单行文本框、按钮、单选框、复选框

  • type(必须有),取值种类很多,如:button、checkbox、text、file、image、password、radio 等
  • name:给 input 起了个名字,尤其是对于单选按钮,具有相同的 name 才能多选一
  • value:input 中的默认值
  • checked:默认被选中(用于单选按钮和多选按钮)

常用的类型:

1. 文本框

2. 密码框

3. 单选框

tip:单选框之间必须具备相同的 name 属性,才能实现 多选一 效果

4. 复选框

5. 普通按钮

当前点击了没有反应,需要搭配 JS 使用

6. 提交按钮

    <form action="demo1.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
    </form>

提交按钮必须放到 form 标签中,点击后就会尝试给服务器发送请求

2) select 标签

下拉菜单,option 中定义 selected="selected" 表示默认选中

3) textarea 标签

文本域中的内容就是默认内容,空格也会有影响

rows 和 clos 不会直接使用,都是用 CSS 来改的


4) form 标签
    <form action="demo1.html">
        ...[form 的内容]
    </form>

描述了要把数据按照什么方式,提交到哪个页面中


5) 无语义标签:div & span

div 标签,division 的缩写,含义是分割

span 标签,含义是跨度

类似于两个盒子,用于网页布局

div 是独占一行的,是一个大盒子

span 不独占一行,是一个小盒子

1.6 练习:用户注册

用户注册界面:

代码:

    <h1>用户注册</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
    </table>
    <div>
        <input type="button" value="注册">
        <span>已有账号?</span><a href="#">登录</a><br/>
    </div>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13262.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!