day003——HTML初接触

最新推荐文章于 2024-07-21 17:58:14 发布
最新推荐文章于 2024-07-21 17:58:14 发布
阅读量94 收藏
点赞数
分类专栏： 前端学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Teeeeesting/article/details/109775041
版权

1.标签由标签名、标签属性和文本内容三部分组成。（注意：单标签没有文本内容）

2.标签属性是对标签的一种描述方式。

3.标签属性分通用属性、自由属性和自定义属性。

4.通用属性：所有标签都具有的属性。（除了br标签之外）

  • id：用来给标签取一个唯一的名称。在一个网页中必须唯一
  • class：用来给标签取一个类名称。可重复。
  • style：用来设置该标签的行内样式
  • title：当鼠标悬停该标签时的展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签通用属性</title>
</head>
<body>
    <!--id：给标签取一个标识名-->
    <p id="p1">段落1</p>
    <p id="p2">段落2</p>

    <!--class：给一组标签取一个类名-->
    <div class="test">
        div
    </div>
    <p class="test"> p </p>

    <!--style:用来设置当前标签的样式，也叫行内样式。-->
    <p style="color:red;width:200px;border:1px solid #00f;">测试</p>

    <!--title：给当前标签一个提示文本-->
    <p title="提示">title标签属性测试</p>
</body>
</html>

5.用户自定义属性：通常用来传值或用于图片的懒加载等方面。

      格式：data-*   eg：<img data-src="图片名" alt="提示文本"/>    、<p data-id="goodsid">。。。</p>

6.table主要用于呈现格式化数据。表格是由行和列组成。

格式：

<table>
    <tr>  <!--行-->
        <td></td>  <!--列-->
        <td></td>
        <td></td>
        ...
    </tr>
    ...
</table>

7.table表格属性：

  • border：设置表格边框，默认单位是像素
  • width：设置表格宽度，默认单位是像素
  • align：设置表格对齐（left（）默认）/right/center）
  • cellpadding：设置单元格间距，文本与单元格间距
  • cellapacing：设置像素间隙，单元格边框间距
<!--table>tr*2>td{内容$}*3-->
<table border="1" width="400" cellpadding="3" cellspacing="22" align="center">
    <tr>
        <th>内容11</th> <!--th：表头，主要对下面的内容起说明作用。th的内容会自动加粗和居中-->
        <th>内容22</th>
        <th>内容33</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
    </tr>
    <tr>
        <td>内容13</td>
        <td>内容25</td>
    </tr>
</table>

8.跨行/跨列属性主要用来绘制复杂表格。

rowspan：跨行

colspan：跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--table[border=1 width=500 align=center]>tr*3>td{内容$$}*3-->
    <table border="1" width="500" align="center">
        <tr>
            <td rowspan="2" align="center" valign="bottom">内容01</td>
            <!--align：左右对齐（left/center/right）-->
            <!--valign:垂直对齐（top/middle/bottom）-->
            <td>内容02</td>
            <td rowspan="3">内容03</td>
        </tr>
        <tr align="center">
            <td>内容02</td>
        </tr>
        <tr>
            <td>内容011</td>
            <td>内容022</td>
        </tr>
    </table>
    <hr>

    <table border="1" width="500" align="center">
        <tr >
            <td rowspan="2">内容01</td>
            <td colspan="2">内容02</td>
        </tr>
        <tr>
            <td>内容02</td>
            <td>内容03</td>
        </tr>
        <tr>
            <td colspan="3" align="center">内容01</td>
        </tr>
    </table>
</body>
</html>

9.绘制一个完整表格：caption（标题）、thead（表头）、tbody（表体）和tfoot（表尾）四部分组成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

    <!--table[border=q width=600 align=center]>(caption{学生信息表})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=1])-->
    <table border="q" width="600" align="center">
        <caption>学生信息表</caption>
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>家庭住址</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>001</td>
            <td>小明</td>
            <td>北京</td>
            <td>无</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小花</td>
            <td>上海</td>
            <td></td>
        </tr>
        <tr>
            <td>003</td>
            <td>小丽</td>
            <td>大同</td>
            <td>优秀</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="4" align="left">加油！</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

