前端学习之html

最新推荐文章于 2024-07-31 15:35:03 发布

m0_73148852

最新推荐文章于 2024-07-31 15:35:03 发布

阅读量40

点赞数

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

本文链接：https://blog.csdn.net/m0_73148852/article/details/130902569

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端入门之html

文章目录

前端入门之html

前言

html基础入门，基本语法及应用。

如有错误，欢迎各位纠正。学习内容来源b站。

一、html是什么

hyper text markup language，超文本标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。可以通过浏览器翻译成可识别的信息，即我们所见到的网页

二、具体内容

1.语法

标签概念：

标签构成 <开始标签>实际内容</结束标签>

双标签：成对出现，有开始有结束，需要确定开始和结束的位置

单标签：只有一个标签不需要结束标签，不需要开始和结束，不需要包裹内容，比如换行

标签关系：嵌套关系（一层套一层）并列关系（同等级别）

标题标签：使用h系列标签代码，h1-h6,重要程度依次递减。自动换行，文字逐渐减小

段落标签： <p> </p>, 段落之间存在间隙（默认存在间隙），独占一行

换行标签：
单标签

水平分割线标签： <hr>，会加出一条横线

文本格式化标签；文字加粗，下划线，倾斜，删除线等效果有两种实现方式（字母，英文全称），如果是重要的，突出强调的语境，就用英文全称这种方式。但两者在表现效果上一致，只有在语境中不同，看需要操作的文字是否重要

1.1媒体标签

1.1-1图片标签：单标签
<img src="" alt="">，可以设置图片的展示效果，src是标签的完整路径

标签的属性写在标签的内部，每个属性之间用空格隔开，属性之间没有先后顺序之分。

alt-alternative 替换文本，当图片加载失败时显示alt中的文本。

title - 当鼠标悬停的时候，会显示title中的文本

width height, 设置其中一个，另外一个没设置的自动等比例缩放

src - 放图片的路径，两种路径

绝对路径，目录下的绝对位置，（盘符开头的D:\）本地的地址各台电脑之间不同用

mac电脑没有c, d盘，没有盘符，从\根目录直接出发

以网址为地址

相对路径，从当前文件开始出发找目标文件的过程，三种写法，同级目录（./表示当前文件夹），下级目录（目标文件在与当前文件同级的文件夹中），上级目录（目标文件和html文件所在的文件夹同级 …/ …表示返回上一级）

1.1-2音频标签
<audio src="" controls="">

controls - 音频控件，可以控制是否播放

autoplay - 是否自动播放（但是部分浏览器不支持）一般不自动播放

loop - 循环播放

1.1-3 - 视频标签

<video src="" >

属性和音频一样 controls autoplay loop，在谷歌浏览器中需要配合muted实现静音自动播放

1.2 - 链接标签

<a href=""> 给超链接起的名字。没有自动换行

href - 超链接的路径

在开发网站初期，还不知道跳转地址的时候，用 # ,表示空链接

超链接标签自带颜色，css可以改其颜色

target - 控制超链接指向的目标网页打开的形式

_self 默认值，在当前窗口跳转，会覆盖原网页

_blank 在新窗口中跳转,会保留原网页

网站的首页面是index.html

1.3 - 列表标签

场景：内容规整，关联性，排序（如热搜）

1.3-1无序列表，有序列表，自定义列表

无序列表 - <ul>

<li> </li>

<li></li>

</ul>

ul - 表示无序列表的整体，用于包裹标签

li - 无序列表的每一项，用于包含每一行的内容,每一行自动在最前面带一个小黑圆圈

ul标签只允许包含li标签，li标签内可以任意嵌套

1.3-2有序列表 -<ol> <li>

会自动给内容加上一个排序的序号

1.3-3自定义列表 <dl> <dt> <dd>

dl - 自定义列表的整体，用于包裹dt/dd标签

dt - 表示自定义列表的主题

dd - 表示自定义列表的针对主题的每一项内容，默认显示缩进效果

1.4 表格标签

<table>- 代表整个表格

<tr >- 代表行

