• Html详解

    HTML5

    全称为HypherText Markup Language --> 超文本标记语言

    并不是一种编程语言,可以把HTML理解为-->告知浏览器如何构建网页

    为什么被称为标记语言？ -->看下面这行代码

    <p>This is a HTML Tagp>

    • 1

    < p > 我们称为 Opening Tag 也叫做起始标签

    称为Closing Tag 结束标签

    HTML可以理解为由大量标签整合成的一种规范，这个规范用于告知浏览器我们要构建的网页是什么样的

    本篇博客我们侧重于学会一些典型标签的使用，不做深入讨论和全面学习

    1. 生成HTML

    1. 如下所示便是最初生成HTML文件的基本格式
    2. 初学者建议手敲理解一下网页的基本信息，后续开发可以通过直接键入一个 ！然后回车或者Enter生成
    DOCTYPE html>

<html lang="en">
    
        
    <head>
        
        <title>html Crash For Beginnertitle>
        
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=chrome" >
        
        <meta name="网页关键词" content="此处为网页描述">
    head>
    <body>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, aut.p>
        
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores ad voluptatum dicta quos nisiillum distinctio, corrupti ut sequi nihil ab minus quod, quam nostrum et consequatur soluta?Laudantium, et!p>
    body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    2. 典型标签使用

    标题标签
    		<h1>Lorem ipsum dolor sit amet.h1>
        <h2>Lorem ipsum dolor sit amet.h2>
        <h3>Lorem ipsum dolor sit amet.h3>
        <h4>Lorem ipsum dolor sit amet.h4>
        <h5>Lorem ipsum dolor sit amet.h5>
        <h6>Lorem ipsum dolor sit amet.h6>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    段落标签
    <p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
p>

    • 1
    • 2
    • 3

    两对p标签则表示两个段落 两个段落间的间距会比段落中文本间距略大

    换行__分割线
    
<br>

<hr>

    • 1
    • 2
    • 3
    • 4
    字符样式标签
    <strong>strong>均为加粗显示  
<em>em>均为斜体显示        
<s>s>与<del>del>均为删除线		  
<u>u>与<ins>ins>均为下划线	


    • 1
    • 2
    • 3
    • 4
    • 5
    特殊符号标签
    字符代码显示作用
      ;空格符
    < ;小于号
    > ;大于号
    & ;与
    ¥ ;人民币
    © ;版权
    ® ;注册商标
    ° ;摄氏度
    ± ;正负号
    × ;乘号
    ÷ ;除号
    ² ;平方2
    ³ ;立方3

    3. 图像标签

    • 常见图像格式：JPG、PNG、GIF等
    • GIF常用于处理动画、logo、小图标等
    • PNG不支持动画，但对于色彩的处理非常平滑
    • JPG可控制显示的颜色最多，但是HPG是一种有损压缩格式，每修改一次图像便会得到一次损坏

    插入图像：

    <img src="imageURL" alt="SearchInfo">

    • 1

    src：为图像路径 alt最初用于显示当图像无法加载时的文字说明，现更新为搜索引擎的关键字 其他属性：

    属性代码属性值显示效果或作用
    srcURL提供图像的路径
    alt文本图像无法显示时的替换文本、或为浏览器搜索引擎提供信息
    title文本当鼠标悬停在图像上时展示的信息
    width像素设置图像宽度
    height像素设置图像高度
    border数字设置图像边框及宽度
    vspace像素设置垂直边距
    hspace像素设置水平边距
    align属性
    left左对齐左对齐
    right右对齐右对齐

    绝对路径：将要插入的目标文件位于电脑硬盘上的真实地址

    相对路径：以当前HTML文件为准，目标图像文件相对于HTML文件存放的位置

    位于当前文件的下一级文件时则要输入文件夹名和文件名：

    <img scr="img/img01/photo.jpg">
上一级文件夹：
<img scr="./photo.jpg">
上两级文件夹：
<img scr="../photo.jpg">

    • 1
    • 2
    • 3
    • 4
    • 5

    4. 超链接标签

    a标签定义超链接，定义格式如下：

    <a href="blog.csdn.net/yuqu1028">关注Java核心技术博主a>

    • 1

    对应于超链接常用的属性给出以下两种

    
<a href="blog.csdn.net/yuqu1028" target="_blank" >关注Java核心技术、算法领域博主a>

<a href="./WindowsWallpaper.jpg"download="WindowsWallpaper">点击下载a>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    5. 图片超链接

    利用a标签和img标签嵌套使用，点击图片跳转至目标网页，格式如下：

    <a href="blog.csdn.net/yuqu1028"><img src="./WindowsWallpaper.jpg" alt="WindowsWallpaper" title="WindowsWallpaper">a>

    • 1

    target属性

    • 在使用target属性时要考虑添加rel="noopenernoreferrer"以防止window.open API的恶意行为
    • 使用target=“_blank”将这个进程运行到一个新的页面如果JS开销过大则会影响性能，要避免这种情况就要添加rel=“noopener”
    • rel=“noopener”：防止新标签页使用JavaScript的windows.open功能，该功能可能会访问你的包含链接的页面来执行操作，窃取信息共享受到感染的代码
    • rel=“noopener”：防止其他网站或者跟踪服务

    锚点链接

    首先利用a标签在网页中某个位置插入一个锚点再利用超链接设置对应id跳转，格式如下：

    <a href="#c1">欢迎回来a>