10.form表单标签是所有标签最核心标签之一。它是用来实现前后端交互的一个重要标签。

常用属性：

  • name：表单名称
  • action：表单数据提交的地方（通常是一个后台文件名（.jsp/.php/.asp/.py/.aspx），或网址）。如果是#，表示提交到当前文件下。
  • method：前端提交数据到后端的方法。主要有：get和post，默认是get。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form name="stuInfo" action="https://www.baidu.com/" method="get">
        <!--get方式提交会把数据暴露在外，post不会-->
        <input type="text" name="userName" placeholder="请输入姓名">
        <input type="submit">
    </form>
</body>
</html>

11.表单元素：

1）input类：主要用来输入、选择或发出指令。

type：text/password/radio/checkbox/file/button/image/submit/reset

  • text：单行文本输入框。tyoe="text"可以不写，默认值。属性：placeholder（提示）、name（命名）、value（默认值）、minlength/maxlength（最少/最多输入的字符个数）、disabled（失效）、readonly（只读）、pattern（正则匹配：后端也能实现，建议前端）
  • password：密码框 属性与text一样
  • radio：单选框，通常是两项以上。常用属性有：name（必须有）、value、checked（默认选中）、disabled（失效）、readonly（只读）
  • checkbox：复选框，可以用来选择0项、1项、多项。常用属性有：name（必须有）、value、checked（默认选中）、disabled（失效）、readonly（只读）
  • file：文件上传按钮
  • button：普通按钮，通常用它去调用脚本代码。常用属性有：value（按钮标题）、disabled（失效）
  • image：图片按钮，用法与button一样。特殊属性：src（用来加载提示图片，用它替换了value）。它有提交功能，有submit功能一样。
  • submit：提交按钮，用来将表单数据提交到后台
  • reset：重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态

  • 2）textarea类

文本域，也可以叫多行文本框，主要用于输入大批量内容。

  • 常用属性：name、id、cols（列数）、rows（行数）、placeholder、minlength、maxlength、required

3）select类：下拉列表框，用于单项选择。用option呈现每个选项。

  • multiple属性：表示可以多选，这时的下拉列表框变成了列表框

  • size属性：最多显示的行数

4）button类：普通按钮，具有提交功能。

可以单独使用，不写在form元素中。如果写在form中，有提交功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="">
        <!--文本框-->
        <input type="text" name="test" placeholder="输入一个数字：" value="22" maxlength="6" >
        <input type="text" name="test" placeholder="输入一个数字：" value="22" disabled="disabled">
        <input type="text" name="test" placeholder="输入一个数字：" value="22" readonly="readonly">
        <br>

        <!--密码框-->
        <input type="password"><br>

        <!--单选钮-->
        <input type="radio" name="sex" checked="checked"> 男
        <input type="radio" name="sex"> 女
            <!--相同name相互排斥-->
        <input type="radio" name="num"> 1
        <input type="radio" name="num"> 2
        <input type="radio" name="num"> 3
        <br>

        <!--复选框/检查框-->
        <input type="checkbox" name="hobby" checked>听音乐
        <input type="checkbox" name="hobby" checked>跑步
        <input type="checkbox" name="hobby">学习
        <br>

        <!--文件上传按钮-->
        <input type="file" >
        <br>

        <!--button：普通按钮，通常用它去调用脚本代码-->
        <input type="button" value="登录" disabled>
        <input type="button" value="登录" >

        <!--图片按钮-->
        <input type="image" src="F:/demo/venv/img/test.jpg" title="名字">
        <br>

        <!--提交按钮-->
        <input type="submit">

        <!--重置按钮-->
        <input type="reset" title="重置一下">

    </form>

    <form action="">
        <textarea name="memo" id="memo" cols="30" rows="10">
            备注
        </textarea>
    </form>

    <form action="">
        <label for="sex">性别：</label>
        <select id="sex">
            <option value="male">男</option>
            <option value="fmale">女</option>
        </select>
        <br>
        <label for="course">课程</label>
        <select  id="course" multiple size="2">
            <!--multiple：控制是否多选-->
            <option value="语文">语文</option>
            <option value="数学">数学</option>
            <option value="计算机">计算机</option>
            <option value="英语">英语</option>
        </select>
    </form>


        <!--button-->
        <button id="id1">确定</button>   <!--这里的button主要用来调用js脚本代码-->
        <form action="test.aspx">
            <input type="text" name="info">
            <button>提交</button>   <!--这里的button的功能与input中submit按钮功能一眼-->
        </form>

