首页 > 其他分享 >html入门基础

html入门基础

时间:2024-04-05 22:30:00浏览次数:23  
标签:控件 入门 标签 基础 列表 html li 表单 属性

html主要框架:

<html>

        <!--头部-->

        <head>
            <title>标题</title>
        </head>

        <!--主体-->
        <body>
        </body>
</html>

一、标签

1.加粗<strong></strong>               b

2.倾斜<em></em>                         i

3.下划线<ins></ins>                      u

4.删除线<del></del>                      s

5.单标签

        <br> 换行

        <hr>水平线

6.注释:<!--...-->

7.分级标题:<h1></h1>....<h6></h6>

8.段落标签:<p></p>

9.图片:<img src=”图片的URL”  alt=”显示不出替代文字”  title=”鼠标移到提示文字” width=”100” height="100">

        Alt 替换文本

        Title 提示文本

        Width 图片宽度

        Height 图片高度

10.url路径选择

        . 当前文件所在文件夹

        .. 上级文件夹

        / 进入某个文件夹里面

11. 超链接:<a href=”https://www.baidu.com”  target=_blank>跳转到百度</a>新窗口打开

href属性值写#为空链接,不会跳转。

12. 音频标签:<audio src=”音频的URL” ></audio>

        常见属性:src  controls(显示音频控制面板)  loop(循环播放)  autoplay(自动播放)

13.视频标签:<video src=”视频的URL” ></video>

        属性: src   controls  loop  muted(静音播放)  autoplay (自动播放必须要静音)

二、列表

作用:布局内容排列整齐的区域

列表分类:无序列表、有序列表、定义列表

1.无序列表标签:ul嵌套li ,ul是无序列表,li是列表条目

        <ul>

                <li> 第一项</li>

                <li> 第二项</li>

                ……

        </ul>

注意:ul只能包裹li标签,li里可包裹任何内容

2.有序列表标签:ol嵌套li ,ul是无序列表,li是列表条目

        <ol>

                <li> 第一项</li>

                <li> 第二项</li>

                ……

        </ol>

3.定义列表标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述

        <dl>

                <dt>列表标题</dt>

                <dd>列表描述</dd>

                ……

        </dl>

三、表格

标签:table嵌套tr(行),tr嵌套td(内容单元格)/th(表头单元格,默认居中加粗)。

border属性添加表格边框线。

<table border=”1”>

        <tr>

                <th>姓名</th>

                <th>班级</th>

                <th>总分</th>

        </tr>

        <tr>

                <td>张三</td>

                <td>三班</td>

                <td>285</td>

        </tr>

</table>

表格结构标签:thead 表格头部  tbody表格主体  tfoot表格底部

合并单元格:跨行合并,保留最上单元格,添加属性rowspan,合并几个单元格数字为几。   

例:<td rowspan=’2’>100</td>

跨列合并,保留最左单元格,添加属性colspan 例:<td colspan=’2’>100</td>

四、表单

作用:收集用户信息。

使用场景:登录页面,注册页面,搜索区域

input标签 :type属性值不同功能不同 <input type=”...”>

type属性:

        text 文本框,用于属于单行文本

        password 密码框

        radio   单选框

        checkbox    多选框

        file 上传文件

input标签占位文本:

作用:提示信息,文本框和密码框都可以使用

         <inptu type="..."  placeholder="提示信息">

1.单选框radio

常用属性:name 控件名称,checked 默认选中

<input type="radio"  name="gender" checked> 男

<input type="radio"  name="gender" > 女

2.上传文件file

默认选一个文件,添加multiple属性可实现文件多选功能。

<input type="file"  multiple>

3.多选框:

        <input type="checkbox">a
        <br>
        <input type="checkbox" checked>b
        <br>
        <input type="checkbox">c

多选框默认选中:checked属性

4.密码框

<input type="password">

5.下拉菜单标签:

select嵌套option,select是下拉菜单整体,option是下拉菜单每一项。

<select>

        <option>北京</option>

        <option>上海</option>

        <option>天津</option>

        <option  selected>重庆</option>

</select>

6.文本域:

多行输入文本表单控件  <textarea  cols="30" rows="10"> 默认提示文字</textarea>

注:右下角拖拽功能一般禁用,工作中用css设置尺寸

7.lable标签:

网页中,某个标签的说明文本。用label标签绑定文字和表单控件关系,增大表单控件点击范围。

写法:1.  label标签只包裹内容,for属性值与表单控件id属性值相同

                <input type="radio" id="man"><lable for="man"> 男</lable>

        2.  label标签包裹文字和表单控件,不要属性

                <label><input type="radio">女</label>

