• Html学习

    一个移动端开发，学习前端的过程，比较笨拙从最开始的基础开始。后续就是我分享在这个过程中学到的知识，和记录下来的知识。有需要学习的同学，可以参考，希望对大家有帮助。

    一、网页语义结构

    1.基本骨架

    1. <body>
    2.   <header>页眉</header>
    3.   <main>
    4.     <article>
    5.       <h1>文章标题</h1>
    6.       <p>文章内容</p>
    7.     </article>
    8.   </main>
    9.   <footer>页尾</footer>
    10. </body>

    二、元素属性

    1.id

    • 元素在网页的唯一标识值
    • 唯一性
    • 不允许包含空格
    • 定位锚点--加上#号html直接定位到指定位置

    2.class

    • 网页元素进行分类
    • 可以有多个属性 空格分开

    3.title

    鼠标悬浮导航栏，显示标题，移开不显示

    4.tabindex

    •     输入框光标切换输入框
    •     0，参与tab遍历由浏览器决定，通常按照网页出现顺序
    •     正整数，通常按照从小到大进行遍历

    5.accesskey

    •     获取焦点的快捷键，指定值可以按下快捷键到该值
    •     与操作系统，浏览器快捷键冲突时，不会起作用

    6.style

    当前元素的css样式

    7.hidden

    •     布尔属性，不再渲染此属性
    •     css可见性设置高于hidden

    8.lang

    语言

    9.dir

    文字的阅读方向

    •         ltr：左到右---英语
    •         rtl：右到坐---阿拉伯语等
    •         auto：根据解析内容自行决定

    10.contenteditable

    允许用户修改内容，用户单击可修改，除非提交到服务器，否则刷新后恢复

    11.spellcheck

    是否打开拼写检查

    12.data

    自定义属性，没有其它属性元素合适放就用此定义元素

    三、文本标签

    1.<div>

    无语义的块级元素

    2.<p>

    块级元素，一个段落

    3.<span>

    行内标签（即不会产生换行）

    4.<br>，<wbr>

    换行，块级元素间不要使用，wbr可选换行

    5.<hr>

    分割线

    6.<pre>

    保留空格和其它属性

    7.<strong><b>

    加粗，行内元素，<b>不建议使用违反语义和样式分离的原则

    8.<em>，<i>

    斜体，行内元素

    9.数学公式相关标签

    •     <sub>：下标，行内元素
    •     <sup>：上标，行内元素
    •     <var>：代码或数学公式的变量

    10.<u>，<s>

    下划线，删除线

    11.<blockquote>，<cite>，<q>

    链接

    12.<code>

    计算机代码

    13.<mark>

    内容黄色显示，加重显示

    14.<small>

    内容最小显示，法律提示信息

    15.<time>，<data>

    时间相关

    16.<address>

    某人或者某个组织的联系信息

    17.<ins>，<del>

    下划线，中划线

    四、列表标签

    1.ol

    有序列表，会在内部的列表项前面产生数字编号

    •     reversed 倒序
    •     start指定开始的数字
    •     type以什么开始，

                                   a：小写字母
                                    A：大写字母
                                    i：小写罗马数字
                                    I：大写罗马数字
                                    1：整数（默认值

    2.<ul>

    无序列表，会在内部的列表项前面产生实心小圆点

    3.<li>

    用在<ol>或<ul>容器之中

    4.<dl>，<dt>，<dd>

    元素缩进等级

    五、图像标签

    1.<img>

    • alt:图像解释说明
    • width,height宽高
    • referrerpolicy：导致的图片加载的 HTTP 请求，默认会带有Referer的头信息。          referrerpolicy属性对这个行为进行设置
    • crossorigin：是否采用跨域的形式下载图片，默认是不采用
    • loading：auto：浏览器默认行为，等同于不使用loading属性。
    • lazy：启用懒加载。
    • eager：立即加载资源，无论它在页面上的哪个位置
    • srcset：显示多张图片，像素密度
    • sizes:屏幕大小

    2.<picture>

    内部使用<source>和<img>

    六、表单标签<form>

    1.<fieldset>

    标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。

    2.<label>

    3.<input>

    •     autofocus：自动获取焦点
    •     disabled：置灰不可点击，可见
    •     list：设置控件相关数据列表
    •     name：控件键名
    •     readonly：只读
    •     required：是否必填
    •     type：控件类型

    type控件类型扩展如下

    （1）type="text" 文本

    • maxlength/minlength：最大值/最小值
    • pattern：正则
    • placeholder：默认值
    • readonly只读
    • size：输入框长度
    • spellcheck：是否拼写检查

    （2）type="search"

    搜索输入框

    （3）type="button"

    并不建议使用 可直接使用button

    （4）type="submit"

    提交按钮

    • formaction：提交表单数据的服务器 URL。
    • formenctype：表单数据的编码类型。
    • formmethod：提交表单使用的 HTTP 方法（get或post）。
    • formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
    • formtarget：收到服务器返回的数据后，在哪一个窗口显示

    （5）type="image"

    图片作为按钮和submit使用一样

    • alt：图像无法加载时显示的替代字符串。
    • src：加载的图像 URL。
    • height：图像的显示高度，单位为像素。
    • width：图像的显示宽度，单位为像素。
    • formaction：提交表单数据的服务器 URL。
    • formenctype：表单数据的编码类型。
    • formmethod：提交表单使用的 HTTP 方法（get或post）。
    • formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
    • formtarget：收到服务器返回的数据后，在哪一个窗口显示。

    （6）type="reset"

    切换成初始值

    （7）type="checkbox"

    复选框

    （8）type="radio"

    单选框

    •     checked 是否选中当前元素
    •     value 默认on

    （9）type="email"

    电子邮箱

    （10）type="password"

    密码
        inputmode：允许用户输入的数据类型，可能的值有none（不使用系统输入法）、text（标准文本输入）、decimal（数字，包含小数）、numeric（数字0-9）等。

    （11）type="file"

    文件选择框，多用于文件上传

    （12）type="hidden"

    隐藏控件

    （13）type="number"

    数字

    • max：允许输入的最大数值。
    • min：允许输入的最小数值。
    • placeholder：用户输入为空时，显示的示例值。
    • readonly：布尔属性，表示该控件是否为只读。
    • step：点击向上和向下箭头时，数值每次递减的步长值。如果用户输入的值，不符合步长值的设定，浏览器会自动四舍五入到最近似的值。默认的步长值是1，如果初始的value属性设为1.5，那么点击向上箭头得到2.5，点击向下箭头得到0.5。

    （14）type="range"

    用户拖动滑块

    • max：允许的最大值，默认为100。
    • min：允许的最小值，默认为0。
    • step：步长值，默认为1

    （15）type="url"

    只能输入网址的输入框
        与<datalist>和<option>结合下拉框

    （16）type="tel"

    电话号码

    （17）type="color"

    颜色选择器

    （18）type="date"

    日期选择器，只能年月日 不能时分秒

    • max：可以允许的最晚日期，格式为yyyy-MM-dd。
    • min：可以允许的最早日期，格式为yyyy-MM-dd。
    • step：步长值，一个数字，以天为单位。

    （19）type="time"

    时间输入框 可以输入时分秒，不能输入年月日

    • max：允许的最晚时间。
    • min：允许的最早时间。
    • readonly：布尔属性，表示用户是否不可以编辑时间。
    • step：步长值，单位为秒。

    （20）type="month"

    年月输入框

    （21）type="week"

    一年中第几周

    （22）type="datetime-local"

    是一个时间输入框，让用户输入年月日和时分，格式为yyyy-MM-ddThh:mm

    4.<button>

    • autofocus：是否有焦点
    • disabled：是否可用置灰
    • name：控件名字
    • value：值
    • type：按钮的类型，可能的值有三种：submit（点击后将数据提交给服务器），reset（将所有控件的值重置为初始值），button（没有默认行为，由脚本指定按钮的行为）。
    • form：指定按钮关联的<form>表单，值为<form>的id属性。如果省略该属性，默认关联按钮所在父表单。
    • formaction：数据提交到服务器的目标 URL，会覆盖<form>元素的action属性。
    • formenctype：数据提交到服务器的编码方式，会覆盖<form>元素的enctype属性。可能的值有三种：application/x-www-form-urlencoded（默认值），multipart/form-data（只用于文件上传），text/plain。
    • formmethod：数据提交到服务器使用的 HTTP 方法，会覆盖<form>元素的method属性，可能的值为post或get。
    • formnovalidate：布尔属性，数据提交到服务器时关闭本地验证，会覆盖<form>元素的novalidate属性。
    • formtarget：数据提交到服务器后，展示服务器返回数据的窗口，会覆盖<form>元素的target属性。可能的值有_self（当前窗口），_blank（新的空窗口）、_parent（父窗口）、_top（顶层窗口）。

    5.<select>

    下拉菜单
        <option>，<optgroup>

    6.<textarea>

    多行文本框

    7.<progress>

    进度条

    七、其它标签

    1.<dialog> 对话框

    open close cancel

    2.<details> 折叠文本

    •     open 打开
    •     <summary> 折叠内容标题

    最后

    下图为本文对应的思维导图。

  • 相关阅读:
    Vue学习笔记（十）：全局事件总线
    Java多线程-线程的优先级(priority)以及守护线程(daemon)
    利用map的特性对数组进行操作
    如何做好测试管理?
    【AICFD案例教程】汽车外气动-AI加速
    【vue3+ts】@设置别名
    没有任何销售经验怎么管理销售团队？
    杨辉三角形（Java版）
    华为OD机考题(HJ71 字符串通配符)
    241. 为运算表达式设计优先级 : DFS 运用题
  • 原文地址：https://blog.csdn.net/chenyiluo94/article/details/125375350