</body>
</html>

iframe：框架集，是用来将多个网页文件组合成一个文件。常用属性如下：

  • name：框架名
  • src：引入的外部html稳健
  • scrolling：滚动条（yes/no/auto）
  • width：宽度（%/px）
  • height：高度（%/px）
  • frameborder：是否有框架边框（1/0）
  • marginheight：框架离顶部和底端的具体（%/px）
  • marginwidth：框架距离左右的距离（%/px）

注意：在实际开发过程中，尽量减少使用iframe。因为它破坏了前进和后退功能，且不利于SEO。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe我的网站</title>
</head>
<body>
    <!--banner-->
    <iframe src="iframe/banner.html"  scrolling="no" width="100%" height="100%" frameborder="0" marginheight="0"></iframe>

    <!--导航-->
    <iframe src="iframe/nav.html"  scrolling="auto" width="20%"  height="300px" frameborder="0"></iframe>

    <!--核心内容-->
    <iframe src="iframe/content1.html" name="main" scrolling="no" width="70%" height="300px" frameborder="0"></iframe>


</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="../img/test.jpg" alt="banner">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--ul>li{分类$}*4>ul>li*5>a[href]{内容$}-->
<ul>
    <li>分类1
        <ul>
            <li><a href="content1.html" target="main">内容1</a></li>
            <li><a href="content2.html" target="main">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类2
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类3
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
    <li>分类4
        <ul>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
        </ul>
    </li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>内容1...</p>

</body>
</html>

 