<a id=c1 href="#">返回网页头部a>

    • 1
    • 2
    • 3

    6. 表格&列表

    表格

    由表头、表体、表脚注组成，格式如下：

     

    • 1
    • 2
    • 3
    • 4
    • 5

    属性：

    
border 边框  -->像素表示
rules 合并边框线  0 or all
width 设置表格总宽度
height 设置表格总高度

cellspacing 规定单元格之间的间隔
cellpadding 规定文本内容到边框间隔

rowsban 向下合并单元格 合并行 上下两行合并
colspan 向右合并单元格 合并列 左右两列合并

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    列表

    无序列表与有序列表

    		<ol>ol>+<li> 有序列表
        <ul>ul>+<li> 无序列表

    • 1
    • 2

    自定义列表

    <dl>自定义列表dl>
<dt>标题dt>
<dd>文本内容dd>

    • 1
    • 2
    • 3

    7. 表单及表单控件

    表单实现用户与后台的交互，用户通过交单可以提交数据至后台进行存储，表单定义格式如下：

    <form action="#" method="post">form>

    • 1

    form属性：

    action为用户提交数据的地址 method为提交数据的方式 可以选择get 或 post post可以理解为加密传输保证数据的安全性 get即为明文传输
    target属性与上述相同
    name用于定义表单名 input输入中name代表提交后该项提交的内容(是个名称)

    输入框input

    表单输入类型input

    
<input type="text" name="username">

<input type="password" name="pwd">

<input type="submit">

<input type="reset">

<input type="text" name="用户名" value="张三">

<input type="password" name="密码" maxlength="8">

<input type="text" name="账号" size="16">

<p>性别：
   <label>
   		<input type="radio" value="boy" name="sex" /> 男
   label>
   <label>
        <input type="radio" value="girl" name="sex" /> 女
   label>
p>


<p>爱好
   <label>
        <input type="checkbox" name="music">音乐
   label>
   <label>
        <input type="checkbox" name="sports">运动
   label>
   <label>
        <input type="checkbox" name="sleep">睡觉
   label>
p>


 
<input type="image" src="../Day0516/1.jpg" alt="111">

<h3>表单文件类型h3>
<input type="file">
<input type="file" accept="image/webp">
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    label标签：label标签用于将字段和选项点连接起来 ，即点击字段也可以触发对应选项点选中，label分为隐式和显式两种关联方式，如下：

    

<h3>单选h3>
        你的性别是：
        <label>
        <input type="radio" name="sex">男label>
        <label>
        <input type="radio" name="sex">女label>
        <label>
        <input type="radio" name="sex">其他
        label>

<h3>单选2h3>
        <input type="radio" name="sex" id="nan">
        <label for="nan">男label>
        <input type="radio" name="sex" id="nv">
        <label for="nv">女label>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    其他属性：

    
<input type="text" placeholder="请输入用户名">

<input type="text" readonly>





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    文本域texteara

    textarea用于多行输入，输入框大小可以变化，使用格式如下：

    

        <textarea name="str"  cols="30" rows="10"  >
            文本内容
        textarea>
        <br>

        <input type="text" name="oy" value="初值">
        <br>
        <input type="submit" value="提交">

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    下拉框select

    利用select标签可以在表单中创建一个下拉菜单供用户选择，示例如下：

    <select>
    <optgroup>
        <option>option>
    optgroup>
select>

<p>请选择毕业院校：
        <select name="collage" >
            <optgroup label="国外">
        <option value="值1">苏黎世联邦理工大学option>
                <option value="值2">伦敦大学option>
                <option value="值3">首尔大学option>
            optgroup>
            <optgroup label="国内">
                <option value="值1">清华大学option>
                <option value="值1">南开大学option>
                <option value="值1">电子科技大学option>
            optgroup>
        select>
    p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    下面给出一些select属性

    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    8. 媒体元素标签

    audio标签用于存放音频文件，video标签用于存放视频文件，如下：

    <video src="./video/ac9423df6b3303333c02bc40d4b82afd.mp4" controls autoplay>video>
<audio src="./audio/20221104_134247.m4a" controls autoplay>audio>



    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    webpack 打包优化 - splitChunks
    数据结构---课后习题（第一章）
    Nginx 配置根据路径转发
    【linux】编译器使用
    计算机的基本分类
    云计算+区块链，企业数字化转型的混合强劲动力
    java基于Springboot+vue的宠物销售商城网站 elementui
    java项目容器化(docker)部署注意点
    The little schemer 学习
    桌面软件开发框架大赏
  • 原文地址：https://blog.csdn.net/yuqu1028/article/details/127687740