后端上手学习Html基础知识

学习OK呀
134 阅读7分钟

前言

对于程序员，或多或少都接触过html相关知识，所以大部分来说应该都有些基础，快速的过一遍Html相关知识，主要就是针对一些标签特性和一些整体结构的分布。

主体的结构

DOCTYPE 用来声明它告诉浏览器文档使用的 HTML 版本， 而html标签包裹整个标签文档内容，它是根标签。里面包含head和body标签

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

head标签

包含文档的元数据，文档的标题 <title> , css的样式链接 <link>, js脚本链接<script>等.

<head>
    <title>标题</title> 
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script type="text/javascript" src="example.js"></script>
<head/>

上述代码，就是直接引入mystyle.css 的样式文件和example.js的脚本文件

body标签

body标签内部就是 所构建出的整个网页的正文内容。例如我们常用的div,span,p等等标签拼凑出不同结构的网页内容。

<body>
    <div></div>
    <div>
        <span></span>
    </div>
    ....
</body>

标签的全局属性

id属性

id属性是元素在网页内的唯一标识符 。
注意： id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格

后续书写css样式时候，可以通过#选中该标签进行样式的调整

<div id="test"></div>

class属性

class属性用来对网页元素进行分类

后续书写css样式时候，可以通过.选中该类别进行样式的调整

<div class="test"></div>

style属性

style属性用来指定当前元素的 CSS 样式

<div style="width: 100px;">hello</div>

Html中核心标签

对于比较核心，也是主要重点关注的就是这些body内部中构建的标签。
主要以 块状标签 , 行内元素 和 行内块标签 的特点将他们区分开。

注意： 后续有关css中的display属性可以调整切换元素的特点。

块状标签

特点： 独占一行，对宽高的属性值生效；如果不给宽度，就默认为浏览器的宽度，就是100%宽

  • div ： 定义 HTML 文档中的一个分隔区块或者一个区域部分
  • p ： 段落标签
  • ul : 无序列表的标签
  • ol : 有序列表的标签
  • li ： 有序/无序的项目
  • h1-h6 : 标题标签
  • form : 表单标签

行内标签

特点： 需要靠内容撑开宽高 ， 可以多个标签存在一行，对宽高属性值不生效。

  • a：链接网页地址
  • span ：对文档中的行内元素进行组合使用
  • em ：强调文字斜体
  • strong ：强调文字加粗

注意： 虽然img，input，select,textarea属于行内元素，但效果等于块元素 ，所以综合来讲属于行内替换元素（就是浏览器根据元素的标签和属性，来决定元素的具体显示内容） ，可以设置宽度和高度

具体标签解析

表单标签

用于收集用户信息填写的输入。常用的有input,textarea,select,button等标签。

标签上基本属性：name为控件的名称， value为控件的值，id为控件的唯一标识 ,disabled为控件的禁用

  1. input标签： 通过不同的type值，来实现不同的样式结果, 其中有关type属性具体的选项值

    • button : 等同于button标签效果
    • checkbox : 用于复选框，勾选效果 ，是否勾选值checked
    • color ： 用于色值选择器
    • date: 用于用户输入日期 ，年月日
    • email :用户输入或编辑一个电子邮箱地址
    • radio : 用于单选框 ,保证多个标签上name一致,是否勾选值checked
    • text ： 输入文本内容
    • reset ： 重置按钮
    • password ： 密码输入框，输入内容默认黑点
    • hidden ： 不展示标签，用于存值
    • file ： 上传文件按钮
    • range : 指定选择范围内的数字 ,max最大值，min最小值，step步长
    • submit： 用于提交数据到服务器，配合form标签
<input type="text" name="textName" value="textValue" placeholder="为空时提示文本"/>
<input type="checkbox" name="c" value="v1" checked/>
<input type="color" name="c1"/>
<input type="image" src=""/>
<input type="range" min="0" max="100" value="90" step="10" />

<input type="radio" name="r" value="v1" />
<input type="radio" name="r" value="v2" />

<form action="" method="">  // action ：表单数据提交路径，mehtod：提交的方式get/post
    <input type="submit" value="提交">
</form>
  1. label标签： 给用户提供文字说明的控件，其中属性for用于关联控件的id属性
<label for="inputId">请输入：</label>
// 配合input的使用
  1. select标签： 下拉菜单，组合option来提供选项,selected标识默认选中的