提示:支持label增大点击范围的表单控件:文本框,密码框,上传文件,单选框,多选框,下拉菜单,文本域。

8.按钮button:

<button type="">按钮</button>

type属性:  submit 提交按钮(默认)

                    reset 重置按钮

                    button 普通按钮,一般配合javascript使用

内容包含在form表单区域里面:

<form>

        用户名:<input type="text">

        <br>

        密码:<input type="password">

        <br>

        <button type="reset">重置</button>

</form>

9.无语义布局标签:

  1. <div>每个div标签独占一行</div>
  2. <span>span标签,不换行</span> 两个span标签也在同一行

10.字符实体:

在网页中显示预留字符

  1. 空格   &nbsp;
  2. < <     &lt;
  3. > >     &gt;

标签:控件,入门,标签,基础,列表,html,li,表单,属性
From: https://blog.csdn.net/qq_74218815/article/details/137409193

相关文章

  • 人工智能基础概念5:使用L1范数惩罚进行Lasso回归(正则化)解决机器学习线性回归模型幻觉和
    一、引言在老猿CSDN的博文《人工智能基础概念3:模型陷阱、过拟合、模型幻觉》中介绍了通过L1或L2正则化来限制模型的复杂度来解决过拟合的问题,老猿当时并不了解这背后的原理,这2天通过查阅资料终于明白了相关知识,在此一L1正则化来分享一下相关原理。二、相关概念2.1、......
  • 蓝桥杯 试题 基础练习 Fibonacci数列
    问题描述Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1。当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少。输入格式输入包含一个整数n。输出格式输出一行,包含一个整数,表示Fn除以10007的余数。说明:在本题中,答案是要求Fn除以10007的余数,因此我们只要......
  • 前端系列-HTML5新特性
      HTML5引入了许多新特性和改进,其中包括但不限于:语义化标签:新增了像 <header>、<footer>、<nav>、<article>、<section> 和 <aside> 等元素,用于更好地表现文档结构。表单增强:添加了新的输入类型,如 type="email"、type="url"、type="date" 等,并支持 required、place......
  • HTML 文本格式化
    ​ HTML文本格式化通常使用一系列特定的标签来改变文本的外观或结构。这些标签可以控制文本的字体、大小、颜色、对齐方式等,也可以用来标记文本的逻辑结构(如段落、标题、列表等)。除了这些基本的格式化标签,HTML还支持通过CSS(级联样式表)来更精细和灵活地控制文本的格式和样式。......
  • PS从入门到精通视频各类教程整理全集,包含素材、作业等(5)
    PS从入门到精通视频各类教程整理全集,包含素材、作业等最新PS以及插件合集,可在我以往文章中找到由于阿里云盘有分享次受限制和文件大小限制,今天先分享到这里,后续持续更新初寒调色案例及练习图等文件https://www.alipan.com/s/k5bdZJrnacS提取码:s1r6点击链接保存,或者复......
  • PS从入门到精通视频各类教程整理全集,包含素材、作业等(6)
    PS从入门到精通视频各类教程整理全集,包含素材、作业等最新PS以及插件合集,可在我以往文章中找到由于阿里云盘有分享次受限制和文件大小限制,今天先分享到这里,后续持续更新橘子老师章节9-17图像的调色等文件https://www.alipan.com/s/6xF4ubiQDAD提取码:fz86点击链接保存......
  • 微信小程序开发 基础知识(持续更新中~)
    ......
  • 第06章 Session基础
    Cookie和Session介绍Cookie是当你访问某个网站的时候,由网站服务器存储在你本地电脑上的数据信息。当你再次访问这个网站时,网站服务器就会从Cookie中获取到之前存储的数据信息。请注意,Cookie是作为http请求头的一部分向网站服务器发送数据信息的。不过,这一切的操作对于访问用户......
  • 疯狂Python讲义学习笔记——第2章变量和简单类型2.4字符串入门
    思维导图          字符串的意思是“一串字符”,比如"Hello,Python"是一个字符串,"Howdoyoudo?"也是一个字符串。Python要求字符串必须使用引号括起来,可使用单引号或双引号,只要两边的引号能配对即可。4.1字符串和转义字符        字符串的内容几乎可......
  • JavaScript基础代码练习之数列第n位
    一、这段代码要求用户输入一个数字n,然后使用递归的方式计算斐波那契数列中第n位的值,并将结果以警告框的形式显示出来。斐波那契数列是一个经典的数学问题,其中每个数字是前两个数字的和,数列的前两个数字通常是1。因此,这段代码中的函数F(n)使用了递归的方式来计算第n位的斐波那契......