<td>- 代表表格的单元格 (同一行中的元素）

嵌套关系：table > tr > td

属性是集开发时一般使用css设置表格样式

border 边框宽度

width 表格宽度

height 变革高度

表格标题和表头单元格标签

th - 可以替换td，字体变成标题的样式，会被加粗

caption - 添加表格标题

合并单元格：水平合并（跨列合并）colspan

垂直合并（跨行合并）rowspan

通过左上的原则，确定保留谁删除谁，给保留的单元格加代码

1.5表单标签

注册登陆搜索的时候用

input系列标签，在网页中显示手机用户信息的表单效果，可以根据type属性值的不同，展示不同的效果

<input type="">不会自动换行
属性：
a. type-password 会自动隐藏密码，显示为圆点

b. placeHolder - 占位符，提示用户输入内容，框框内浅色的提示字

c. radio - 多选一 name, 分组有相同name属性值的的单选框为一组，为一组的就能实现同一组内同时只有一个能选中 checked - 默认选中
d. checkbox -多选多
上传文件标签，默认同时只能上传一个，加multiple能够实现同时上传多个

不同功能的按钮- submit 提交按钮

d. reset - 重置按钮，点击之后恢复表单默认值

f. button - 普通按钮，默认无功能，用css设计

涉及提交按钮货重置按钮，需要一个表单域，以实现将前面所填信息都提交的功能，标签

1.6select下拉菜单

在网页中提供多个选择项的下拉菜单表单控件

select：下拉菜单的整体

option：下拉菜单的每一项

常见属性；（下拉菜单每一项的属性）

selected：默认选中该一项

1.7 textarea文本域标签
在网页中提供可输入的多行文本的表单控件

标签名 testarea

属性：

cols - 文本域内可见宽度

rows：文本域内可见行数

右下角可拖拽改变文本域的大小，一般通过css设计样式

label标签，用于绑定内容与表单标签的关系, 比如选择性别时，不用label只能点中小圈圈的时候才能选中，但是加上label可以使得点中圆圈后面的字时也能选中圆圈。

方法：
a. 使用label标签把内容包裹起来，在表单标签上添加id属性，在label标签的for属性中对应设置对应的id属性值

b. 直接用label标签把内容和表单标签一起包裹起来，需要把label标签的for属性删除

语义化标签

没有语义的布局标签div（会自动换行）,span(不换行）

有语义的布局标签，用于手机端页面开发，手机中网页和电脑中网页制作是不一样的

字符实体，通过其在网页上显示特殊符号

网页不认识多个空格，只认识一个空格，&nbsp代表空格

2.一个实例：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <title>question form</title>
</head>
<body>
    <h1>CHERISH TIME, FIND LOVE</h1>
    <hr>
    <form action="">
        Name:<input type="text" placeholder="please enter your name">
        <br><br>
        Sex:
        <label><input type="radio" name="sex" checked> male </label>
        <label><input type="radio" name="sex"> female </label>
        <br><br>
        Location:
        <select>
              <option> Beijing </option>
              <option> Shanghai </option>
              <option> Guangzhou </option>
              <option> Shenzhen </option>
        </select>
        <br><br>
        Marital Status:
        <label><input type="radio" name="marital status"> Single &nbsp</label>
        <label><input type="radio" name="marital status"> Married &nbsp</label>
        <label><input type="radio" name="marital status"> Divorced &nbsp</label>
        <label><input type="radio" name="marital status"> Widowed &nbsp</label>
        <label><input type="radio" name="marital status"> Keep Secret &nbsp</label>
        <br><br>
        Preferred Type:
        <label><input type="checkbox"> Cute &nbsp </label>
        <label><input type="checkbox"> Sexy &nbsp </label>
        <label><input type="checkbox"> Lolita &nbsp </label>
        <label><input type="checkbox"> Uncle &nbsp </label>
        <label><input type="checkbox"> Fresh Meat &nbsp </label>
        <br><br>
        Introduction:<br>
        <textarea cols="20" rows="10"> </textarea>
        <h5>I PROMISE</h5>
        <ul>
          <li> I am single and 18 years old at least.</li>
          <li> I am serious towards this activity.</li>
          <li> Hope to find the true love.</li>
        </ul>
        <input type="checkbox"> I agree with all terms.
    </form>
    <input type="submit" value="free registration">
    <!-- another method to use buttons -->
    <button type="reset"> reset </button>
</body>
</html>

效果：
请添加图片描述