<label for="selectId">宠物：</label>
<select id="selectId" name="selectName">
    <option value="">--请选择一项--</option>
    <option value="dog">狗</option>`
    <option value="cat">猫</option>`
    <option value="others">其他</option>
</select>`

  1. form表单标签:用于创建一个 HTML 表单，所有表单元素都应放在 <form> 标签内部

    • action：表单数据提交的 URL。
    • method：表单数据提交的方式 ， 如get 和 post
<form action="submit.php" method="post">
    <input type="submit" value="提交">
</form>
  1. textarea 标签： 创建多行文本输入框，适合输入较长的文本内容，如评论、留言
    • rows：文本框的行数。
    • cols：文本框的列数。
<textarea id="message" name="message" rows="4" cols="50">请输入留言内容</textarea>
  1. button 按钮标签： 提交按钮、重置按钮或自定义功能按钮
    • type 属性：常用值有 submit、reset和 button

超链接标签

<a href="链接地址" target="目标窗口的打开方式"> 用于显示链接地址，方便用户点击跳转。

其中的属性：

  • href: 打开的链接地址
  • target： 目前窗口打开的方式
    • _self: 默认方式，当前窗口打开
    • _blank: 在一个全新空白窗口中打开
  • title: 为链接提供额外的提示信息，当鼠标悬停在链接上时，会显示该属性的值
  • rel:指定当前文档与目标资源之间的关系 , 如nofollow

常见的用途：

  • 空链接： 通常用于占位使用#,没有确定链接地址的时候
  • 外部网页链接：指定http地址，跳转指定网页链接
  • 内部文件链接：链接内部文件的跳转 ，href可以指定相对路径的文件
  • 下载链接： 指定下载路径，点击下载文件
  • 锚点链接：跳转页面的指定位置 ，通过href指定#配合id，跳转到页面元素
<a href="#">空链接</a>
<a href="http://wwww.baidu.com">外部网页链接</a>
<a href="xx.pdf">内部文件链接</a>
<a href="http://wwww.baidu.com" target="_blank">下载链接</a>
<a href="#section2">锚点链接</a>

多媒体标签

  1. video 标签： 用于显示视频播放，其中src为视频文件的网址

注意： 视频文件目前只支持mp4, webm, ogg

  • controls：可选属性，添加该属性会显示浏览器默认的视频播放控件。
  • width 和 height：可选属性，分别指定视频播放器的宽度和高度。
  • type：指定视频文件的 MIME 类型，例如 video/mp4 表示 MP4 格式
  1. audio 标签： 用于放置音频内容，其中src也是对应的音频文件

注意： 音频文件目前支持mp3, wav, 0gg

  • controls：可选属性，添加该属性会显示浏览器默认的音频播放控件。
  • type：指定音频文件的 MIME 类型，例如 audio/mpeg 表示 MP3 格式。
  1. source 标签： 用于指定一项外部资源，一般配合 video和audio中指定多项资源
  • src：指定媒体资源的 URL 路径。
  • type：指定媒体资源的 MIME 类型，帮助浏览器快速判断是否支持该格式。
<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
</video>

<audio controls>
    <source src="example.mp3" type="video/mp4">
    <source src="example.ogg" type="video/webm">
</audio>

图片标签

img： 用于嵌入图像的标签，它是一个自闭合标签，无需结束标签

  • src: 用于指定图像文件的位置
  • alt: 用于设定图片的文字说明
  • width和height: 用于指定图像显示的宽度和高度
  • title: 为图像提供额外的提示信息，当鼠标悬停在图像上时会显示该属性的值
<img src="1.jpg" alt="示例图片">

其他标签

iframe: 用于在当前 HTML 页面中嵌入另一个 HTML 页面

  • src：该属性是必需的，用于指定要嵌入的 HTML 页面的 URL，可以是相对路径，也可以是绝对路径。
  • width 和 height：这两个属性是可选的
  • scrolling : 指定是否在其中显示滚动条，yes（始终显示滚动条）、no（始终不显示滚动条）和 auto（根据内容情况自动显示滚动条）
  • allowfullscreen: 设置true，则可以使用全屏模式展开
<iframe src="url地址" width="宽度" height="高度"></iframe>

总结

主要还是了解下html的结构和各标签作用，日常使用可能div,span 对布局结构居多些。

avatar
文章
阅读
粉丝