王总总
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 ——学习笔记整理
Thaley的博客
02-09 776
HTML学习笔记整理
day002——HTML初接触
Teeeeesting的博客
11-17 92
1.标签属性：属性名=属性值，起到附加说明补充要求的作用。不是所有标签都有属性，比如br标签。 2.单标签：换行<br/>、水平线<hr/>、图片标签<img/>、文本<input/>、link标签<link/>、元信息标签<meta/>。 3.文本格式化标签：就是通过标签来美化文本外观 b和strong：都有加粗作用，但strong除了加粗还有强调作用。注：强调主要用于SEO（搜索引擎优化）时，便于提取对应关键字
day001——HTML初接触
Teeeeesting的博客
11-17 99
1.HTML：超文本标记语言。（一种标示性语言，不是编程语言，是标记语言，不能使用逻辑运算。通过标签将文档格式进行统一，是分散网络资源连接为一个逻辑整体） 标记语言是一套标记标签(markup tag) HTML用标记标签来描述网页内容 2.静态网页和动态网页的区别： 静态：网页中没有程序代码，只有HTML（即：超文本标记语言），一般后缀为.html,.htm,或者.xml等。虽然静态网页的页面一旦做成，内容就不会再改变了。 动态：页面代码虽然没有变化，但是显示内容可以随着时间、环境或者数据库操作.
Day22——HTML
S_numb的博客
12-17 564
文章目录HTML一、 关于 html 那些事1. 为什么要学 html？2. 什么是 html？3. 发展史4. 优势5. W3C 标准6. 学习 html 要达到的方法和目标7. 第一个 HTML 案例二、HTML 的基础知识1. HTML 的基本结构1.1 HTML 头部元素1.1.1 title 标签1.1.2 base 标签1.1.3 Link 标签1.1.4 style 标签1.1.5 ...
Pytorch学习笔记day2——Tensor运算
qq_40583925的博客
07-17 381
那么今天，我们来学习一下张量运算。笔者最早接触AI还是在tensorflow的时代。张量tensor本身，可以理解成向量和矩阵的一个推广。一维张量就是向量：A[i]二维张量就是矩阵：A[i][j]三维张量就是…就是三维张量…嗯总不能每个维度都起个名字吧：A[i][j][k]张量本身有很多算子，但是一般AI里面出现的张量计算都会比较简单，加减乘除差不多了。这里贴一个torch的API网址今天的主要目标，就是要把张量的生成，取数，基本运算都学会。
前端开发——Day4
漠宸离若的博客
10-17 140
HTML 基础-4个实例 本章介绍了 HTML 中较为常用的标签的实例。 您可能还没接触过这些实例，不过不用担心，阅读完本章您就能够掌握它们了！ HTML 标题 HTML 标题（Heading）是通过<h1> - <h6>标签来定义的. h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。 这里有六个标题元素标签 ——<h1>、<h2>、<h3>、<h4>、<h...
Java学习day01——java基础
weixin_45256659的博客
01-13 182
因为觉得自己的java学的不是很好，所以打算重新学习java，找了一些资源视频来看，然后不确定自己能坚持多久，因此想通过在这里记录自己的笔记的方式，鼓励自己，让自己能够坚持得久一些，同时也是方便自己进行查阅。 01_1.java语言的概述 1.java是sun公司开发的一门编程语言，目前被oracle公司收购 2.java开发的应用主要分为桌面应用（QQ、腾讯等）和互联网应用（淘宝、京东等） 3....
DAY01-HTML5标签
tang7mj的博客
07-17 619
通过综合应用各种HTML标签，创建一个包含个人简介的网页。通过综合应用各种HTML标签，创建一个包含Vue.js简介的网页。
WEB学习Day03——CSS
pyrans的博客
10-09 265
03.01_css选择器-属性选择器 选择器[属性名]{ 属性名称1：值1； 属性名称2：值2； .... } 选择器[属性名="属性值"]{ 属性名称1：值1； 属性名称2：值2； .... } 03.02_css选择器-包含选择器： 父子标签 先辈和后辈标签 先辈选择器 后辈选择器{ 属性名称1：值1； 属性名称2：值2； .... } 查找直接子标签 父标签选择...
Day17——知识点总结
01-21
1. Map双边队列 1.1 什么是Map 程序开发大部分数据都是键值对形式的 MySQL JSON XML 类对象成员变量和存储的数据 从前端发送的数据也可以转成Map格式 ==> 一键生成 ==> 类对象 ==> 一键存储 ==> 数据库 ...
Day18——知识点总结
12-22
1. String类 1.1 比较方式要求 1.2 获取方法 int length();![字符串比较要求](img/字符串比较要求.png) 获取字符串长度 "" char charAt(int index); 获取String字符串中指定下标位置的char类型字符，如果index...
Day19——知识点总结
12-22
1. 缓冲流 1.1 作用 使用缓冲数组以后，整体的读取，写入效率提升很大！！！ 降低了CPU通过内存访问硬盘的次数。提高效率，降低磁盘损耗。 字节输入缓冲 BufferedInputStream ... 所有的缓冲流都没有任何的读取，写入...
Day20——知识点总结
12-22
1. 常用API 1.1 StringBuffer 1.1.1 StringBuffer概述 为了解决String字符串操作导致的内存冗余，提高效率，Java中提供了StringBuffer和StringBuilder来操作字符串，并且提供了很多方法，便于程序员开发。...
003——2. LabVIEW Developer Day_数据采集与存储.pdf
09-14
LabVIEW
html--图片变化
2301_81140745的博客
07-20 422
2.点击上传图片会有变化。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 325
网页隐藏版一行小说阅读器
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
最新发布
apple_68589597的博客
07-21 673
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
HTML、CSS、JS浅浅浅浅浅解
lbdking的博客
07-20 1249
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
《0day安全：软件漏洞分析技术》第2版——深入探讨Windows平台安全
"0day+安全：软件漏洞分析技术（第2版）" 本书"0day+安全：软件漏洞分析技术（第2版）"是一部深入探讨网络安全领域中0day漏洞的专业著作，尤其专注于Windows平台的缓冲区溢出漏洞分析、检测与防护。全书共分为五篇...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值